Dynamic Mediaビューアプリセットの管理

Dynamic Mediaのビューアプリセットは、ユーザーがコンピューターの画面やモバイルデバイスでリッチメディアアセットを表示する方法を決定する一連の設定です。 管理者は、ビューアプリセットを作成できます。設定は、幅広いビューア設定オプションで使用できます。例えば、ビューアの表示サイズやズームの動作を変更できます。

独自のHTML5ビューアプリセットの作成とカスタマイズについて詳しくは、Dynamic Media HTML5ビューアSDK APIドキュメント​のAdobeを参照してください。 この SDK は、SDK 自体に組み込まれている IS パブリッシュサーバーで使用できます。ライブラリバージョンごとに、専用の SDK ドキュメントが付属しています。

パス: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html.
例：3.10 SDK:https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html

AdobeDynamic Mediaビューアリファレンスガイドも参照してください。

ここでは、ビューアプリセットを作成、編集および管理する方法について説明します。アセットをプレビューする際は、いつでもビューアプリセットを適用できます。詳しくは、ビューアプリセットの適用を参照してください。

ビューアのキーボードアクセシビリティ

すべての標準提供ビューアでキーボードアクセシビリティがサポートされています。

キーボードアクセシビリティとナビゲーションに関するページも参照してください。

Dynamic Mediaビューアプリセットの管理

AEMでビューアプリセットの追加、編集、削除、公開、非公開およびプレビューを実行できます。そのためには、ツール/アセット/ビューアプリセット​を選択します。

レスポンシブデザイン Web ページのビューアサポート

Web ページごとに異なるニーズがあります。例えば、個別のブラウザーウィンドウで HTML5 ビューアを開くリンクを示す Web ページが必要な場合や、ホスティングページに直接 HTML5 ビューアを埋め込む必要が生じる場合があります。後者の場合、Web ページのレイアウトは静的なものになる場合と、また、レスポンシブ​で、デバイスやブラウザーウィンドウのサイズが異なる場合に表示が異なる場合もあります。 これらのニーズに対応するために、Dynamic Media に付属する事前定義済みの標準提供 HTML5 ビューアはすべて、静的な Web ページとレスポンシブデザイン Web ページの両方をサポートしています。

レスポンシブビューアを Web ページに埋め込む方法について詳しくは、画像サービング API ヘルプ​のレスポンシブ画像ライブラリを参照してください。

ビューアプリセットのシステム互換性

Dynamic Media に付属するすべての標準提供ビューアプリセットは、次のシステムと完全に互換します。

• デスクトップ
• Apple iPhone
• Apple iPad
• Android Smartphone
• Android Tablet
• ビデオの場合、BlackberryとWindows Phone 8でMP4の再生が追加でサポートされます。

ビューアプリセットのリッチメディアタイプ

管理者は、新しいビューアプリセットの作成時に次のリッチメディアタイプを追加してカスタマイズすることができます。

標準提供ビューアプリセットのリスト

次の表に、Dynamic Mediaに付属する事前定義済みの標準提供ビューアプリセットを示します。

ライブデモも参照してください。

ビューアでサポートされている Web ブラウザーとオペレーティングシステムのバージョンについては、ビューアのリリースノートに記載されています。

『ビューアリファレンスガイド』の目次の​ビューアのリリースノート​を参照してください。

サポートされているモバイルビューアのジェスチャーに関する表

次の表に、iOS、Android 2.x および Android 3.x デバイスでサポートされているモバイルビューアのジェスチャーを示します。

表示されるDynamic Mediaビューアプリセットの数の増加

詳細ビュー／ビューア​でアセットを表示したとき、AEM には様々なビューアプリセットが表示されます。表示されるビューアの数を増減できます。

表示されるDynamic Mediaビューアプリセットの数を増やすには:

