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

Web サイトで使用するアセットに Dynamic Media 機能を追加するには、Dynamic Mediaインタラクティブメディアパノラマメディアビデオ 360 メディア​のいずれかのコンポーネントをページに直接追加します。これをおこなうには、レイアウトモードに入り、Dynamic Media コンポーネントを有効にします。次に、これらのコンポーネントをページに追加し、そのコンポーネントにアセットを追加できます。Dynamic Media コンポーネントはスマートです。追加しようとしているアセットが画像、ビデオのどちらなのかが検出され、それに応じて利用可能なオプションが変わります。

AEM を WCM として使用している場合は、Dynamic Media アセットを直接ページに追加します。サードパーティの製品を WCM として使用している場合は、アセットのリンクまたは埋め込みをおこないます。サードパーティのレスポンシブ Web サイトについては、レスポンシブサイトへの最適化された画像の配信を参照してください。

メモ

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

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

3D メディア、Dynamic Media、インタラクティブメディア、パノラマメディア、スマート切り抜きビデオ、ビデオ 360 メディアのいずれかのコンポーネントを 1 つのページに追加することは、コンポーネントを任意のページに追加することと同じです。Dynamic Media コンポーネントについては、後の節で説明します。

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

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

  3. コンポーネント 」見出しのドロップダウンリストで、「 ダイナミックメディア」を選択します。

    Dynamic Media コンポーネントのリストがない場合は、使用する Dynamic Media コンポーネントを有効にしなければならない可能性があります。詳しくは、Dynamic Media コンポーネントの有効化を参照してください。

    6_5_360video_wcmcomponent

  4. Drag a Dynamic Media component that you want to use and drop it in the desired location on the page.

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

    6_5_360video_wcmcomponentconfigure

  6. ページにドロップした Dynamic Media コンポーネントに対応する設定ダイアログボックスが開きます。必要に応じて、コンポーネントのオプションを設定します

    以下の例では、Dynamic Media ビデオ 360 メディア​コンポーネントのダイアログボックスと、「ビューアプリセット」ドロップダウンリストで利用可能なオプションが表示されています。

    ビデオ 360 メディアコンポーネント

    Dynamic Media ビデオ 360 メディアコンポーネント。

  7. 完了したら、ダイアログボックスの右上隅にあるチェックマークをタップして、変更を保存します。

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

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

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

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

    edit-template

  3. On the right side of the toolbar near the top of the page, from the drop-down list, tap Structure.

    ポリシー

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

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

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

  6. Scroll until you see Dynamic Media.

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

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

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

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

Dynamic Media コンポーネントのローカライズ

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

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

    chlimage_1-172

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

    メモ

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

Dynamic Media コンポーネント

Dynamic Media components are available when you tap the Components icon, then filter on Dynamic Media.

利用可能な Dynamic Media コンポーネントは次のとおりです。

  • Dynamic Media - 画像、ビデオ、eCatalog、スピンセットなどのアセットに使用します。
  • インタラクティブメディア - すべてのインタラクティブアセット(インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど)に使用します。
  • パノラマメディア - パノラマ画像またはパノラマ VR 画像アセットに使用します。
  • ビデオ 360 メディア - 360 ビデオおよび 360 VR ビデオアセットに使用します。
メモ

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

6_5_dynamicmediawcmcomponents

Dynamic Media コンポーネント

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

メモ

Web ページに次のものが含まれている場合:

  • 同じページで使用されている Dynamic Media コンポーネントの複数のインスタンス。
  • 各インスタンスが同じアセットタイプを使用している。

そのページの各 Dynamic Media コンポーネントにそれぞれ異なるビューアプリセットを割り当てることは、サポートされないことに注意してください。

一方、ページ内で、同じタイプのアセットを使用するすべての Dynamic Media コンポーネントで同じビューアプリセットを使用することは可能です。

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 tapping the Edit icon in the component and then Dynamic Media Settings.

dm-settings-image-preset

メモ

