Show Menu
トピック×

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

To add the dynamic media functionality to assets you use on your websites, you can add the Dynamic Media or Interactive Media component directly on the page. そのためには、レイアウトモードに切り替えて、ダイナミックメディアコンポーネントを有効にします。次に、これらのコンポーネントをページに追加し、そのコンポーネントにアセットを追加できます。ダイナミックメディアコンポーネントおよびインタラクティブメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかを自動的に把握します。それに従って、使用可能なオプションが変わります。
You add dynamic media assets directly to the page if you are using AEM as your WCM. If you are using a third-party for your WCM, either link or embed your assets. For a responsive third-party web site, see delivering optimized images to a responsive site .
AEM のページに追加する前にアセットを公開する必要があります。 Dynamic Media アセットの公開 を参照してください。

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

ダイナミックメディアコンポーネントをページに追加するのは、コンポーネントをページに追加するのと同じです。 ダイナミックメディアコンポーネントについては、以下の節で詳しく説明します。
読み取り専用権限を持つユーザーがWebページにアクセスするダイナミックメディアコンポーネントがある場合、ページが壊れ、コンポーネントが正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照されているアセットや設定にアクセスできることを確認するためにページが再構築されるためです。 次に、ページが再びレンダリングされ、コンポーネントが壊れます。 ユーザーの読み取り専用アクセス権が原因で、ページ上の各コンポーネントコードを再レンダリングできません。
この問題を回避するには、AEMサイトのユーザーに、アセットにアクセスするために必要な権限があることを確認してください。
  1. AEM で、Dynamic Media コンポーネントを追加するページを開きます。
  2. ページの左側にあるパネル(サイドパネルの表示を切り替える必要がある場合があります)で、 コンポーネント アイコンをクリックします。
  3. コンポーネント 」見出しのドロップダウンリストで、「 ダイナミックメディア 」を選択します。 使用可能なダイナミックメディアコンポーネントのリストがない場合は、使用するダイナミックメディアコンポーネントを有効にする必要がある可能性があります。 See Enabling Dynamic Media components .
  4. 使用するダイナミックメディアコンポーネントをページの目的の位置にドラッグします。
  5. コンポーネントの上に直接マウスポインターを置きます。コンポーネントが青色のボックスで囲まれた時点で 1 回タップすると、コンポーネントのツールバーが表示されます。 ​設定(レンチ) アイコンをタップします。
  6. 必要に応じてコンポーネントを編集し 、チェックマークをクリックして変更を保存します。

Enabling Dynamic Media components

ページに追加できるダイナミックメディアコンポーネントがない場合は、まず使用するコンポーネントを有効にする必要がある可能性があります。
  1. AEM で、Dynamic Media コンポーネントを追加するページを開きます。
  2. ツールバーの左側で、ページ上部近くにあります。ページ情報アイコンをタップし、ドロップダウンリストから「テンプレート の編集 」をタップします。
  3. ツールバーの右側で、ページの上部に近いドロップダウンリストから「 構造 」をタップします。
  4. ページ下部近くにある「 レイアウトコンテナ 」をタップしてツールバーを開き、ポリシーアイコンをタップします。
  5. レイ アウトコンテナ ページの「 プロパティ 」見出しの下で、「 許可されているコンポーネント 」タブが選択されていることを確認します。
  6. ダイナミックメディアが表示されるまでスクロ ールし ​ます。
  7. ダイナミックメディア の左にある>アイコンをタップして リストを展開し、有効にするダイナミックメディアコンポーネントを選択します。
  8. レイ アウトコンテナ ページの右上隅近くにある「完了」(チェックマーク)アイコンをタップします。
  9. ツールバーの右側のページの上部付近にあるドロップダウンリストで、「 初期コンテンツ 」をタップし、通常どおりにページにダイナミックメディアコンポーネントを 追加します

Localizing Dynamic Media components

Dynamic Media コンポーネントのローカライズの方法は 2 つあります。
  • Sites の Web ページ内で、 プロパティ ​を開き、「 詳細 」タブを選択します。ローカライズに使用したい言語を選択します。
  • サイトセレクターからページあるいはページグループを選択します。「 プロパティ 」をタップし、「 詳細 」タブを選択します。ローカライズに使用したい言語を選択します。
    現在​ 言語 ​メニューに表示される言語すべてにトークンが割り当てられているわけではないことに注意してください。

Dynamic Media components

