Show Menu
トピック×

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

Web サイトで使用するアセットに Dynamic Media 機能を追加するには、 Dynamic Media インタラクティブメディア パノラマメディア ビデオ 360 メディア ​のいずれかのコンポーネントをページに直接追加します。これをおこなうには、レイアウトモードに入り、Dynamic Media コンポーネントを有効にします。次に、これらのコンポーネントをページに追加し、そのコンポーネントにアセットを追加できます。Dynamic Media コンポーネントはスマートです。追加しようとしているアセットが画像、ビデオのどちらなのかが検出され、それに応じて利用可能なオプションが変わります。
AEM を WCM として使用している場合は、Dynamic Media アセットを直接ページに追加します。サードパーティの製品を WCM として使用している場合は、アセットの リンク または 埋め込み をおこないます。サードパーティのレスポンシブ Web サイトについては、 レスポンシブサイトへの最適化された画像の配信 を参照してください。
AEM のページに追加する前にアセットを公開する必要があります。 Dynamic Media アセットの公開 を参照してください。

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

3Dメディア、ダイナミックメディア、インタラクティブメディア、パノラマメディア、スマート切り抜きビデオ、ビデオ360メディアの各コンポーネントをページに追加するのと同じです。 Dynamic Media コンポーネントについては、後の節で説明します。
ページへの Dynamic Media コンポーネントの追加
  1. AEM で、Dynamic Media コンポーネントを追加するページを開きます。
  2. 左側のウィンドウで、「 コンポーネント 」アイコンをタップし、「Dynamic Media」でフィルタリングします。
    使用可能なダイナミックメディアコンポーネントのリストがない場合は、使用するダイナミックメディアコンポーネントを有効にする必要がある可能性があります。 See Enabling Dynamic Media components .
  3. Dynamic Media コンポーネントをドラッグし、ページ上の目的の場所でドロップします。
    以下の例では、 ビデオ 360 メディア ​コンポーネントが使用されています。
  4. コンポーネントの上に直接マウスポインターを置きます。コンポーネントが青色のボックスで囲まれた時点で 1 回タップすると、コンポーネントのツールバーが表示されます。 設定(レンチ) アイコンをタップします。
  5. ページにドロップした Dynamic Media コンポーネントに対応する設定ダイアログボックスが開きます。 必要に応じて、コンポーネントのオプションを設定します
    以下の例では、Dynamic Media ビデオ 360 メディア ​コンポーネントのダイアログボックスと、「ビューアプリセット」ドロップダウンリストで利用可能なオプションが表示されています。
    Dynamic Media ビデオ 360 メディアコンポーネント。
  6. 完了したら、ダイアログボックスの右上隅にあるチェックマークをタップして、変更を保存します。

Enabling Dynamic Media components

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

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

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

使用可能な Dynamic Media コンポーネント

コンポーネント 」アイコンをタップし、「 Dynamic Media 」でフィルタリングすると、Dynamic Media コンポーネントが利用可能になります。
利用可能な Dynamic Media コンポーネントは次のとおりです。
  • ​Dynamic Media - 画像、ビデオ、eCatalog、スピンセットなどのアセットに使用します。
  • インタラクティブメディア - すべてのインタラクティブアセット(インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど)に使用します。
  • パノラマメディア - パノラマ画像またはパノラマ VR 画像アセットに使用します。
  • ビデオ 360 メディア - 360 ビデオおよび 360 VR ビデオアセットに使用します。
これらのコンポーネントはデフォルトでは使用できないので、使用前にテンプレートエディターで使用可能にする必要があります。テンプレートエディターでコンポートを使用可能にした後は、他の AEM コンポーネントと同様にページに追加することができます。

コンポーネント:Dynamic Media

Dynamic Media コンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかに応じて、様々なオプションを使用できます。このコンポーネントは画像プリセット、画像ベースのビューア(画像セット、スピンセット、混在メディアセットなど)およびビデオをサポートします。さらに、レスポンシブビューアであるので、ビューアのサイズは画面サイズに合わせて自動的に変化します。すべてのビューアは HTML5 ビューアです。
Web ページに次のものが含まれている場合:
  • 同じページで使用されている Dynamic Media コンポーネントの複数のインスタンス。
  • 各インスタンスが同じアセットタイプを使用している。
そのページの各 Dynamic Media コンポーネントにそれぞれ異なるビューアプリセットを割り当てることは、サポートされないことに注意してください。
一方、ページ内で、同じタイプのアセットを使用するすべての Dynamic Media コンポーネントで同じビューアプリセットを使用することは可能です。
Dynamic Media コンポーネントを追加したときに、「 Dynamic Media 設定 」が空であるかアセットを適切に追加できない場合は、次の点を確認してください。
  • 画像が PTIFF(Pyramid TIFF)ファイルであること。Dynamic Media を有効にする前に読み込まれた画像には、pyramid tiff ファイルはありません。

画像を操作する場合

