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

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

AEMをWCMとして使用している場合は、ダイナミックメディアアセットを直接ページに追加します。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設定​をクリックします。

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

• ビューアの
  修飾子ビューアの修飾子は、name=valueの形式で&区切り文字を付けたもので、ビューアを変更できます。詳しくは、ビューアリファレンスガイドを参照してください。ビューアの修飾子の例としては、posterimage=img.jpg&caption=text.vtt,1があります。この場合、ビデオサムネールに別の画像が設定され、クローズドキャプション/サブタイトルファイルがビデオに関連付けられます。

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

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

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

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

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

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

• 画像を固定サイズにする場合は、 Width ​
  HeightEnter値（ピクセル単位）を指定します。これらの値を空にすると、アダプティブなアセットになります。

ビデオを操作する場合

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

コンポーネント内の​編集​をクリックして、次のDynamic Media設定を編集する必要があります。

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

• ビューアの
  修飾子ビューアの修飾子は、name=valueのペア（&区切り文字）の形式で表示され、Adobeビューアリファレンスガイドで概要を説明しているようにビューアを変更できます。Posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例です。

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

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

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

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

• ビデオを固定サイズにする場合は、 Width ​
  HeightEnter値（ピクセル単位）を指定します。これらの値を空にすると、アダプティブな画像になります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ビデオを固定サイズにする場合は、 Width ​
  HeightEnter値（ピクセル単位）を指定します。これらの値を空にすると、アダプティブな画像になります。

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

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

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

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

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

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

• 縦横比が 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 配信を参照してください。