Dynamic Media and Interactive Media are available under the Dynamic Media tab in Components. インタラクティブビデオ、インタラクティブ画像、カルーセルセットなどのインタラクティブアセットには、Interactive Media]コンポーネントを使用します。 その他すべてのダイナミックメディアコンポーネントでは、ダイナミックメディアコンポーネントを使用します。
これらのコンポーネントはデフォルトでは使用できないので、使用前にテンプレートエディターで使用可能にする必要があります。 テンプレートエディタ ーで使用可能になったコンポーネントは、他のAEMコンポーネントと同様にページに追加できます。

Dynamic Media コンポーネント

ダイナミックメディアコンポーネントはスマートです。画像を追加するかビデオを追加するかに応じて、様々なオプションがあります。 このコンポーネントは画像プリセット、画像ベースのビューア(画像セット、スピンセット、混在メディアセットなど)およびビデオをサポートします。また、ビューアはレスポンシブです。 つまり、画面のサイズは、画面のサイズに基づいて自動的に変更されます。 すべてのビューアは HTML5 ビューアです。
読み取り専用権限を持つユーザーがWebページにアクセスするダイナミックメディアコンポーネント、インタラクティブメディアコンポーネント、またはその両方がある場合、ページの切れ目とコンポーネントは正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照されているアセットや設定にアクセスできることを確認するためにページが再構築されるためです。 次に、ページが再びレンダリングされ、コンポーネントが壊れます。 ユーザーの読み取り専用アクセス権が原因で、ページ上の各コンポーネントコードを再レンダリングできません。
この問題を回避するには、AEMサイトのユーザーに、アセットにアクセスするために必要な権限があることを確認してください。
Dynamic Media コンポーネントを追加したときに、「 Dynamic Media 設定 」が空であるかアセットを適切に追加できない場合は、次の点を確認してください。
  • Dynamic Media を有効にしている こと。Dynamic Media はデフォルトで無効になっています。
  • 画像が PTIFF(Pyramid TIFF)ファイルであること。Dynamic Media を有効にする前に読み込まれた画像には、pyramid tiff ファイルはありません。

画像を操作する場合

Dynamic Media コンポーネントでは、画像セット、スピンセット、混在メディアセットなどの動的イメージを追加できます。ズームイン、ズームアウト、スピンセット内での画像の回転(該当する場合)または別のタイプのセットからの画像の選択をおこなうことができます。
また、ビューアプリセット、画像プリセットまたは画像形式をコンポーネント内で直接設定することもできます。画像をレスポンシブにするために、ブレークポイントの設定かレスポンシブ画像プリセットの適用のいずれかを実行できます。
You must edit the following Dynamic Media Settings by clicking the Edit icon in the component and then Dynamic Media Settings .
デフォルトでは、Dynamic Media 画像コンポーネントはアダプティブです。If you want to make it a fixed size, set it in the component in the Advanced tab with the Width and Height settings.
  • ビューアプリセット ​ドロップダウンメニューから既存のビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。これは、画像セット、スピンセットまたは混在メディアセットを表示している場合に唯一使用できるオプションです。表示されるビューアプリセットもスマートであり、関連するビューアプリセットのみが表示されます。
  • ビューア修飾子 ​ビューア修飾子は、name=valueの形式で&区切り文字を付けたもので、ビューアを変更できます。詳しくは、ビューアリファレンスガイドを参照してください。 ビューアの修飾子の例としては、posterimage=img.jpg&caption=text.vtt,1があります。この場合、ビデオサムネールに別の画像が設定され、クローズドキャプション/サブタイトルファイルがビデオに関連付けられます。
  • 画像プリセット ​ドロップダウンメニューから既存の画像プリセットを選択します。 探している画像プリセットが表示されない場合は、表示できるように設定する必要があります。「画像プリセットの管理」を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • 画像修飾子 :追加の画像コマンドを入力して、画像効果を適用できます。 これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • ブレークポイント ​レスポンシブサイトでこのアセットを使用する場合は、画像のブレークポイントを追加する必要があります。 画像のブレークポイントをコンマ(,)で区切って指定する必要があります。このオプションを使用できるのは、画像プリセットで高さまたは幅が定義されていないときです。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。コンポーネントの「 編集 」をクリックして、次の詳細設定を編集できます。
  • タイトル ​画像のタイトルを変更します。
  • Altグラフィックをオフにしてい追加るユーザーに対して、画像のタイトルをテキストで表示します。 このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • URL、開く場所 ​アセットを設定して、リンクを開くことができます。 「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • ** #**と[ 高さ ]画像を固定サイズにする場合は、値をピクセル単位で入力します。 これらの値を空にすると、アダプティブなアセットになります。

ビデオを操作する場合

