Web サイトで使用するアセットに Dynamic Media 機能を追加するには、Dynamic Media、インタラクティブメディア、パノラマメディア、ビデオ 360 メディアのいずれかのコンポーネントをページに直接追加します。レイアウトモードに入り、Dynamic Mediaコンポーネントを有効にします。 次に、これらのコンポーネントをページに追加し、コンポーネントにアセットを追加します。 Dynamic Media コンポーネントはスマートです。追加しようとしているアセットが画像、ビデオのどちらなのかが検出され、それに応じて利用可能なオプションが変わります。
Adobe Experience Manager を WCM として使用している場合は、Dynamic Media アセットを直接ページに追加します。WCMにサードパーティを使用している場合は、リンクまたは埋め込みを行います。 レスポンシブサードパーティWebサイトについては、レスポンシブサイトへの最適化された画像の配信を参照してください。
アセットをExperience Manager内のページに追加する前に、必ずアセットを発行してください。 Dynamic Media アセットの公開を参照してください。
3D メディア、Dynamic Media、インタラクティブメディア、パノラマメディア、スマート切り抜きビデオ、ビデオ 360 メディアのいずれかのコンポーネントを 1 つのページに追加することは、コンポーネントを任意のページに追加することと同じです。
ページへの Dynamic Media コンポーネントの追加
Dynamic Media コンポーネントを追加するページを Experience Manager で開きます。
左側のウィンドウで、「コンポーネント」アイコンをタップし、「ダイナミックメディア」でフィルタリングします。
Dynamic Mediaコンポーネントのリストが使用できない場合は、使用するDynamic Mediaコンポーネントを有効にする必要がある可能性があります。 詳しくは、Dynamic Media コンポーネントの有効化を参照してください。
Dynamic Media コンポーネントをドラッグし、ページ上の目的の場所でドロップします。
コンポーネント上に直接ポインターを置きます。 コンポーネントが青色のボックスで囲まれた時点で 1 回タップすると、コンポーネントのツールバーが表示されます。設定(レンチ) アイコンをタップします。
ページにドロップした Dynamic Media コンポーネントに対応する設定ダイアログボックスが開きます。必要に応じて、コンポーネントのオプションを設定します。
以下の例では、Dynamic Media ビデオ 360 メディアコンポーネントのダイアログボックスと、「ビューアプリセット」ドロップダウンリストで利用可能なオプションが表示されています。
Dynamic Media ビデオ 360 メディアコンポーネント。
完了したら、ダイアログボックスの右上隅にあるチェックマークをタップして、変更を保存します。
ページに追加できるDynamic Mediaコンポーネントがない場合は、使用するコンポーネントを有効にする必要がある可能性があります。
Dynamic Media コンポーネントを追加するページを Experience Manager で開きます。
ページ上部付近のツールバーの左側にあるページ情報アイコンをタップし、ドロップダウンリストから「テンプレートを編集」をタップします。
ページ上部付近のツールバーの右側で、ドロップダウンリストから「構造」をタップします。
ページ下部付近の「レイアウトコンテナ」をタップしてツールバーを開き、ポリシーアイコンをタップします。
レイアウトコンテナページの「プロパティ」見出しの下で、「許可されているコンポーネント」タブが選択されていることを確認します。
ダイナミックメディアが表示されるまでスクロールします。
Dynamic Mediaの左にある>アイコンをタップし、有効にするDynamic Mediaコンポーネントを選択します。
レイアウトコンテナページの右上隅近くにある「完了」(チェックマーク)アイコンをタップします。
ツールバーの右側、ページの上部付近にあるドロップダウンリストで、「初期コンテンツ」をタップします。
追加通常の ページに対するDynamic Mediaコンポーネント。
Dynamic Media コンポーネントのローカライズの方法は 2 つあります。
Sites の Web ページ内で、プロパティを開き、「詳細」タブを選択します。ローカライズに使用したい言語を選択します。
サイトセレクターからページあるいはページグループを選択します。「プロパティ」をタップし、「詳細」タブを選択します。ローカライズに使用したい言語を選択します。
言語メニューで使用できるすべての言語に、現在割り当てられているトークンがあるわけではありません。
「コンポーネント」アイコンをタップし、「Dynamic Media」でフィルタリングすると、Dynamic Media コンポーネントが利用可能になります。
利用可能な Dynamic Media コンポーネントは次のとおりです。
これらのコンポーネントはデフォルトでは使用できないので、を使用する前にテンプレートエディターを使用して使用できるようにする必要があります。 テンプレートエディターでコンポートを使用可能にした後は、他の Experience Manager コンポーネントの場合と同様にページに追加することができます。
Dynamic Media コンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかに応じて、様々なオプションを使用できます。このコンポーネントは画像プリセット、画像ベースのビューア(画像セット、スピンセット、混在メディアセットなど)およびビデオをサポートします。また、ビューアのレスポンシブ性が高く、画面のサイズに基づいて画面のサイズが自動的に変更されます。 すべてのビューアは HTML5 ビューアです。
Web ページに次のものが含まれている場合:
そのページの各Dynamic Mediaコンポーネントに異なるビューアプリセットを割り当てることはサポートされていません。
一方、ページ内で、同じタイプのアセットを使用するすべての Dynamic Media コンポーネントで同じビューアプリセットを使用することは可能です。
Dynamic Media コンポーネントを追加したときに、「ダイナミックメディア設定」が空であるかアセットを適切に追加できない場合は、次の点を確認してください。
Dynamic Media コンポーネントでは、画像セット、スピンセット、混在メディアセットなどの動的イメージを追加できます。ズームイン、ズームアウト、スピンセット内での画像の回転(該当する場合)または別のタイプのセットからの画像の選択をおこなうことができます。
また、ビューアプリセット、画像プリセットまたは画像形式をコンポーネント内で直接設定することもできます。画像をレスポンシブにするには、ブレークポイントを設定するか、レスポンシブ画像プリセットを適用します。
コンポーネント内の編集アイコンをタップし、次に「ダイナミックメディア設定」をタップすると、次の Dnamic Media 設定を編集することができます。
デフォルトでは、Dynamic Media 画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「幅」と「高さ」を使用してサイズを設定します。
ビューアプリセット — ドロップダウンリストから既存のビューアプリセットを選択します。目的のビューアプリセットが表示されていない場合は、プリセットを表示する必要があります。 詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合と逆の場合は、ビューアプリセットを選択できません。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合にのみ使用できます。 表示されるビューアプリセットは、スマートのみで関連するビューアプリセットとしても表示されます。
ビューア修飾子 - ビューア修飾子は、名前=値の組み合わせで & を区切り文字とした形式です。ビューア修飾子を使用すると、ビューアリファレンスガイドに概略が記されているとおり、ビューアを変更することができます。posterimage=img.jpg&caption=text.vtt,1
はビューア修飾子の一例で、これはビデオのサムネールに異なる画像を設定し、ビデオにクローズキャプションや字幕ファイルを関連付けます。
「画像プリセット」(Image preset) — ドロップダウンリストから既存の画像プリセットを選択します。目的の画像プリセットが表示されていない場合は、プリセットを表示する必要があります。 「画像プリセットの管理」を参照してください。画像プリセットを使用している場合と逆の場合は、ビューアプリセットを選択できません。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
「画像修飾子」(Image Modifiers) — 複数の画像コマンドを入力して、画像エフェクトを適用できます。これらのコマンドについては、画像プリセットおよび画像サービングコマンドリファレンスを参照してください。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
ブレークポイント — レスポンシブサイトでこのアセットを使用する場合は、画像のブレークポイントを追加する必要があります。画像のブレークポイントはコンマ(,)で区切る必要があります。 このオプションを使用できるのは、画像プリセットで高さまたは幅が定義されていないときです。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
コンポーネントの「編集」をタップして、次の詳細設定を編集できます。
タイトル - 画像のタイトルを変更します。
代替テキスト - グラフィックの表示をオフにしているユーザー向けのタイトルを画像に追加します。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
URL、次のウィンドウで開く - リンクを開くようにアセットを設定できます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
幅 - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
動的ビデオをWebページに追加するには、Dynamic Mediaコンポーネントを使用します。コンポーネントを編集する際に、定義済みのビデオビューアプリセットをページ上でのビデオ再生に使用するよう選択できます。
コンポーネントの「編集」をクリックして、次の Dynamic Media 設定を編集できます。
デフォルトでは、Dynamic Media ビデオコンポーネントはアダプティブです。ビデオコンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「幅」と「高さ」を使用してサイズを設定します。
ビューアプリセット — ドロップダウンリストから既存のビデオビューアプリセットを選択します。目的のビューアプリセットが表示されていない場合は、プリセットを表示する必要があります。 詳しくは、ビューアプリセットの管理を参照してください。
ビューア修飾子 — ビューア修飾子は name=value
ペアと &
区切り文字の形をとります。これらのツールを使用すると、Adobeビューアリファレンスガイドで概要を説明しているビューアを変更できます。 posterimage=img.jpg&caption=text.vtt,1
はビューア修飾子の一例です。
ビューア修飾子を使用して、例えば次の操作を行うことができます。
タイトル - ビデオのタイトルを変更します。
幅 - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
Dynamic Media コンポーネントを使用して、スマート切り抜き画像アセットを Web ページに追加します。コンポーネントを編集する際に、定義済みのビデオビューアプリセットをページ上でのビデオ再生に使用するよう選択できます。
詳しくは、Experience Manager Assets Dynamic Media でのスマート切り抜きの使用を参照してください。
イメージプロファイルも参照してください。
コンポーネントの「編集」をクリックして、次の Dynamic Media 設定を編集できます。
デフォルトでは、Dynamic Media 画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「幅」と「高さ」を使用してサイズを設定します。
「画像修飾子」(Image Modifiers) — 複数の画像コマンドを入力して、画像エフェクトを適用できます。これらのコマンドについては、画像プリセットおよび画像サービングコマンドリファレンスを参照してください。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
コンポーネントの「編集」をクリックして、次の詳細設定を編集できます。
縦横比の一致を有効にする — 元の画像の縦横比に最も合う縦横比のスマート切り抜きレンディションをDynamic Mediaに選択させるには、このオプションを選択します。
タイトル - スマート切り抜き画像のタイトルを変更します。
代替テキスト - グラフィックの表示をオフにしているユーザー向けのタイトルをスマート切り抜き画像に追加します。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
URL、次のウィンドウで開く - リンクを開くようにアセットを設定できます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
幅 - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
インタラクティブメディアコンポーネントは、インタラクティビティ(ホットスポットまたは画像マップ)を含むアセット用です。インタラクティブ画像、インタラクティブビデオまたはカルーセルバナーがある場合は、インタラクティブメディアコンポーネントを使用します。
インタラクティブメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかに応じて、様々なオプションを使用できます。また、ビューアのレスポンシブ性が高く、画面のサイズに基づいて画面のサイズが自動的に変更されます。 すべてのビューアは HTML5 ビューアです。
Web ページに次のものが含まれている場合:
ページ上の各インタラクティブメディアコンポーネントに異なるビューアプリセットを割り当てることはサポートされていません。
一方、ページ内で、同じタイプのアセットを使用するすべてのインタラクティブメディアコンポーネントで同じビューアプリセットを使用することは可能です。
コンポーネントの「編集」をタップして、次の一般設定を編集できます。
ビューアプリセット — ドロップダウンリストから既存のビューアプリセットを選択します。目的のビューアプリセットが表示されていない場合は、プリセットを表示する必要があります。 ビューアプリセットを使用するには、あらかじめ公開する必要があります。詳しくは、ビューアプリセットの管理を参照してください。
タイトル - ビデオのタイトルを変更します。
幅 - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
コンポーネントの「編集」をクリックして、次の買い物かごに追加設定を編集できます。
製品アセットを表示 - デフォルトでは、この値が選択されています。製品アセットには、コマースモジュールで定義された製品の画像が表示されます。製品アセットを表示しない場合はチェックマークをオフにします。
製品価格を表示 - デフォルトでは、この値が選択されています。製品価格には、コマースモジュールで定義されたアイテムの価格が表示されます。製品価格を表示しない場合はチェックマークをオフにします。
製品フォームを表示 - デフォルトでは、この値は選択されていません。製品フォームには、サイズや色など製品のバリエーションが含まれます。製品のバリエーションを表示しない場合はチェックマークをオフにします。
パノラマメディアコンポーネントは、球パノラマ画像のアセット用です。このような画像では、室内、物件、場所、風景などをあらゆる角度から見ることができます。画像が球パノラマとして適格となるには、以下の一方または両方の条件を満たしている必要があります。
equirectangular
または(spherical
+ panorama
)または(spherical
+ panoramic
)でタグ付けされている必要があります。タグの使用を参照してください。縦横比とキーワードの両方の条件が、アセットの詳細ページと「パノラマメディア」WCM コンポーネントのパノラマアセットに適用されます。
Web ページに次のものが含まれている場合:
そのページのパノラマメディアコンポーネントごとに異なるビューアプリセットを割り当てることはサポートされていません。
一方、ページ内で、同じタイプのアセットを使用するすべてのパノラマメディアコンポーネントで同じビューアプリセットを使用することは可能です。
コンポーネントの「設定」をタップして、次の設定を編集できます。
探しているビューアプリセットが表示されない場合は、そのビューアプリセットが公開されていることを確認してください。ビューアプリセットを公開してから使用してください。 詳しくは、ビューアプリセットの管理を参照してください。
ビデオ360メディアコンポーネントを使用して、Webページに等角形のビデオをレンダリングします。 これにより、部屋、プロパティ、場所、横置き、または医療の手順を没頭させた状態で視聴できます。
フラットディスプレイでの再生中は、ユーザが画角を制御します。携帯端末での再生は、通常、組み込みのジャイロコントロールを使用します。
ビューアでは、360 ビデオアセットの配信をネイティブサポートしています。デフォルトでは、表示または再生するための追加設定は不要です。360 ビデオは、.mp4、.mkv、.mov といった標準のビデオ拡張子を使用して配信されます。最も一般的なコーデックは H.264 です。
コンポーネントの「設定」をタップして、次の設定を編集できます。
探しているビューアプリセットが表示されない場合は、そのビューアプリセットが公開されていることを確認してください。ビューアプリセットを公開してから使用してください。 詳しくは、ビューアプリセットの管理を参照してください。
HTTP/2 は、ブラウザーとサーバーの交信を強化する、新しく更新された Web プロトコルです。このプロトコルを使用すれば、情報の伝送を高速化し、必要な処理能力を抑えることができます。HTTP/2 上で Dynamic Media アセットの配信が可能になり、応答時間と読み込み時間が短縮されました。
Dynamic Media アカウントでの HTTP/2 の使用方法について詳しくは、コンテンツの HTTP/2 配信を参照してください。