ページへのDynamic Media Assets の追加

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

AEMを WCM として使用している場合は、Dynamic Media アセットを直接ページに追加します。WCM にサードパーティのを使用している場合は、次のいずれかを実行します。 リンク または 埋め込み アセット。サードパーティのレスポンシブ Web サイトの場合は、 レスポンシブサイトへの最適化された画像の配信.

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

Dynamic Mediaコンポーネントをページに追加する操作は、任意のページにコンポーネントを追加する操作と同じです。 Dynamic Mediaコンポーネントについて、以降の節で詳しく説明します。

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

2. ページの左側にあるパネル（サイドパネルの表示を切り替える必要が生じる場合があります）で、 コンポーネント アイコン

3. 以下 コンポーネント 見出し、ドロップダウンリストで「 」を選択します。 Dynamic Media. Dynamic Media コンポーネントのリストがない場合は、使用する Dynamic Media コンポーネントを有効にしなければならない可能性があります。詳しくは、Dynamic Media コンポーネントの有効化を参照してください。

   

4. 使用するDynamic Mediaコンポーネントをページの目的の場所にドラッグします。

5. コンポーネントの上に直接マウスポインターを置きます。コンポーネントが青色のボックスで囲まれた時点で 1 回タップすると、コンポーネントのツールバーが表示されます。​​設定（レンチ）アイコンをタップします。

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

Dynamic Media コンポーネントの有効化

ページに追加できる Dynamic Media コンポーネントがない場合は、使用するコンポーネントをまず有効にしなければならない可能性があります。

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

2. ページ上部付近のツールバーの左側にあるページ情報アイコンをタップした後、ドロップダウンリストから「テンプレートを編集」をタップします。

   

3. ページ上部付近のツールバーの右側で、ドロップダウンリストから「構造」をタップします。

   

4. ページ下部付近の「レイアウトコンテナ」をタップしてツールバーを開き、ポリシーアイコンをタップします。

5. レイアウトコンテナ​ページの「プロパティ」見出しの下で、「許可されたコンポーネント」タブが選択されていることを確認します。

   

6. ダイナミックメディア​が表示されるまでスクロールします。

7. ダイナミックメディア​の左側にある「>」アイコンをタップしてリストを展開し、有効にする Dynamic Media コンポーネントを選択します。

   

8. レイアウトコンテナ​ページの右上隅付近にある「完了」（チェックマーク）アイコンをタップします。

9. ページ上部付近のツールバーの右側で、ドロップダウンリストから「初期コンテンツ」をタップした後、通常どおりにページに Dynamic Media コンポーネントを追加します。

Dynamic Mediaコンポーネントのローカライズ

Dynamic Media コンポーネントのローカライズの方法は 2 つあります。

• Sites の Web ページ内で、プロパティ​を開き、「詳細」タブを選択します。ローカライズに使用したい言語を選択します。

  

• サイトセレクターからページあるいはページグループを選択します。「プロパティ」をタップし、「詳細」タブを選択します。ローカライズに使用したい言語を選択します。

  メモ

  現在​言語​メニューに表示される言語すべてにトークンが割り当てられているわけではないことに注意してください。

Dynamic Mediaコンポーネント

Dynamic Mediaとインタラクティブメディアは、 Dynamic Media タブ コンポーネント. インタラクティブメディアコンポーネントは、すべてのインタラクティブアセット（インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど）に使用します。その他すべてのダイナミックメディアコンポーネントでは、ダイナミックメディアコンポーネントを使用します。

Dynamic Media コンポーネント

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

画像を操作する場合

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

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

次のDynamic Media設定を編集するには、 編集 コンポーネント内のアイコンをクリックし、 Dynamic Media Settings.

• ビューアプリセット
  ドロップダウンメニューから既存のビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。これは、画像セット、スピンセットまたは混在メディアセットを表示している場合に唯一使用できるオプションです。表示されるビューアプリセットもスマートであり、関連するビューアプリセットのみが表示されます。

