ページへの Dynamic Media アセットの追加 adding-dynamic-media-assets-to-pages

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

Web サイトで使用するアセットにダイナミックメディア機能を追加するには、ダイナミックメディア ​または​ インタラクティブメディア ​のコンポーネントをページに直接追加します。これを行うには、次のように入力します。 デザイン モードに切り替えて、dynamic media コンポーネントを有効にします。 次に、これらのコンポーネントをページに追加し、そのコンポーネントにアセットを追加できます。ダイナミックメディアおよびインタラクティブメディアコンポーネントはスマートです。追加する画像またはビデオの種類が判別され、それに応じて使用可能なオプションが変わります。

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

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

ページへの Dynamic Media コンポーネントの追加 adding-a-dynamic-media-component-to-a-page

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

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

  1. AEM で、Dynamic Media コンポーネントを追加するページを開きます。

  2. 使用できるDynamic Mediaコンポーネントがない場合は、 サイドキック 入る デザイン モード、クリック 編集 parsys と選択します。 Dynamic Media を使用して、Dynamic Mediaコンポーネントを使用可能にします。

    note note
    NOTE
    詳しくは、デザインモードでのコンポーネントの設定を参照してください。
  3. サイドキックの鉛筆アイコンをクリックして、編集 ​モードに戻ります。

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

  5. クリック 編集 をクリックして、コンポーネントを開きます。

  6. コンポーネントの編集 必要に応じて、をクリックします。 OK 変更を保存します。

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

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

chlimage_1-71

NOTE
これらのコンポーネントはデフォルトでは使用できないので、使用する前にデザインモードで選択する必要があります。 デザインモードで使用可能になった後を使用すると、他のAEMコンポーネントと同様に、コンポーネントをページに追加できます。

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

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

NOTE
ダイナミックメディアコンポーネントを追加したときに、「ダイナミックメディア設定」が空であるかアセットを適切に追加できない場合は、次の点を確認してください。
  • お持ちの 有効なDynamic Media. Dynamic Media はデフォルトでは無効になっています。
  • 画像が PTIFF(Pyramid TIFF)ファイルであること。Dynamic Media を有効にする前に読み込まれた画像には、PTIFF(Pyramid TIFF)ファイルはありません。

画像を操作する場合 when-working-with-images

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

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

chlimage_1-72

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

chlimage_1-73

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

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

これは、画像セット、スピンセットまたは混在メディアセットを表示している場合に使用できる唯一のオプションです。 表示されるビューアプリセットもスマートで、関連するビューアプリセットのみが表示されます。

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

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

画像の修飾子 — 追加の画像コマンドを指定することで、画像の効果を変更できます。 詳しくは、 画像プリセットの管理 そして コマンドリファレンス.

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

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

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

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

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

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

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

URL、で開く — からアセットを設定して、リンクを開くことができます。 「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

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

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

ビデオを操作する場合 when-working-with-video

以下を使用: Dynamic Media ダイナミックビデオを web ページに追加するコンポーネントです。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。

chlimage_1-74

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

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

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

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

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

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

セキュアなビデオの配信方法 how-to-delivery-secure-video

AEM 6.2 で、 FP-13480を使用すると、ビデオを安全な SSL 接続 (HTTPS) と安全でない接続 (HTTP) のどちらで配信するかを制御できます。 デフォルトでは、ビデオ配信プロトコルは、埋め込み Web ページのプロトコルから自動的に継承されます。 Web ページが HTTPS で読み込まれる場合、ビデオも HTTPS で配信されます。 逆に、Web ページが HTTP 上にある場合、ビデオは HTTP 経由で配信されます。 ほとんどの場合、このデフォルトの動作に問題はなく、設定を変更する必要はありません。 ただし、このデフォルトの動作は、 VideoPlayer.ssl=on を埋め込みコードスニペット内の URL パスの末尾または他のビューア設定パラメーターのリストに追加して、ビデオのセキュア配信を強制します。

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

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

インタラクティブメディアコンポーネントは、そのようなホットスポットや画像マップに対してインタラクティブ機能を持つアセット用です。 インタラクティブ画像、インタラクティブビデオ、カルーセルバナーがある場合は、 インタラクティブメディア コンポーネント。

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

chlimage_1-75

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

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

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

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

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

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

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

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

recommendation-more-help
5955305e-451f-43a0-8168-b6ad4159b4ca