Dynamic Media コンポーネントを使用して、ダイナミックビデオを Web ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。
You must edit the following Dynamic Media Settings by clicking Edit in the component.
デフォルトでは、Dynamic Media ビデオコンポーネントはアダプティブです。ビデオコンポーネントを固定サイズにする場合は、そのコンポーネントで、「 詳細 」タブの「 」と「高さ」を使用してサイズを設定します。
  • ビューアプリセット ​ドロップダウンメニューから既存のビデオビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。
  • ビューアの修飾子 ​ビューアの修飾子は、name=valueの形式で&区切り文字を付けたペアで、Adobe Viewers Reference Guideで概要を説明しているようにビューアを変更できます。 Posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例です。
    例えば、ビューア修飾子を使用して、次の操作を行うことができます。
You can edit the following Advanced Settings by clicking Edit in the component.
  • タイトル ​ビデオのタイトルを変更します。
  • 高さ ​ビデオを固定サイズにする場合は、値をピクセル単位で入力します。 これらの値を空にすると、アダプティブな画像になります。

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

Dynamic Media コンポーネントを使用して、スマート切り抜き画像アセットを Web ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。
イメージプロファイル も参照してください。
You can edit the following Dynamic Media Settings by clicking Edit in the component.
デフォルトでは、Dynamic Media 画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「 」と「 高さ 」を使用してサイズを設定します。
  • 画像修飾子 :追加の画像コマンドを入力して、画像効果を適用できます。 これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
You can edit the following Advanced settings by clicking Edit in the component.
  • タイトル ​スマート切り抜き画像のタイトルを変更します。
  • Altグラフィックをオフにしてい追加るユーザーに対して、スマート切り抜き画像のタイトルをテキストで表示します。 このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • URL、開く場所 ​アセットを設定して、リンクを開くことができます。 「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • [!UICONTROL高さ ]スマート切り抜き画像を固定サイズにする場合は、ピクセル単位で値を入力します。 これらの値を空にすると、アダプティブな画像になります。

Interactive Media component

インタラクティブメディアコンポーネントは、インタラクティビティ(ホットスポットまたは画像マップ)を含むアセット用です。インタラクティブ画像、インタラクティブビデオまたはカルーセルバナーがある場合は、インタラクティブメディアコンポーネントを使用します。
インタラクティブメディアコンポーネントはスマートです。画像を追加するかビデオを追加するかに応じて、様々なオプションを使用できます。 さらに、レスポンシブビューアであるので、ビューアのサイズは画面サイズに合わせて自動的に変化します。すべてのビューアは HTML5 ビューアです。
読み取り専用権限を持つユーザーがWebページにアクセスするダイナミックメディアコンポーネント、インタラクティブメディアコンポーネント、またはその両方がある場合、ページの切れ目とコンポーネントは正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照されているアセットや設定にアクセスできることを確認するためにページが再構築されるためです。 次に、ページが再びレンダリングされ、コンポーネントが壊れます。 ユーザーの読み取り専用アクセス権が原因で、ページ上の各コンポーネントコードを再レンダリングできません。
この問題を回避するには、AEMサイトのユーザーに、アセットにアクセスするために必要な権限があることを確認してください。
コンポーネントの「 編集 」をクリックして、次の​ 一般 ​設定を編集できます。
  • ビューアプリセット ​ドロップダウンメニューから既存のビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。ビューアプリセットを使用するには、あらかじめ公開する必要があります。詳しくは、ビューアプリセットの管理を参照してください。
  • タイトル ​ビデオのタイトルを変更します。
  • 高さ ​ビデオを固定サイズにする場合は、値をピクセル単位で入力します。 これらの値を空にすると、アダプティブな画像になります。
コンポーネントの「 編集 」をクリックして、次の​ 買い物かごに追加 ​設定を編集できます。
  • Show Product Asset ​デフォルトでは、この値が選択されています。 製品アセットには、コマースモジュールで定義された製品の画像が表示されます。製品アセットを表示しない場合はチェックマークをオフにします。
  • 製品価格 ​を表示デフォルトでは、この値が選択されています。 製品価格には、コマースモジュールで定義されたアイテムの価格が表示されます。製品価格を表示しない場合はチェックマークをオフにします。
  • 製品フォームを表示 ​デフォルトでは、この値は選択されていません。 製品フォームには、サイズや色など製品のバリエーションが含まれます。製品のバリエーションを表示しない場合はチェックマークをオフにします。

Panoramic Media component

パノラマメディアコンポーネントは、球パノラマ画像のアセット用です。このような画像では、室内、物件、場所、風景などをあらゆる角度から見ることができます。画像が球パノラマとして適格となるには、以下の一方または両方の条件を満たしている必要があります。
  • 縦横比が 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 配信 を参照してください。