• ビューア修飾子
  ビューア修飾子は、name=value の組み合わせで&を区切り文字とした形式で使用し、ビューアリファレンスガイドで概要を説明しているようにビューアを変更できます。 ビューア修飾子の例としては、Posterimage=img.jpg&caption=text.vtt,1 があります。この修飾子は、ビデオのサムネールに異なる画像を設定し、ビデオにクローズドキャプション/サブタイトルファイルを関連付けます。

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

• 画像の修飾子
  追加の画像コマンドを指定して、画像エフェクトを適用できます。 これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

• ブレークポイント
  レスポンシブサイトでこのアセットを使用する場合は、画像のブレークポイントを追加する必要があります。 画像のブレークポイントをコンマ（,）で区切って指定する必要があります。このオプションを使用できるのは、画像プリセットで高さまたは幅が定義されていないときです。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。コンポーネントの「編集」をクリックして、次の詳細設定を編集できます。

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

• 代替テキスト
  グラフィックの表示をオフにしているユーザー向けのタイトルを画像に追加します。
  このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

• URL、で開く
  リンクを開くようにアセットを設定できます。 「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

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

ビデオを操作する場合

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

次のDynamic Media設定を編集するには、 編集 コンポーネント内にある

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

• ビューア修飾子
  ビューア修飾子は、name=value の組み合わせで&を区切り文字とした形式で使用し、『Adobeビューアリファレンスガイド』で概要を説明しているようにビューアを変更できます。 Posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例です。

  ビューア修飾子を使用して、例えば次の操作を実行できます。

  • ビデオにキャプションファイルを関連付ける キャプション。
  • ナビゲーションファイルとビデオの関連付け ナビゲーション。

次の項目を編集できます 詳細設定 クリックして 編集 コンポーネント内にある

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

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

スマート切り抜きを操作する場合

Dynamic Media コンポーネントを使用して、スマート切り抜き画像アセットを Web ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。

イメージプロファイルも参照してください。

次の項目を編集できます Dynamic Media Settings クリックして 編集 コンポーネント内にある

• 画像の修飾子
  追加の画像コマンドを指定して、画像エフェクトを適用できます。 これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

次の項目を編集できます 詳細 クリックによる設定 編集 コンポーネント内にある

• タイトル
  スマート切り抜き画像のタイトルを変更します。

• 代替テキスト
  グラフィックの表示をオフにしているユーザー向けのタイトルをスマート切り抜き画像に追加します。
  このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

• URL、で開く
  リンクを開くようにアセットを設定できます。 「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

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

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

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

インタラクティブメディアコンポーネントはスマートです。追加している画像が画像であるかビデオであるかに応じて、様々なオプションを使用できます。 さらに、レスポンシブビューアであるので、ビューアのサイズは画面サイズに合わせて自動的に変化します。すべてのビューアは HTML5 ビューアです。

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

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

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

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

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

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

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

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

パノラマメディアコンポーネント

パノラマメディアコンポーネントは、球パノラマ画像のアセット用です。このような画像では、室内、物件、場所、風景などをあらゆる角度から見ることができます。画像が球パノラマとして適格となるには、以下の一方または両方の条件を満たしている必要があります。

• 縦横比が 2:1 である必要があります。
• キーワード「equirectangular」または（「spherical」+「panorama」）または（「spherical」+「panoramic」）でタグ付けされている必要があります。タグの使用を参照してください。

縦横比とキーワードの両方の条件が、アセットの詳細ページと「パノラマメディア」WCM コンポーネントのパノラマアセットに適用されます。

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

• ビューアプリセット
  「ビューアプリセット」ドロップダウンメニューから既存のビューアを選択します。

探しているビューアプリセットが表示されない場合は、そのビューアプリセットが公開されていることを確認してください。ビューアプリセットを使用するには、公開する必要があります。詳しくは、ビューアプリセットの管理を参照してください。

HTTP/2 を使用した Dynamic Media アセットの配信

HTTP/2 は、ブラウザーとサーバーの交信を強化する、新しく更新された Web プロトコルです。このプロトコルを使用すれば、情報の伝送を高速化し、必要な処理能力を抑えることができます。HTTP/2 上で Dynamic Media アセットの配信が可能になり、応答時間と読み込み時間が短縮されました。

Dynamic Media アカウントでの HTTP/2 の使用方法について詳しくは、コンテンツの HTTP/2 配信を参照してください。