Dynamic Media コンポーネントでは、画像セット、スピンセット、混在メディアセットなどの動的イメージを追加できます。ズームイン、ズームアウト、スピンセット内での画像の回転(該当する場合)または別のタイプのセットからの画像の選択をおこなうことができます。
また、ビューアプリセット、画像プリセットまたは画像形式をコンポーネント内で直接設定することもできます。画像をレスポンシブにするために、ブレークポイントの設定かレスポンシブ画像プリセットの適用のいずれかを実行できます。
コンポーネント内の​ 編集 ​アイコンをタップし、次に「 Dynamic Media 設定 」をタップすると、次の Dynamic Media 設定を編集することができます。
デフォルトでは、Dynamic Media 画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、そのコンポーネントで、「 詳細 」タブの「 」と「 高さ 」を使用してサイズを設定します。
  • ビューアプリセット - ドロップダウンメニューから既存のビューアプリセットを選択します。探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。
    これは、画像セット、スピンセットまたは混在メディアセットを表示している場合に唯一使用できるオプションです。表示されるビューアプリセットもスマートであり、関連するビューアプリセットのみが表示されます。
  • ビューア修飾子 - ビューア修飾子は、名前=値の組み合わせで & を区切り文字とした形式です。ビューア修飾子を使用すると、ビューアリファレンスガイドに概略が記されているとおり、ビューアを変更することができます。 posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例で、これはビデオのサムネールに異なる画像を設定し、ビデオにクローズキャプションや字幕ファイルを関連付けます。
  • 画像プリセット - ドロップダウンメニューから既存の画像プリセットを選択します。探している画像プリセットが表示されない場合は、表示できるように設定する必要があります。「画像プリセットの管理」を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • 画像の修飾子 - 追加の画像コマンドを指定すると、画像エフェクトを適用できます。これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • ブレークポイント - レスポンシブサイトでこのアセットを使用する場合は、画像のブレークポイントを追加する必要があります。画像のブレークポイントをコンマ(,)で区切って指定する必要があります。このオプションを使用できるのは、画像プリセットで高さまたは幅が定義されていないときです。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
    コンポーネントの「 編集 」をタップして、次の詳細設定を編集できます。
  • タイトル - 画像のタイトルを変更します。
  • 代替テキスト - グラフィックの表示をオフにしているユーザー向けのタイトルを画像に追加します。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • URL、次のウィンドウで開く - リンクを開くようにアセットを設定できます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
  • 高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。

ビデオを操作する場合

