ページへの Dynamic Media アセットの追加

Web サイトで使用するアセットにダイナミックメディア機能を追加するには、ダイナミックメディア​または​インタラクティブメディア​のコンポーネントをページに直接追加します。デザイン モードに切り替えて、Dynamic Media コンポーネントを有効にします。次に、これらのコンポーネントをページに追加し、そのコンポーネントにアセットを追加できます。Dynamic Media コンポーネントおよびインタラクティブメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかを自動的に把握します。それに従って、使用可能なオプションが変わります。

Adobe Experience Manager を WCM として使用している場合は、Dynamic Media アセットを直接ページに追加します。

メモ

画像マップは追加設定なしでカルーセルバナーで使用できます。

ページへの Dynamic Media コンポーネントの追加

ダイナミックメディアまたはインタラクティブメディアのコンポーネントをページに追加することは、任意のページにコンポーネントを追加するのと同じです。ダイナミックメディアとインタラクティブメディアのコンポーネントの詳細については、次のセクションで説明します。

ダイナミックメディアのコンポーネントやビューアをページに追加する場合:

  1. ダイナミックメディアコンポーネントを追加するページを Experience Manager で開きます。

  2. ダイナミックメディアコンポーネントがない場合は、サイドキックでルーラーを選択して​デザイン​モードにしてください。

  3. parsys の​編集​を選択します。

  4. ダイナミックメディア​を選択すると、ダイナミックメディアコンポーネントを利用できるようになります。

    メモ

    詳しくは、デザインモードでのコンポーネントの設定を参照してください。

  5. サイドキックの鉛筆アイコンをクリックして、編集​モードに戻ります。

  6. サイドキックの​その他​グループからページの目的の場所に、ダイナミックメディア​または​インタラクティブメディア​のコンポーネントをドラッグします。

  7. 編集​を選択すると、コンポーネントが開きます。

  8. 必要に応じて、コンポーネントを編集します。

  9. OK」を選択すると、変更内容が保存されます。

ダイナミックメディアコンポーネント

ダイナミックメディアおよびインタラクティブメディアは、ダイナミックメディア のサイドキックで使用できます。インタラクティブメディア​コンポーネントは、すべてのインタラクティブアセット(インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど)に使用します。それ以外のすべてのダイナミックメディアコンポーネントでは、ダイナミックメディア​コンポーネントを使用します。

chlimage_1-71

メモ

これらのコンポーネントはデフォルトでは使用できません。使用する前にデザインモードに選択しておいてください。デザインモードで使用できるように設定しておくと、他の Experience Manager コンポーネントと同様に、これらのコンポーネントをページに追加できます。

ダイナミックメディアコンポーネント

ダイナミックメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかに応じて、様々なオプションを使用できます。このコンポーネントは、画像プリセット、画像ベースのビューア(画像セット、スピンセット、混在メディアセットなど)およびビデオをサポートしています。また、ビューアはレスポンシブです。 つまり、画面の大きさは、スクリーン上のサイズに応じて自動的に変化します。 ビューアはすべて HTML5 ベースのビューアです。

メモ

ダイナミックメディアコンポーネントを追加したときに、「ダイナミックメディア設定」が空であるかアセットを適切に追加できない場合は、次の点を確認してください。

  • Dynamic Media を有効にしていること。Dynamic Media はデフォルトで無効になっています。
  • 画像は Pyramid TIFF ファイルです。ダイナミックメディアを有効にする前に読み込まれた画像には、Pyramid TIFF ファイルはありません。

画像を操作する場合

ダイナミックメディアコンポーネントを使用すると、画像セット、スピンセット、混在メディアセットなどの動的イメージを追加できます。ズームイン、ズームアウト、スピンセット内での画像の回転(該当する場合)または別のタイプのセットからの画像の選択を行うことができます。

また、ビューアプリセット、画像プリセット、画像形式をコンポーネント内で直接設定することもできます。画像をレスポンシブにするために、ブレークポイントの設定かレスポンシブ画像プリセットの適用のいずれかを実行できます。

chlimage_1-72

コンポーネントで「設定」をクリックし、「ダイナミックメディア設定」タブをクリックすると、次のダイナミックメディア設定を編集することができます。

chlimage_1-73

メモ

デフォルトでは、ダイナミックメディアの画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「」と「高さ」のプロパティを使用してサイズを設定します。

ビューアプリセット - ドロップダウンメニューから既存のビューアプリセットを選択します。探しているビューアプリセットが表示されない場合は、表示できるように設定してください。詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。

このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合にしか使用できません。ビューアプリセットは、利便性を考慮して表示されます。つまり、関連するビューアプリセットのみが表示されます。

画像プリセット - ドロップダウンメニューから既存の画像プリセットを選択します。探している画像プリセットが表示されない場合は、表示できるように設定する必要があります。画像プリセットの管理を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。

このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

画像の修飾子 - 追加の画像コマンドを指定すると、画像エフェクトを変更できます。これらのコマンドについて詳しくは、画像プリセットの管理およびコマンドリファレンスを参照してください。

このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

ブレークポイント - レスポンシブサイトでこのアセットを使用する場合は、ページのブレークポイントを追加する必要があります。画像のブレークポイントはコンマ(,)で区切ります。このオプションを使用できるのは、画像プリセットで高さまたは幅が定義されていないときです。

このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

コンポーネントで「編集」をクリックして、次の詳細設定を編集できます。

タイトル - 画像のタイトルを変更します。

代替テキスト - グラフィックの表示をオフにしているユーザー向けのタイトルを画像に追加します。

このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

URL、次のウィンドウで開く - リンクを開くようにアセットを設定できます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

幅と高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。これらの値を空にすると、アダプティブなアセットになります。

ビデオを操作する場合

Web ページにダイナミックビデオを追加するには、Dynamic Media コンポーネントを使用します。このコンポーネントを編集する際は、ページ上でビデオを再生するために、事前定義済みのビデオビューアプリセットを使用することができます。

chlimage_1-74

コンポーネントで「編集」をクリックして、次の Dynamic Media 設定を編集できます。

メモ

デフォルトでは、Dynamic Media ビデオコンポーネントはアダプティブです。ビデオコンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「」と「高さ」を使用してサイズを設定します。

ビューアプリセット - ドロップダウンメニューから既存のビデオビューアプリセットを選択します。探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。

コンポーネントで「編集」をクリックして、次の詳細設定を編集できます。

タイトル - ビデオのタイトルを変更します。

幅と高さ - ビデオを固定サイズで表示する場合は、値をピクセル単位で入力します。これらの値を空にすると、アダプティブなビデオになります。

セキュアなビデオ配信

Experience Manager 6.2 で FP-13480 をインストールする場合、ビデオをセキュア SSL 接続(HTTPS)と非セキュア接続(HTTP)のどちらで配信するかを選択できます。デフォルトでは、ビデオ配信プロトコルは、埋め込み Web ページのプロトコルから自動的に継承されます。Web ページが HTTPS で読み込まれる場合、ビデオも HTTPS で配信されます。逆に言うと、web ページが HTTP で読み込まれる場合、ビデオも HTTP で配信されます。通常、このデフォルトの動作で問題ないので、特に設定を変更する必要はありません。ただし、このデフォルトの動作を上書きすることはできます。 VideoPlayer.ssl=on を、URL パスの末尾か、埋め込みコードスニペットにある他のビューア設定パラメーターのリストに追加します。どちらのアクションでもセキュアな動画配信を強制できます。

セキュアなビデオ配信、および URL パスの VideoPlayer.ssl 設定属性の使用について詳しくは、『ビューアリファレンスガイド』の「ビデオのセキュア配信」を参照してください。ビデオビューアのほか、混在メディアビューアおよびインタラクティブビデオビューアでも、セキュアなビデオ配信を使用できます。

インタラクティブメディアコンポーネント

インタラクティブメディアコンポーネントは、インタラクティビティ(ホットスポットまたは画像マップ)を含むアセット用です。インタラクティブ画像、インタラクティブビデオまたはカルーセルバナーがある場合は、インタラクティブメディア​コンポーネントを使用します。

インタラクティブメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかに応じて、さまざまなオプションを使用できます。また、ビューアはレスポンシブです。 つまり、画面の大きさは、スクリーン上のサイズに応じて自動的に変化します。 ビューアはすべて HTML5 ベースのビューアです。

chlimage_1-75

コンポーネントの「編集」をクリックして、次の​一般​設定を編集できます。

ビューアプリセット - ドロップダウンメニューから既存のビューアプリセットを選択します。探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。ビューアプリセットを使用するには、あらかじめ公開する必要があります。詳しくは、ビューアプリセットの管理を参照してください。

タイトル - ビデオのタイトルを変更します。

幅と高さ - ビデオを固定サイズで表示する場合は、値をピクセル単位で入力します。これらの値を空にすると、アダプティブな画像になります。

コンポーネントの「編集」をクリックして、次の​買い物かごに追加​設定を編集できます。

製品アセットを表示 - デフォルトでは、この値が選択されています。製品アセットには、コマースモジュールで定義された製品の画像が表示されます。製品アセットを表示しない場合はチェックマークをオフにします。

製品価格を表示 - デフォルトでは、この値が選択されています。製品価格には、コマースモジュールで定義されたアイテムの価格が表示されます。製品価格を表示しない場合はチェックマークをオフにします。

製品フォームを表示 - デフォルトでは、この値は選択されていません。製品フォームには、サイズや色など製品のバリエーションが含まれます。製品のバリエーションを表示しない場合はチェックマークをオフにします。

このページ