現在表示中:

Web サイトで使用するアセットにダイナミックメディア機能を追加する場合は、ページに直接ダイナミックメディアまたはインタラクティブメディアコンポーネントを追加できます。そのためには、デザインモードに切り替えて、ダイナミックメディアコンポーネントを有効にします。次に、これらのコンポーネントをページに追加して、そのコンポーネントにアセットを追加します。ダイナミックメディアコンポーネントおよびインタラクティブメディアコンポーネントはスマートであり、追加しているアセットが画像であるかビデオであるかを自動的に把握します。それに従って、使用可能なオプションが変わります。

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

注意:

画像の操作時にダイナミックメディアビューアで画像マップを使用するには、SDK を使用してカスタムビューアを作成する必要があります。SDK およびドキュメントのダウンロードについては、SDK ドキュメントを参照してください。

画像マップは追加設定なしでカルーセルバナーで使用できます。

ページへのダイナミックメディアコンポーネントの追加

ページにダイナミックメディアまたはインタラクティブメディアコンポーネントを追加する手順は、任意のページにコンポーネントを追加する手順と同じです。ダイナミックメディアおよびインタラクティブメディアコンポーネントについて詳しくは、これ以降の節で説明します。

注意:

  • 同じタイプの複数のダイナミックメディアコンポーネントを 1 つのページに含めるときは、同じビューアプリセットを使用する必要があります。
  • ページへのダイナミックメディアコンポーネントの追加では、タッチ UI とクラシック UI の両方を使用できます。ここでは、両方の手順について説明します。

タッチ操作向け UI でのダイナミックメディアコンポーネントの追加

  1. AEM で、ダイナミックメディアまたはインタラクティブメディアコンポーネントを追加するページを開きます。

  2. 左側のウィンドウで、「コンポーネント」アイコンをクリックし、フィルター処理してダイナミックメディアを表示します。 使用可能なダイナミックメディアコンポーネントがない場合は、ダイナミックメディアコンポーネントを有効にする必要があります。詳しくは、デザインモードでのコンポーネントの設定を参照してください。

  3. デザインモードでコンポーネントを追加した場合は、「編集」をクリックして、編集モードに戻ります。

  4. ページの目的の場所にダイナミックメディアコンポーネントまたはインタラクティブメディアコンポーネントをドラッグします。

  5. コンポーネントの周囲の青いボックスをクリックして、設定アイコンをクリックします。

  6. コンポーネントの編集を必要に応じて行い、「OK」をクリックして変更内容を保存します。

クラシック UI でのダイナミックメディアコンポーネントの追加

ページにダイナミックメディアコンポーネント/ビューアを追加するには:

  1. AEM で、ダイナミックメディアコンポーネントを追加するページを開きます。

  2. 使用できるダイナミックメディアコンポーネントがない場合は、サイドキックの定規アイコンをクリックしてデザインモードに切り替え、parsys の「編集」をクリックし、「ダイナミックメディア」を選択して使用できるようにします。

    注意:

    詳しくは、デザインモードでのコンポーネントの設定を参照してください。

  3. サイドキックの鉛筆アイコンをクリックして、編集モードに戻ります。

  4. サイドキックのその他グループからページの目的の場所にダイナミックメディアまたはインタラクティブメディアコンポーネントをドラッグします。

  5. 編集」をクリックしてコンポーネントを開きます。

  6. コンポーネントの編集を必要に応じて行い、「OK」をクリックして変更内容を保存します。

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

ダイナミックメディアおよびインタラクティブメディアコンポーネントは、「コンポーネント」(またはクラシック UI を使用している場合はサイドキック)の「ダイナミックメディア」タブの下にあります。インタラクティブメディアコンポーネントは、すべてのインタラクティブアセット(インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど)に使用します。その他すべてのダイナミックメディアコンポーネントでは、ダイナミックメディアコンポーネントを使用します。

注意:

これらのコンポーネントはデフォルトでは使用できず、使用する前にデザインモードで選択しておく必要があります。 デザインモードで使用可能として設定した後、他の AEM コンポーネントと同様に、これらのコンポーネントをページに追加できます。

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

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

注意:

ダイナミックメディアコンポーネントを追加したときに、「ダイナミックメディア設定」が空であるかアセットを適切に追加できない場合は、次の点を確認してください。

  • ダイナミックメディアを有効にしていること。ダイナミックメディアはデフォルトで無効です。
  • 画像が pyramid tiff ファイルであること。ダイナミックメディアを有効にする前に読み込まれた画像には、pyramid tiff ファイルはありません。

画像を操作する場合

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

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

コンポーネントの「編集」、「ダイナミックメディア設定」の順にクリックして、次のダイナミックメディア設定を編集できます。

注意:

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

ビューアプリセット

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

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

注意:

  • ビューアプリセットのラジオボタンを選択した後、画像プリセットが既に選択されている場合に、標準提供のビューアプリセットがドロップダウンメニューに表示されないことがあります。画像プリセットの値を「なし」に設定して「詳細」タブに切り替え、その後「ダイナミックメディア設定」タブに戻ると、ビューアプリセットが表示されます。
  • 同じタイプの複数のダイナミックメディアコンポーネントを 1 つのページに含めるときは、同じビューアプリセットを使用する必要があります。

画像プリセット

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

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

注意:

幅と高さが設定されていない画像プリセットが選択されている場合に、「ダイナミックメディア設定」タブに「ブレークポイント」フィールドが表示されることがあります。この「ブレークポイント」フィールドを非表示にするには、画像プリセットを再選択します。

画像の修飾子

追加の 画像コマンドを指定して、画像エフェクトを変更できます。詳しくは、画像プリセットおよび「コマンドリファレンス」を参照してください。

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

ブレークポイント

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

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

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

注意:

詳細」タブにすべてのフィールドが表示されないことがあります。すべてのフィールドを表示するには、「ダイナミックメディア設定」タブを選択し、「詳細」タブを再選択します。

タイトル

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

代替テキスト

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

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

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

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

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

「幅」と「高さ」

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

ビデオを操作する場合

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

コンポーネントの「編集」をクリックして、次のダイナミックメディア設定を編集できます。

注意:

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

ビューアプリセット

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

注意:

同じタイプの複数のダイナミックメディアコンポーネントを 1 つのページに含めるときは、同じビューアプリセットを使用する必要があります。

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

タイトル

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

「幅」と「高さ」

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

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

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

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

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

ビューアプリセット

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

注意:

同じタイプの複数のダイナミックメディアコンポーネントを 1 つのページに含めるときは、同じビューアプリセットを使用する必要があります。

タイトル

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

「幅」と「高さ」

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

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

製品アセットを表示

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

製品価格を表示

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

製品フォームを表示

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

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

法律上の注意   |   プライバシーポリシー