1. CRXDE Lite(http://localhost:4502/crx/de)に移動します。

2. ビューアプリセットリストノード（/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist）に移動します。

   

3. 「limit」プロパティで、「値」（デフォルトで 15 に設定されています）を目的の数に変更します。

4. ビューアプリセットデータソース（/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource）に移動します。

   

5. limit​プロパティで、数値を目的の数値（例：{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}）に変更します。

6. 「すべて保存」をタップします。

新しいDynamic Mediaビューアプリセットの作成

ビューアプリセットを作成しておくと、アセットの表示やアセットとの対話のための様々な設定を適用できます。ただし、新しいビューアプリセットを作成する必要はありません。デフォルトの、すぐに使えるビューアプリセットが既に AEM Assets に付属していますので、これを使用できます。

新しいビューアプリセットを作成することを選んだ場合、ビューアプリセットを保存すると、ビューアプリセットページのそのビューアの状態が自動的にアクティベート済みになります（「オン」に設定されます）。​​この状態は、画像やビデオをプレビューする際に、 Dynamic Media​コンポーネントと​インタラクティブメディア​コンポーネントに表示されることを意味します。

一部のビューアプリセットには、ビューアの全体的な動作に影響する専用の設定があります。作成するビューアプリセットによっては、これらの特別な考慮事項について注意する必要があります。

インタラクティブビューアプリセットの作成に関する考慮事項を参照してください。

カルーセルバナーのビューアプリセットの作成に関する考慮事項を参照してください。

新しいDynamic Mediaビューアプリセットを作成するには:

1. AEMの左上隅にあるAEMロゴをタップし、左側のレールで​ツール/アセット/ビューアプリセット​をタップします。

   

2. ビューアプリセット​ページのツールバーで、「作成」をタップします。

3. 新規ビューアプリセット​ダイアログボックスで、「プリセット名」フィールドに新しいプリセットの名前を入力します。この名前は慎重に選択してください。「作成」をタップした後は編集できません。

   後でプリセットを保存すると、その名前がビューアプリセットページの「プリセットのタイトル」列ヘッダーの下に表示されます。

4. リッチメディアタイプ​ドロップダウンメニューで、作成するビューアプリセットのタイプを選択し、ページの右上隅にある「作成」をタップします。

   ビューアプリセットのリッチメディアタイプを参照してください。

5. ビューアプリセットを編集​ページで、「外観」タブをタップします。

6. 次のいずれかの操作を行います。

   • 「選択したタイプ」プルダウンメニューで、ビジュアルデザインをカスタマイズするコンポーネントを選択します。または、設定するビジュアル要素をビューアでタップして選択することもできます。

     Visual Editor を使用すると、特定のプロパティがスタイルに与える効果を確認できます。プロパティを設定または調整するだけで、Visual Editor の左にあるサンプルを使用して、ビューア上での効果を瞬時に確認できます。

     各タイプのビューアプリセットに対するCSSスタイル設定プロパティは、『ビューアリファレンスガイド』の「<viewer_name>​ビューアのカスタマイズ」のヘルプトピックに記載されています。

     例えば、Mixed_Media タイプのビューアプリセットを作成している場合、プロパティのリストと各プロパティの説明については、混在メディアビューアのカスタマイズを参照してください。

   • スタイル設定を別個の CSS ファイルで定義している場合は、その CSS ファイルを AEM Assets にアップロードできます。「選択したタイプ」プルダウンメニュー（表示するには Visual Editor を上にスクロールする必要が生じる場合があります）の下の「CSS を読み込み」をタップし、アップロードした CSS ファイルを探してビューアプリセットと関連付けます。

     CSS ファイルを読み込むと、Visual Editor は、その CSS に正しいビューアマーカーが使用されているかを確認します。例えば、ズームビューアを作成している場合、読み込むすべての CSS ルールが、親のビューアエレメントに定義されているズームビューアのクラス名 .s7mixedmediaviewer を使用して定義されている必要があります。

     指定ビューアの CSS マーカーが正しく定義された CSS であれば、自作した任意の CSS を読み込むことができます（CSS マーカーについては、『ビューアリファレンスガイド』の「<viewer name> ビューアのカスタマイズ」のヘルプトピックを参照してください。例えば、ズームビューアの CSS マーカーについては、ズームビューアのカスタマイズを参照してください）。ただし、Visual Editor が一部の CSS 値を理解できないこともありえます。そのような場合、Visual Editor は、CSS が正常に機能するように、エラーを上書きしようとします。

   メモ

   RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニュー（表示するには Visual Editor を上にスクロールする必要が生じる場合があります）の下の「CSS を表示／非表示」をタップします。​

   Visual Editor と同様に、CSS でプロパティを直接変更すると、ビューアサンプルにその効果がすぐに反映されます。また、同時に、Visual Editor でもその同じプロパティが自動的に更新されます。このことから、RAW である CSS エディターと、Visual Editor のどちらを使用しても、また交互に使用してもかまいません。

   メモ

   ボタンのアートワークの場合は、2 倍画像を選択し、高解像度のアートワークをアップロードします。インタラクティブ画像やショッパブルバナーを操作する場合は、すぐに使える様々なホットスポットボタンから選択することもできます。

7. （オプション） ビューアプリセットを編集​ページの上部付近にある「デスクトップ」、「タブレット」、「電話」のいずれかをタップして、異なるデバイスや画面のビジュアルスタイルを一意に定義します。

8. ビューアプリセットを編集​ページで、「ビヘイビアー」タブをタップします。 または、設定するビジュアル要素をビューアでタップまたはクリックして選択することもできます。

9. 「選択したタイプ」プルダウンメニューで、動作を変更するコンポーネントを選択します。

   Visual Editor 内の多くのコンポーネントには、詳しい説明が関連付けられています。この説明は、コンポーネントを展開して関連パラメーターを表示したときに、青いボックス内に示されます。

   一部のビューアタイプには、「IS コマンド」テキストフィールドに画像サービングコマンドを指定できるコンポーネントがあります。使用できるコマンドのリストについては、画像サービング API リファレンス（英語）を参照してください。

   メモ

   スマートフォンやタブレットなどのタッチデバイスを使用している場合は…

   テキストフィールドに値を入力後、ユーザーインターフェイス内をタップすると、変更内容が送信され、仮想キーボードが閉じられます。Enter キーをタップした場合は、何も実行されません。

10. ページの右上隅にある「保存」をタップします。

11. 新しいビューアプリセットを公開します。プリセットを Web サイトで使用するには、まずそのプリセットを公開する必要があります。

    ビューアプリセットの公開を参照してください。

インタラクティブビデオのビューアプリセットの作成に関する考慮事項

パネル内の画像サムネールのディスプレイモードについて

インタラクティブビデオのビューアプリセットを作成または編集する際に、ビヘイビアー​タブの​選択したコンポーネント​プルダウンメニューからInteractiveSwatchesを選択する際に使用する​ディスプレイモード​設定を選択します。 選択するディスプレイモードは、ビデオの再生中にサムネールを表示する方法とタイミングに影響します。segmentディスプレイモード（デフォルト）またはcontinuousディスプレイモードを選択できます。

インタラクティブビデオビューアの自動スクロール動作について

インタラクティブビデオビューア内のサムネールの自動スクロール動作は、選択したディスプレイモードとは独立して機能します。

インタラクティブビデオのビューアプリセットを作成または編集する場合、「ビヘイビアー」タブから「自動スクロール」にアクセスします。 選択したコンポーネント​ドロップダウンメニューの「ビヘイビアー」タブで、「InteractiveSwatches」をタップします。「自動スクロール」チェックボックスは、「ISコマンド」テキストフィールドの下にリストされます。

ビューアプリセットで「自動スクロール」​を無効（チェックボックスをオフ）にした場合、ユーザーによるビデオの再生中、パネルにはビデオの全長につき最初のサムネール画像のみが表示されます。ただし、ユーザーは必要に応じて上下の矢印アイコンを使用してサムネール間を手動でスクロールできます。

ビューアプリセットで「自動スクロール」を有効（チェックボックスをオン）にすると、ビデオの再生中、セグメントの開始時に、ビデオセグメントに割り当てられたサムネール画像まで表示がスクロールされます。ただし、セグメントによっては特定のサムネールが前後のサムネールの 2 倍の時間表示されることもあります。この動作は、セグメント内のサムネールの数がパネルに表示される数よりも多く、均等に分割できないことが原因で発生します。

図解してみましょう。30 秒のビデオセグメントが 1 つあるとします。30 秒の間に表示されるサムネールは合計で 9 個です。ブラウザーは 4 つのサムネールがディスプレイパネルに表示できるようにサイズ設定されています。30 秒のビデオの時間セグメントは 3 つのサブセグメントに分割されています。次の表に、指定の時間サブセグメントに表示されるサムネールの内訳を示します。

ビデオサブセグメント 3 が、割り当てられているサムネールを超えて拡張されることはありません。また、サムネール 4、6、7 は、他のサムネールの 2 倍の時間パネルに表示されます。

ビューアでは次のロジックに従い、サイドパネルに表示できる数に基づいて表示するサムネールの数を決めています。

• サブセグメントの数 = 次のサブセグメントに切り上げ（サムネールの数／サムネールパネル内に表示されるスロットの数（ブラウザー画面のサイズに基づく））

  前述の表の例では、「9 サムネール / 4 スロット = 2.25 サブセグメント」（ビューアのロジックにより 2.25 を 3 に切り上げ）になります。

• サムネールの数 = 次のサムネールに切り上げ（サムネールの数／ビデオサブセグメントの数）

  前述の表の例では、「9 サムネール / 3 ビデオサブセグメント = 3 サムネール」になります。

• サブセグメントの表示時間 = ビデオの合計再生時間／ビデオサブセグメントの数

  前述の表の例では、「30 秒 / 3 ビデオサブセグメント = 各ビデオサブセグメントで 10 秒」の再生時間になります。

カルーセルバナーのビューアプリセットの作成に関する特別な考慮事項

カルーセルバナーのビューアプリセットを作成するときに、ホットスポットのスタイル変更は次のように実行できます。

Dynamic Mediaビューアプリセットのアクティベートとアクティベート解除

オーサーモードでビューアプリセットがアクティベートされているかどうかで、ユーザーインターフェイスに表示されるビューアプリセットが変わります。初期設定では、ビューアプリセットは作成後の​オン​になります。 プリセットをオフにすると、オーサーモードでは表示されなくなります。プリセットを公開する場合は、オン／オフに関係なく、常に公開されます。リストが非ワイルになった場合や、ビューアプリセットを使用できなくしたい場合は、ビューアプリセットを非アクティブ化できます。

Dynamic Mediaビューアプリセットをアクティベートまたはアクティベート解除するには:

1. AEMの左上隅にあるAEMロゴをタップし、左側のレールで​ツール/アセット/ビューアプリセット​をタップします。

2. ビューアプリセット​ページの​状態​列見出しの下で、切り替えボタンをタップして、ビューアプリセットをアクティブ化または非アクティブ化します。

   アクティベートされたビューアプリセットには、（青いボックスで）右側にトグルしたアイコンが示されます。アクティベート解除されたビューアプリセットには、（薄いグレーのボックスで）左側にトグルしたアイコンが示されます。

Dynamic Mediaビューアプリセットの公開

ビューアプリセットの状態をアクティブ化（または​オン​に切り替え）すると、Dynamic Mediaコンポーネントとインタラクティブメディアコンポーネント内、およびアセットを表示する際に表示されます。

ただし、ビューアプリセットを使用しているアセットを配信するには、そのビューアプリセットも公開する必要があります。URL を取得したりアセットのコードを埋め込むには、すべてのビューアプリセットをアクティベートし、かつ​公開する必要があります。Dynamic Media に付属しているすべての既製ビューアプリセットをアクティベートして公開する必要があります。自分で作成して追加したカスタムビューアプリセットは自動的にアクティベートされますが、やはり手動で公開する必要があります。

ビューアプリセットのアクティベートとアクティベート解除を参照してください。

アセットのプレビューも参照してください。

Dynamic Mediaビューアプリセットを公開するには:

1. AEMの左上隅にあるAEMロゴをタップし、左側のレールで​ツール/アセット/ビューアプリセット​をタップします。
2. 公開するビューアプリセットを 1 つ以上選択します。
3. ツールバーの​公開​アイコンをタップします。

Dynamic Mediaビューアプリセットの並べ替え

Dynamic Mediaビューアプリセットを並べ替えるには:

1. AEM の左上隅にある AEM ロゴをタップし、左側のパネルで​ツール（ハンマーアイコン）／Assets／ビューアプリセット​をタップします。
2. 「プリセットのタイトル」、「タイプ」、「公開」または「状態」をクリックして、その見出しの列でソートします。例えば、「タイプ」をクリックすると、ビューアプリセットのタイプが、アルファベット順で、またはアルファベットの逆の順序でソートされます。

Dynamic Mediaビューアプリセットの編集

事前に定義された標準提供ビューアプリセット​を編集するシナリオはサポートされていません。標準提供ビューアプリセットを編集すると、新しい名前で保存するように指示されます。

Dynamic Mediaビューアプリセットを編集するには:

1. AEMの左上隅にあるAEMロゴをタップし、左側のレールで​ツール/アセット/ビューアプリセット​をタップします。

2. ビューアプリセットのタイトルの左側にあるチェックボックスをオンにして、プリセットを選択します。

3. ツールバーの「編集」をタップします。

4. ビューアプリセットを編集​ページで、ビューアプリセットに対して適宜変更をおこないます。

5. 次のいずれかの操作を行います。

   • 「保存」をタップして変更内容を保存し、ビューアプリセットページに戻ります。​
   • 「キャンセル」をタップして変更内容をキャンセルし、ビューアプリセットページに戻ります。​

カスタムDynamic Mediaビューアプリセットの削除

作成して Dynamic Media に追加したビューアプリセットを削除できます。

カスタムDynamic Mediaビューアプリセットを削除するには:

1. AEMの左上隅にあるAEMロゴをタップし、左側のレールで​ツール/アセット/ビューアプリセット​をタップします。
2. ビューアプリセット​ページで、「プリセットのタイトル」をオンにし、ごみ箱​アイコンをタップします。
3. 「削除」をタップします。

アセットへの Dynamic Media ビューアプリセットの適用

アセットと選択したビューアを既に公開している場合は、ビューアプリセットの選択後に「URL」ボタンと「埋め込み」ボタンが表示されます。

Dynamic Mediaビューアプリセットをアセットに適用するには:

1. アセットを開き、ページの左上隅付近にあるドロップダウンメニュータップして、「ビューア」を選択します。

   メモ

   アセットと選択したビューアを既に公開している場合は、ビューアプリセットの選択後に「URL」ボタンと「埋め込み」ボタンが表示されます。

2. 左側のウィンドウからビューアプリセットを選択して、アセットに適用します。

   この URL をコピーして、他のユーザーと共有できます。

Dynamic Mediaビューアプリセットを使用するアセットの配信

ビューアプリセットの URL を取得する方法については、Web アプリケーションへの URL のリンクを参照してください。Web ページへのビデオビューアの埋め込みも参照してください。

AEM を WCM として使用している場合は、ビューアプリセットを使用するアセットをページに直接追加できます。ページへの Dynamic Media アセットの追加を参照してください。