ページへのDynamic Media Assets の追加 adding-dynamic-media-assets-to-pages
Web サイトで使用するアセットに Dynamic Media 機能を追加するには、 Dynamic Media または インタラクティブメディア コンポーネントを直接ページ上に配置できます。 これをおこなうには、レイアウトモードに入り、Dynamic Media コンポーネントを有効にします。 次に、これらのコンポーネントをページに追加し、そのコンポーネントにアセットを追加できます。ダイナミックメディアおよびインタラクティブメディアコンポーネントはスマートです。追加する画像またはビデオの種類が判別され、それに応じて使用可能なオプションが変わります。
AEMを WCM として使用している場合は、Dynamic Media アセットを直接ページに追加します。WCM にサードパーティのを使用している場合は、次のいずれかを実行します。 リンク または 埋め込み アセット。サードパーティのレスポンシブ Web サイトの場合は、 レスポンシブサイトへの最適化された画像の配信.
ページへの Dynamic Media コンポーネントの追加 adding-a-dynamic-media-component-to-a-page
Dynamic Mediaコンポーネントをページに追加する操作は、任意のページにコンポーネントを追加する操作と同じです。 Dynamic Mediaコンポーネントについて、以降の節で詳しく説明します。
-
AEM で、Dynamic Media コンポーネントを追加するページを開きます。
-
ページの左側にあるパネル（サイドパネルの表示を切り替える必要が生じる場合があります）で、 コンポーネント アイコン
-
コンポーネント 見出しの下のドロップダウンリストで「Dynamic Media 」を選択します。Dynamic Media コンポーネントのリストがない場合は、使用する Dynamic Media コンポーネントを有効にしなければならない可能性があります。詳しくは、Dynamic Media コンポーネントの有効化を参照してください。
-
使用するDynamic Mediaコンポーネントをページの目的の場所にドラッグします。
-
コンポーネントの上に直接マウスポインターを置きます。コンポーネントが青色のボックスで囲まれた時点で 1 回タップすると、コンポーネントのツールバーが表示されます。 設定（レンチ）アイコンをタップします。
-
コンポーネントの編集 必要に応じて、チェックマークをクリックして変更を保存します。
Dynamic Media コンポーネントの有効化 enabling-dynamic-media-components
ページに追加できる Dynamic Media コンポーネントがない場合は、使用するコンポーネントをまず有効にしなければならない可能性があります。
-
AEM で、Dynamic Media コンポーネントを追加するページを開きます。
-
ページ上部付近のツールバーの左側にあるページ情報アイコンをタップした後、ドロップダウンリストから「テンプレートを編集」をタップします。
-
ページ上部付近のツールバーの右側で、ドロップダウンリストから「構造」をタップします。
-
ページ下部付近の「レイアウトコンテナ」をタップしてツールバーを開き、ポリシーアイコンをタップします。
-
レイアウトコンテナ ページの「プロパティ」見出しの下で、「許可されたコンポーネント」タブが選択されていることを確認します。
-
ダイナミックメディア が表示されるまでスクロールします。
-
ダイナミックメディア の左側にある「>」アイコンをタップしてリストを展開し、有効にする Dynamic Media コンポーネントを選択します。
-
レイアウトコンテナ ページの右上隅付近にある「完了」（チェックマーク）アイコンをタップします。
-
ページ上部付近のツールバーの右側で、ドロップダウンリストから「初期コンテンツ」をタップした後、通常どおりにページに Dynamic Media コンポーネントを追加します。
Dynamic Mediaコンポーネントのローカライズ localizing-dynamic-media-components
Dynamic Media コンポーネントのローカライズの方法は 2 つあります。
-
Sites の Web ページ内で、プロパティ を開き、「詳細」タブを選択します。ローカライズに使用したい言語を選択します。
-
サイトセレクターからページあるいはページグループを選択します。「プロパティ」をタップし、「詳細」タブを選択します。ローカライズに使用したい言語を選択します。
note note NOTE 現在 言語 メニューに表示される言語すべてにトークンが割り当てられているわけではないことに注意してください。
Dynamic Mediaコンポーネント dynamic-media-components
Dynamic Mediaとインタラクティブメディアは、 Dynamic Media タブ コンポーネント. インタラクティブメディアコンポーネントは、すべてのインタラクティブアセット（インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど）に使用します。その他すべての Dynamic Media コンポーネントの場合は、 Dynamic Mediaコンポーネントを使用します。
ダイナミックメディアコンポーネント dynamic-media-component
ダイナミックメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかに応じて、様々なオプションを使用できます。このコンポーネントは、画像プリセット、画像ベースのビューア（画像セット、スピンセット、混在メディアセットなど）およびビデオをサポートしています。また、ビューアはレスポンシブです。つまり、画面のサイズは画面のサイズに基づいて自動的に変更されます。 すべてのビューアは HTML5 ビューアです。
- お持ちの 有効なDynamic Media. Dynamic Media はデフォルトでは無効になっています。
- 画像が PTIFF（Pyramid TIFF）ファイルであること。Dynamic Media を有効にする前に読み込まれた画像には、PTIFF（Pyramid TIFF）ファイルはありません。
画像を操作する場合 when-working-with-images
ダイナミックメディアコンポーネントを使用すると、画像セット、スピンセット、混在メディアセットなどの動的イメージを追加できます。ズームイン、ズームアウト、スピンセット内での画像の回転（該当する場合）または別のタイプのセットからの画像の選択を行うことができます。
また、ビューアプリセット、画像プリセット、画像形式をコンポーネント内で直接設定することもできます。画像をレスポンシブにするには、ブレークポイントを設定するか、レスポンシブな画像プリセットを適用します。
次のDynamic Media設定を編集するには、 編集 コンポーネント内のアイコンをクリックし、 Dynamic Media Settings.
-
ビューアプリセット
ドロップダウンメニューから既存のビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合はビューアプリセットを選択できません。また、その逆の場合も選択できません。
これは、画像セット、スピンセットまたは混在メディアセットを表示している場合に使用できる唯一のオプションです。 表示されるビューアプリセットもスマートで、関連するビューアプリセットのみが表示されます。 -
ビューア修飾子
ビューア修飾子は、name=value の組み合わせで&を区切り文字とした形式で使用し、ビューアリファレンスガイドで概要を説明しているようにビューアを変更できます。 ビューア修飾子の例としては、Posterimage=img.jpg&caption=text.vtt,1 があります。この修飾子は、ビデオのサムネールに異なる画像を設定し、ビデオにクローズドキャプション/サブタイトルファイルを関連付けます。 -
画像プリセット
ドロップダウンメニューから既存の画像プリセットを選択します。 探している画像プリセットが表示されない場合は、表示できるように設定する必要があります。「画像プリセットの管理」を参照してください。画像プリセットを使用している場合はビューアプリセットを選択できません。また、その逆の場合も選択できません。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。 -
画像の修飾子
追加の画像コマンドを指定して、画像エフェクトを適用できます。 これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。 -
ブレークポイント
レスポンシブサイトでこのアセットを使用する場合は、画像のブレークポイントを追加する必要があります。 画像のブレークポイントは、コンマ (,) で区切る必要があります。 このオプションを使用できるのは、画像プリセットで高さまたは幅が定義されていないときです。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。コンポーネントの「編集」をクリックして、次の詳細設定を編集できます。 -
タイトル
画像のタイトルを変更します。 -
代替テキスト
グラフィックの表示をオフにしているユーザー向けのタイトルを画像に追加します。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。 -
URL、で開く
リンクを開くようにアセットを設定できます。 「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。 -
幅 および 高さ
画像を固定サイズで表示する場合は、値をピクセル単位で入力します。 これらの値を空にすると、アダプティブなアセットになります。
ビデオを操作する場合 when-working-with-video
Dynamic Media コンポーネントを使用して、ダイナミックビデオを Web ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。
次のDynamic Media設定を編集するには、 編集 コンポーネント内にある
-
ビューアプリセット
ドロップダウンメニューから既存のビデオビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。 -
ビューア修飾子
ビューア修飾子は、name=value の組み合わせで&を区切り文字とした形式で使用し、『Adobeビューアリファレンスガイド』で概要を説明しているようにビューアを変更できます。 Posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例です。ビューア修飾子を使用すると、例えば次のことが可能です。
コンポーネントで「編集」をクリックして、次の詳細設定を編集できます。
-
タイトル
ビデオのタイトルを変更します。 -
幅 および 高さ
ビデオを固定サイズで表示する場合は、値をピクセル単位で入力します。 これらの値を空にすると、アダプティブなビデオになります。
スマート切り抜きを操作する場合 when-working-with-smart-crop
Dynamic Media コンポーネントを使用して、スマート切り抜き画像アセットを Web ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。
イメージプロファイルも参照してください。
コンポーネントで「編集」をクリックして、次の Dynamic Media 設定を編集できます。
- 画像の修飾子
追加の画像コマンドを指定して、画像エフェクトを適用できます。 これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
コンポーネントで「編集」をクリックして、次の 詳細 設定を編集できます。
-
タイトル
スマート切り抜き画像のタイトルを変更します。 -
代替テキスト
グラフィックの表示をオフにしているユーザー向けのタイトルをスマート切り抜き画像に追加します。
このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。 -
URL、で開く
リンクを開くようにアセットを設定できます。 「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。 -
高さ および 幅
スマート切り抜き画像を固定サイズで表示する場合は、値をピクセル単位で入力します。 これらの値を空にすると、アダプティブなビデオになります。
インタラクティブメディアコンポーネント interactive-media-component
インタラクティブメディアコンポーネントは、そのようなホットスポットや画像マップに対してインタラクティブ機能を持つアセット用です。 インタラクティブ画像、インタラクティブビデオ、カルーセルバナーがある場合は、インタラクティブメディアコンポーネントを使用します。
インタラクティブメディアコンポーネントはスマートです。追加している画像が画像であるかビデオであるかに応じて、様々なオプションを使用できます。 また、レスポンシブビューアなので、画面のサイズは画面サイズに応じて自動的に変更されます。 すべてのビューアは HTML5 ビューアです。
コンポーネントの「編集」をクリックして、次の 一般 設定を編集できます。
-
ビューアプリセット
ドロップダウンメニューから既存のビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。ビューアプリセットを使用するには、あらかじめ公開する必要があります。詳しくは、ビューアプリセットの管理を参照してください。 -
タイトル
ビデオのタイトルを変更します。 -
幅 および 高さ
ビデオを固定サイズで表示する場合は、値をピクセル単位で入力します。 これらの値を空にすると、アダプティブな画像になります。
コンポーネントの「編集」をクリックして、次の 買い物かごに追加 設定を編集できます。
-
製品アセットを表示
デフォルトでは、この値が選択されています。 製品アセットには、コマースモジュールで定義された製品の画像が表示されます。 製品アセットを表示しない場合は、チェックマークをオフにします。 -
製品価格を表示
デフォルトでは、この値が選択されています。 製品価格は、コマースモジュールで定義された品目の価格を示します。 製品価格を表示しない場合は、チェックマークをオフにします。 -
製品フォームを表示
デフォルトでは、この値は選択されていません。 製品フォームには、サイズや色など、製品のバリエーションが含まれます。 製品バリアントを表示しない場合は、チェックマークをオフにします。
パノラマメディアコンポーネント panoramic-media-component
パノラマメディアコンポーネントは、球状のパノラマ画像であるアセット用です。 このような画像を使用すると、360°の部屋、プロパティ、場所、または風景を表示できます。 画像を球パノラマとして認定するには、次のいずれかまたは両方が必要です。
- アスペクト比が 2:1 です。
- キーワード「equirectangular」、(「spherical」+「panorama」) または (「spherical」+「panoramic」) でタグ付けされている必要があります。 タグの使用を参照してください。
アスペクト比とキーワードの両方の条件が、アセットの詳細ページと「パノラマメディア」WCM コンポーネントのパノラマアセットに適用されます。
コンポーネントの「設定」をタップして、次の設定を編集できます。
- ビューアプリセット
「ビューアプリセット」ドロップダウンメニューから既存のビューアを選択します。
探しているビューアプリセットが表示されない場合は、そのビューアプリセットが公開されていることを確認してください。ビューアプリセットを使用するには、事前に公開する必要があります。 詳しくは、ビューアプリセットの管理を参照してください。
HTTP/2 を使用した Dynamic Media アセットの配信 using-http-to-delivery-dynamic-media-assets
HTTP/2 は、ブラウザーとサーバーの通信方法を改善する、新しく更新された web プロトコルです。情報の転送を高速化し、必要な処理能力を削減します。Dynamic Media アセットの配信は HTTP/2 を使用して行うことができ、応答時間と読み込み時間を短縮できます。
Dynamic Media アカウントでの HTTP/2 の使用方法について詳しくは、コンテンツの HTTP/2 配信を参照してください。