Dynamic Media コンポーネントを使用して、ダイナミックビデオを Web ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。
コンポーネントの「 編集 」をクリックして、次の Dynamic Media 設定を編集できます。
デフォルトでは、Dynamic Media ビデオコンポーネントはアダプティブです。ビデオコンポーネントを固定サイズにする場合は、そのコンポーネントで、「 詳細 」タブの「 」と「 高さ 」を使用してサイズを設定します。
  • ビューアプリセット - ドロップダウンメニューから既存のビデオビューアプリセットを選択します。探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。
  • ビューア修飾子 - ビューア修飾子は、名前=値の組み合わせで & を区切り文字とした形式です。ビューア修飾子を使用すると、Adobe ビューアリファレンスガイドに概略が記されているとおり、ビューアを変更することができます。 posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例です。
    ビューア修飾子を使用すると、例えば次のことが可能です。
    コンポーネントの「 編集 」をクリックして、次の詳細設定を編集できます。
  • [タイトル - ビデオのタイトルを変更します。
  • - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
  • 高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。

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

Dynamic Media コンポーネントを使用して、スマート切り抜き画像アセットを Web ページに追加します。コンポーネントの編集時に、ページ上でビデオを再生するための事前定義済みのビデオビューアプリセットを使用するように選択できます。
詳しくは、 AEM Assets Dynamic Media でのスマート切り抜きの使用 を参照してください。
イメージプロファイル も参照してください。
コンポーネントの「 編集 」をクリックして、次の Dynamic Media 設定を編集できます。
デフォルトでは、Dynamic Media 画像コンポーネントはアダプティブです。画像コンポーネントを固定サイズにする場合は、そのコンポーネントで、「 詳細 」タブの「 」と「 高さ 」を使用してサイズを設定します。
  • 画像の修飾子 - 追加の画像コマンドを指定すると、画像エフェクトを適用できます。これらは画像プリセットと画像をサーブするコマンドリファレンスに記述されています。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
    コンポーネントの「 編集 」をクリックして、次の詳細設定を編集できます。
  • 縦横比の一致を有効にする - 元の画像の縦横比に最も適した縦横比のスマート切り抜きレンディションを Dynamic Media で選択する場合に選択します。
  • タイトル - スマート切り抜き画像のタイトルを変更します。
  • 代替テキスト - グラフィックの表示をオフにしているユーザー向けのタイトルをスマート切り抜き画像に追加します。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • URL、次のウィンドウで開く - リンクを開くようにアセットを設定できます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。
    このオプションは、画像セット、スピンセットまたは混在メディアセットを表示している場合には使用できません。
  • - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
  • 高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。

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

インタラクティブメディアコンポーネントは、インタラクティビティ(ホットスポットまたは画像マップ)を含むアセット用です。インタラクティブ画像、インタラクティブビデオまたはカルーセルバナーがある場合は、 インタラクティブメディア ​コンポーネントを使用します。
インタラクティブメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかに応じて、様々なオプションを使用できます。さらに、レスポンシブビューアであるので、ビューアのサイズは画面サイズに合わせて自動的に変化します。すべてのビューアは HTML5 ビューアです。
Web ページに次のものが含まれている場合:
  • 同じページで使用されているインタラクティブメディアコンポーネントの複数のインスタンス。
  • 各インスタンスが同じアセットタイプを使用している。
そのページの各インタラクティブメディアコンポーネントにそれぞれ異なるビューアプリセットを割り当てることは、サポートされないことに注意してください。
一方、ページ内で、同じタイプのアセットを使用するすべてのインタラクティブメディアコンポーネントで同じビューアプリセットを使用することは可能です。
コンポーネントの「 編集 」をタップして、次の​ 一般 ​設定を編集できます。
  • ビューアプリセット - ドロップダウンメニューから既存のビューアプリセットを選択します。探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。ビューアプリセットを使用するには、あらかじめ公開する必要があります。詳しくは、ビューアプリセットの管理を参照してください。
  • タイトル - ビデオのタイトルを変更します。
  • - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
  • 高さ - 画像を固定サイズで表示する場合は、値をピクセル単位で入力します。この値を空にすると、アダプティブなアセットになります。
    コンポーネントの「 編集 」をクリックして、次の​ 買い物かごに追加 ​設定を編集できます。
  • 製品アセットを表示 - デフォルトでは、この値が選択されています。製品アセットには、コマースモジュールで定義された製品の画像が表示されます。製品アセットを表示しない場合はチェックマークをオフにします。
  • 製品価格を表示 - デフォルトでは、この値が選択されています。製品価格には、コマースモジュールで定義されたアイテムの価格が表示されます。製品価格を表示しない場合はチェックマークをオフにします。
  • 製品フォームを表示 - デフォルトでは、この値は選択されていません。製品フォームには、サイズや色など製品のバリエーションが含まれます。製品のバリエーションを表示しない場合はチェックマークをオフにします。

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

パノラマメディアコンポーネントは、球パノラマ画像のアセット用です。このような画像では、室内、物件、場所、風景などをあらゆる角度から見ることができます。画像が球パノラマとして適格となるには、以下の一方または両方の条件を満たしている必要があります。
  • 縦横比が 2:1 である必要があります。
  • キーワード equirectangular または( spherical + panorama )または( spherical + panoramic )でタグ付けされている必要があります。 タグの使用 を参照してください。
縦横比とキーワードの両方の条件が、アセットの詳細ページと「 パノラマメディア 」WCM コンポーネントのパノラマアセットに適用されます。
Web ページに次のものが含まれている場合:
  • 同じページで使用されている​ パノラマメディア ​コンポーネントの複数のインスタンス。
  • 各インスタンスが同じアセットタイプを使用している。
そのページの各​ パノラマメディア ​コンポーネントにそれぞれ異なるビューアプリセットを割り当てることは、サポートされないことに注意してください。
一方、ページ内で、同じタイプのアセットを使用するすべてのパノラマメディアコンポーネントで同じビューアプリセットを使用することは可能です。
コンポーネントの「 設定 」をタップして、次の設定を編集できます。
  • ビューアプリセット - 「ビューアプリセット」ドロップダウンメニューから既存のビューアを選択します。
探しているビューアプリセットが表示されない場合は、そのビューアプリセットが公開されていることを確認してください。ビューアプリセットを使用するには、公開する必要があります。詳しくは、 ビューアプリセットの管理 を参照してください。

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

Web ページ上でエクイレクタングラー形式のビデオをレンダリングして部屋、物件、場所、風景、医療処置などの没入感のある視聴体験が得られるようにするには、 ビデオ 360 メディア ​コンポーネントを使用します。
フラットディスプレイでの再生時には、ユーザーは視野角を制御できます。また、モバイルデバイスでの再生では通常、デバイス組み込みのジャイロスコープ制御を利用します。
ビューアでは、360 ビデオアセットの配信をネイティブサポートしています。デフォルトでは、表示または再生するための追加設定は不要です。360 ビデオは、.mp4、.mkv、.mov といった標準のビデオ拡張子を使用して配信されます。最も一般的なコーデックは H.264 です。
コンポーネントの「 設定 」をタップして、次の設定を編集できます。
  • ビューアプリセット - 「ビューアプリセット」ドロップダウンメニューから既存のビューアを選択します。バーチャルリアリティグラスを使用するエンドユーザーには、Video360VR を使用します。基本的なビデオ再生コントロールとソーシャルメディア機能を含んでいます。基本的なビデオ再生コントロールを含む Video360_social を使用します。ビデオのレンダリングはステレオモードでおこなわれます。視点の手動制御はオフになり、ジャイロスコープ制御がオンになります。ソーシャルメディア機能はありません。
探しているビューアプリセットが表示されない場合は、そのビューアプリセットが公開されていることを確認してください。ビューアプリセットを使用するには、公開する必要があります。詳しくは、 ビューアプリセットの管理 を参照してください。

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

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