By default, the Dynamic Media image component is adaptive. If you want to make it a fixed size, set it in the component in the Advanced tab with the Width and Height.

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

    これは、画像セット、スピンセットまたは混在メディアセットを表示している場合に唯一使用できるオプションです。表示されるビューアプリセットもスマートであり、関連するビューアプリセットのみが表示されます。

  • ビューア修飾子 - ビューア修飾子は、名前=値の組み合わせで & を区切り文字とした形式です。ビューア修飾子を使用すると、ビューアリファレンスガイドに概略が記されているとおり、ビューアを変更することができます。posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例で、これはビデオのサムネールに異なる画像を設定し、ビデオにクローズキャプションや字幕ファイルを関連付けます。

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

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

  • 画像の修飾子 - 追加の画像コマンドを指定すると、画像エフェクトを適用できます。これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

  • ブレークポイント - レスポンシブサイトでこのアセットを使用する場合は、画像のブレークポイントを追加する必要があります。画像のブレークポイントをコンマ(,)で区切って指定する必要があります。このオプションを使用できるのは、画像プリセットで高さまたは幅が定義されていないときです。

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

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

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

  • 代替テキスト - グラフィックの表示をオフにしているユーザー向けのタイトルを画像に追加します。

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

  • URL、次のウィンドウで開く - リンクを開くようにアセットを設定できます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

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

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

ビデオを操作する場合

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

chlimage_1-173

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 はビューア修飾子の一例です。

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

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

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

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

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

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

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

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

dm-settings-smart-crop

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

メモ

By default, the Dynamic Media image component is adaptive. If you want to make it a fixed size, set it in the component in the Advanced tab with the Width and Height.

  • 画像の修飾子 - 追加の画像コマンドを指定すると、画像エフェクトを適用できます。これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

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

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

  • 代替テキスト - グラフィックの表示をオフにしているユーザー向けのタイトルをスマート切り抜き画像に追加します。

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

  • URL、次のウィンドウで開く - リンクを開くようにアセットを設定できます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。

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

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

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

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

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

メモ

Web ページに次のものが含まれている場合:

  • 同じページで使用されているインタラクティブメディアコンポーネントの複数のインスタンス。
  • 各インスタンスが同じアセットタイプを使用している。

そのページの各インタラクティブメディアコンポーネントにそれぞれ異なるビューアプリセットを割り当てることは、サポートされないことに注意してください。

一方、ページ内で、同じタイプのアセットを使用するすべてのインタラクティブメディアコンポーネントで同じビューアプリセットを使用することは可能です。

chlimage_1-174

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

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

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

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

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

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

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

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

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

パノラマメディアコンポーネント

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

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

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

メモ

Web ページに次のものが含まれている場合:

  • 同じページで使用されている​パノラマメディア​コンポーネントの複数のインスタンス。
  • 各インスタンスが同じアセットタイプを使用している。

そのページの各​パノラマメディア​コンポーネントにそれぞれ異なるビューアプリセットを割り当てることは、サポートされないことに注意してください。

一方、ページ内で、同じタイプのアセットを使用するすべてのパノラマメディアコンポーネントで同じビューアプリセットを使用することは可能です。

panoramic-media-viewer-preset

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

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

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

ビデオ 360 メディアコンポーネント

Web ページ上でエクイレクタングラー形式のビデオをレンダリングして部屋、物件、場所、風景、医療処置などの没入感のある視聴体験が得られるようにするには、ビデオ 360 メディア​コンポーネントを使用します。

フラットディスプレイでの再生時には、ユーザーは視野角を制御できます。また、モバイルデバイスでの再生では通常、デバイス組み込みのジャイロスコープ制御を利用します。

ビューアでは、360 ビデオアセットの配信をネイティブサポートしています。デフォルトでは、表示または再生するための追加設定は不要です。360 ビデオは、.mp4、.mkv、.mov といった標準のビデオ拡張子を使用して配信されます。最も一般的なコーデックは H.264 です。

6_5_360video_wcmcomponent-1

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

  • ビューアプリセット - 「ビューアプリセット」ドロップダウンメニューから既存のビューアを選択します。バーチャルリアリティグラスを使用するエンドユーザーには、Video360VR を使用します。基本的なビデオ再生コントロールとソーシャルメディア機能を含んでいます。基本的なビデオ再生コントロールを含む Video360_social を使用します。ビデオのレンダリングはステレオモードでおこなわれます。視点の手動制御はオフになり、ジャイロスコープ制御がオンになります。ソーシャルメディア機能はありません。

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

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

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

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

このページ