ページへのDynamic Media Assets の追加 adding-dynamic-media-assets-to-pages

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

Web サイトで使用するアセットに Dynamic Media 機能を追加するには、 Dynamic Media または インタラクティブメディア コンポーネントを直接ページ上に配置できます。 これをおこなうには、レイアウトモードに入り、Dynamic Media コンポーネントを有効にします。 次に、これらのコンポーネントをページに追加し、そのコンポーネントにアセットを追加できます。ダイナミックメディアおよびインタラクティブメディアコンポーネントはスマートです。追加する画像またはビデオの種類が判別され、それに応じて使用可能なオプションが変わります。

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

NOTE
アセットをAEMのページに追加する前に、アセットを公開する必要があります。 Dynamic Media アセットの公開を参照してください。

ページへの Dynamic Media コンポーネントの追加 adding-a-dynamic-media-component-to-a-page

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

NOTE
読み取り専用権限を持つユーザーがアクセスする Web ページ上にDynamic Mediaコンポーネントがある場合、ページが壊れ、コンポーネントが正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照元のアセットと設定にアクセスできるようにページが再構築されるからです。 その後、ページが再度レンダリングされ、コンポーネントが壊れます。ユーザーの読み取り専用アクセス権により、ページ上の各コンポーネントコードを再レンダリングできません。
この問題を回避するには、AEM Sitesのユーザーがアセットへのアクセスに必要な権限を持っていることを確認します。
  1. AEM で、Dynamic Media コンポーネントを追加するページを開きます。

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

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

    chlimage_1-537

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

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

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

Dynamic Media コンポーネントの有効化 enabling-dynamic-media-components

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

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

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

    edit-template

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

    ポリシー

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

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

    許可されたコンポーネント

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

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

    Dynamic Media コンポーネントリスト

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

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

Dynamic Mediaコンポーネントのローカライズ localizing-dynamic-media-components

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

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

    chlimage_1-538

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

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

Dynamic Mediaコンポーネント dynamic-media-components

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

NOTE
これらのコンポーネントはデフォルトでは使用できないので、使用する前にテンプレートエディターで使用可能にする必要があります。 テンプレートエディターでコンポートを使用可能にした後は、他の AEM コンポーネントと同様にページに追加することができます。

chlimage_1-539

ダイナミックメディアコンポーネント dynamic-media-component

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

NOTE
読み取り専用権限を持つユーザーがアクセスする Web ページ上にDynamic Mediaコンポーネント、インタラクティブメディアコンポーネント、またはその両方が存在する場合、ページは壊れ、コンポーネントは正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照元のアセットと設定にアクセスできるようにページが再構築されるからです。 その後、ページが再度レンダリングされ、コンポーネントが壊れます。ユーザーの読み取り専用アクセス権により、ページ上の各コンポーネントコードを再レンダリングできません。
この問題を回避するには、AEM Sitesのユーザーがアセットへのアクセスに必要な権限を持っていることを確認します。
NOTE
Dynamic Media コンポーネントを追加したときに、「ダイナミックメディア設定」が空であるかアセットを適切に追加できない場合は、次の点を確認してください。
  • お持ちの 有効なDynamic Media. Dynamic Media はデフォルトでは無効になっています。
  • 画像が PTIFF(Pyramid TIFF)ファイルであること。Dynamic Media を有効にする前に読み込まれた画像には、PTIFF(Pyramid TIFF)ファイルはありません。

画像を操作する場合 when-working-with-images

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

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

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

dm-settings-image-preset

NOTE
デフォルトでは、ダイナミックメディアの画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、 詳細 タブの および 高さ 設定。
  • ビューアプリセット
    ドロップダウンメニューから既存のビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合はビューアプリセットを選択できません。また、その逆の場合も選択できません。
    これは、画像セット、スピンセットまたは混在メディアセットを表示している場合に使用できる唯一のオプションです。 表示されるビューアプリセットもスマートで、関連するビューアプリセットのみが表示されます。

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

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

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

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

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

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

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

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

ビデオを操作する場合 when-working-with-video

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

chlimage_1-540

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

NOTE
デフォルトでは、Dynamic Media ビデオコンポーネントはアダプティブです。ビデオコンポーネントを固定サイズにする場合は、そのコンポーネントで、詳細 ​タブの​ ​と高さを使用してサイズを設定してください。
  • ビューアプリセット
    ドロップダウンメニューから既存のビデオビューアプリセットを選択します。 探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。

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

    ビューア修飾子を使用すると、例えば次のことが可能です。

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

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

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

スマート切り抜きを操作する場合 when-working-with-smart-crop

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

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

dm-settings-smart-crop

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

NOTE
デフォルトでは、ダイナミックメディアの画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「」と「高さ」を使用してサイズを設定します。
  • 画像の修飾子
    追加の画像コマンドを指定して、画像エフェクトを適用できます。 これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

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

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

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

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

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

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

インタラクティブメディアコンポーネントは、そのようなホットスポットや画像マップに対してインタラクティブ機能を持つアセット用です。 インタラクティブ画像、インタラクティブビデオ、カルーセルバナーがある場合は、インタラクティブメディアコンポーネントを使用します。

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

NOTE
読み取り専用権限を持つユーザーがアクセスする Web ページ上にDynamic Mediaコンポーネント、インタラクティブメディアコンポーネント、またはその両方が存在する場合、ページは壊れ、コンポーネントは正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照元のアセットと設定にアクセスできるようにページが再構築されるからです。 その後、ページが再度レンダリングされ、コンポーネントが壊れます。ユーザーの読み取り専用アクセス権により、ページ上の各コンポーネントコードを再レンダリングできません。
この問題を回避するには、AEM Sitesのユーザーがアセットへのアクセスに必要な権限を持っていることを確認します。

chlimage_1-541

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

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

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

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

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

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

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

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

パノラマメディアコンポーネント panoramic-media-component

パノラマメディアコンポーネントは、球状のパノラマ画像であるアセット用です。 このような画像を使用すると、360°の部屋、プロパティ、場所、または風景を表示できます。 画像を球パノラマとして認定するには、次のいずれかまたは両方が必要です。

  • アスペクト比が 2:1 です。
  • キーワード「equirectangular」、(「spherical」+「panorama」) または (「spherical」+「panoramic」) でタグ付けされている必要があります。 タグの使用を参照してください。

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

panoramic-media-viewer-preset

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

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

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

HTTP/2 を使用した Dynamic Media アセットの配信 using-http-to-delivery-dynamic-media-assets

HTTP/2 は、ブラウザーとサーバーの通信方法を改善する、新しく更新された web プロトコルです。情報の転送を高速化し、必要な処理能力を削減します。Dynamic Media アセットの配信は HTTP/2 を使用して行うことができ、応答時間と読み込み時間を短縮できます。

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

recommendation-more-help
4452738f-2bdf-4cd4-9b45-905a69d607ad