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

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

AEMをWCMとして使用している場合は、ダイナミックメディアアセットを直接ページに追加します。

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

Dynamic Mediaまたはインタラクティブメディアコンポーネントをページに追加するのと、ページにコンポーネントを追加するのと同じです。 Dynamic Mediaとインタラクティブメディアのコンポーネントについては、以下の節で詳しく説明します。

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

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

2. Dynamic Mediaコンポーネントが使用できない場合は、サイドキックのルーラーをクリックして​デザイン​モードに入り、パーシスを編集​をクリックし、Dynamic Media​を選択してDynamic Mediaコンポーネントを使用可能にします。

   メモ

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

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

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

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

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

Dynamic Media コンポーネント

Dynamic Mediaおよび Interactive Mediaは、 Dynamic Mediaの Sidekickで利用できます。インタラクティブメディア​コンポーネントは、すべてのインタラクティブアセット（インタラクティブビデオ、インタラクティブ画像、カルーセルセットなど）に使用します。その他すべてのダイナミックメディアコンポーネントでは、ダイナミックメディア​コンポーネントを使用します。

Dynamic Media コンポーネント

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

画像を操作する場合

Dynamic Mediaコンポーネントを使用すると、画像セット、スピンセット、混在メディアセットなどの動的な画像を追加できます。ズームイン、ズームアウトが可能です。必要に応じて、スピンセット内の画像を回転させたり、別の種類の画像セットから画像を選択したりできます。

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

次のDynamic Media設定を編集するには、コンポーネントで「編集」をクリックし、「Dynamic Media設定」タブをクリックします。

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

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

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

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

画像修飾子 — 画像効果を変更するには、追加の画像コマンドを指定します。これらについては、画像プリセットの管理およびコマンドリファレンスで説明します。

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

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

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

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

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

代替テキスト — グラフィックをオフにしているユーザーの画像のタイトル。

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

URL、開く場所 — リンクを開くアセットを設定できます。URL​と​Open in​を設定して、同じウィンドウで開くか、新しいウィンドウで開くかを指定します。

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

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

ビデオの操作時

Dynamic Mediaコンポーネントを使用して、動的なビデオをWebページに追加します。コンポーネントを編集する際に、定義済みのビデオビューアプリセットをページ上でのビデオ再生に使用するよう選択できます。

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

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

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

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

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

セキュアビデオの配信方法

AEM 6.2 で FP-13480 をインストールする場合、ビデオをセキュア SSL 接続（HTTPS）と非セキュア接続（HTTP）のどちらで配信するかを制御できます。デフォルトでは、ビデオ配信プロトコルは、埋め込み Web ページのプロトコルから自動的に継承されます。Web ページが HTTPS で読み込まれる場合、ビデオも HTTPS で配信されます。逆の場合も同様です。Web ページが HTTP で読み込まれる場合、ビデオも HTTP で配信されます。ほとんどの場合、このデフォルトの動作で問題ないため、特に設定を変更する必要はありません。ただし、ビデオをセキュアに配信するために、VideoPlayer.ssl=on を URL パスの最後に付加するか、または埋め込みコードスニペットにある他のビューアの設定パラメーターのリストに付加して、このデフォルトの動作をオーバーライドすることができます。

ビデオのセキュア配信、および URL パスの VideoPlayer.ssl 設定属性の使用について詳しくは、『ビューアリファレンスガイド』の「ビデオのセキュア配信」を参照してください。ビデオビューアの他に、セキュアビデオ配信は混在メディアビューアとインタラクティブビデオビューアで使用できます。

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

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

インタラクティブメディアコンポーネントはスマートです。画像とビデオのどちらを追加するかによって、様々なオプションがあります。 また、ビューアはレスポンシブです。 つまり、画面のサイズは、画面のサイズに基づいて自動的に変更されます。 すべてのビューアはHTML5ベースのビューアです。

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

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

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

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

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

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

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

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