ページへの 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 Sitesのユーザーに、アセットへのアクセスに必要な権限があることを確認してください。

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

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

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

    chlimage_1-537

  4. 使用するダイナミックメディアコンポーネントをページの目的の位置にドラッグします。

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

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

Dynamic Media コンポーネントの有効化

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

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

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

    edit-template

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

    ポリシー

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

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

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

  6. Dynamic Media が表示されるまでスクロールします。

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

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

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

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

Localizing Dynamic Media components

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

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

    chlimage_1-538

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

    メモ

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

Dynamic Media components

Dynamic Media and Interactive Media are available under the Dynamic Media tab in Components. インタラクティブメディアコンポーネントは、すべてのインタラクティブアセット(インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど)に使用します。その他すべてのダイナミックメディアコンポーネントでは、ダイナミックメディアコンポーネントを使用します。

メモ

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

chlimage_1-539

Dynamic Media コンポーネント

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

メモ

読み取り専用権限を持つユーザーがWebページにアクセスするダイナミックメディアコンポーネント、インタラクティブメディアコンポーネント、またはその両方がある場合、ページの切れ目とコンポーネントは正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照されているアセットや設定にアクセスできることを確認するためにページが再構築されるためです。 次に、ページが再びレンダリングされ、コンポーネントが壊れます。ユーザーの読み取り専用アクセス権が原因で、ページ上の各コンポーネントコードを再レンダリングできません。

この問題を回避するには、AEM Sitesのユーザーに、アセットへのアクセスに必要な権限があることを確認してください。

メモ

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.

dm-settings-image-preset

メモ

デフォルトでは、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 ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。

chlimage_1-540

You must edit the following Dynamic Media Settings by clicking Edit in the component.

メモ

デフォルトでは、Dynamic Media ビデオコンポーネントはアダプティブです。ビデオコンポーネントを固定サイズにする場合は、そのコンポーネントで、「詳細」タブの「」と「高さ」を使用してサイズを設定します。

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

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

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

    • Associate a caption file with a video caption.
    • Associate a navigation file with a video navigation.

You can edit the following Advanced Settings by clicking Edit in the component.

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

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

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

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

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

dm-settings-smart-crop

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

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

Interactive Media component

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

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

メモ

読み取り専用権限を持つユーザーがWebページにアクセスするダイナミックメディアコンポーネント、インタラクティブメディアコンポーネント、またはその両方がある場合、ページの切れ目とコンポーネントは正しくレンダリングされません。 これは、コンポーネントのプロパティが適切で、参照されているアセットや設定にアクセスできることを確認するためにページが再構築されるためです。 次に、ページが再びレンダリングされ、コンポーネントが壊れます。ユーザーの読み取り専用アクセス権が原因で、ページ上の各コンポーネントコードを再レンダリングできません。

この問題を回避するには、AEM Sitesのユーザーに、アセットへのアクセスに必要な権限があることを確認してください。

chlimage_1-541

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

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

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

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

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

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

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

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

Panoramic Media component

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

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

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

panoramic-media-viewer-preset

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

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

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

HTTP/2 を使用した Dynamic Media アセットの配信

HTTP/2 は、ブラウザーとサーバーの交信を強化する、新しく更新された Web プロトコルです。このプロトコルを使用すれば、情報の伝送を高速化し、必要な処理能力を抑えることができます。HTTP/2 上で Dynamic Media アセットの配信が可能になり、応答時間と読み込み時間が短縮されました。

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

このページ