現在表示中:

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

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

注意:

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

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

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

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

  2. 左側のウィンドウで、「コンポーネント」アイコンをクリックし、「Dynamic Media」でフィルタリングします。

    使用可能な Dynamic Media コンポーネントがない場合は、Dynamic Media コンポーネントを有効にする必要があります。詳細はページテンプレートの編集を参照してください。

    6_5_360video_wcmcomponent
  3. Dynamic Media コンポーネントをドラッグし、ページ上の目的の場所でドロップします。

    以下の例では、ビデオ 360 メディアコンポーネントが使用されています。

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

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

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

    ビデオ 360 メディアコンポーネント
    Dynamic Media ビデオ 360 メディアコンポーネント。
  6. 完了したら、ダイアログボックスの右上隅近くにあるチェックマークをタップして、変更を保存します。

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

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

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

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

    注意:

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

Dynamic Media コンポーネント

コンポーネント」アイコンをタップし、「Dynamic Media」でフィルタリングすると、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 はデフォルトで無効になっています。
  • 画像が pyramid tiff ファイルであること。Dynamic Media を有効にする前に読み込まれた画像には、pyramid tiff ファイルはありません。

画像を操作する場合

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

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

コンポーネント内の編集アイコンをタップし、次に「Dynamic Media 設定」をタップすると、次の Dynamic Media 設定を編集することができます。

dm-settings-image-preset

注意:

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

ビューアプリセット

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

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

ビューア修飾子

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

画像プリセット

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

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

画像の修飾子

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

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

ブレークポイント

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

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

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

タイトル

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

代替テキスト

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

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

「URL」、「次のウィンドウで開く」

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

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

「幅」と「高さ」

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

ビデオを操作する場合

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

chlimage_1

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

注意:

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

ビューアプリセット

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

ビューア修飾子

ビューア修飾子は、名前=値の組み合わせで & を区切り文字とした形式です。ビューア修飾子を使用すると、Adobe ビューアリファレンスガイドに概略が記されているとおり、ビューアを変更することができます。Posterimage=img.jpg&caption=text.vtt,1 はビューア修飾子の一例です。

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

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

タイトル

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

「幅」と「高さ」

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

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

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

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

dm-settings-smart-crop

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

注意:

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

画像の修飾子

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

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

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

タイトル

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

代替テキスト

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

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

「URL」、「次のウィンドウで開く」

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

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

高さ、幅

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

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

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

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

注意:

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

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

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

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

chlimage_1

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

ビューアプリセット

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

タイトル

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

「幅」と「高さ」

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

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

製品アセットを表示

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

製品価格を表示

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

製品フォームを表示

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

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

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

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

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

注意:

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

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

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

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

panoramic-media-viewer-preset

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

ビューアプリセット

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

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

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

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

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

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

6_5_360video_wcmcomponent

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

ビューアプリセット

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

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

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

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー