ドキュメントAEM 6.5ユーザーガイド

ビューアプリセットの管理 managing-viewer-presets

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • ユーザー
  • 管理者

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

HTML5 ビューアーのプリセットを独自に作成およびカスタマイズする方法については、Adobe Dynamic Media の HTML5 Viewer SDK API ドキュメント ​を参照してください。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

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

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

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

閲覧者のキーボードアクセシビリティ keyboard-accessibility-for-viewers

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

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

ビューアプリセットの管理 managing-viewer-presets-1

Adobe Experience Manager でビューアプリセットの追加、編集、削除、公開、非公開およびプレビューを実行できます。そのためには、ツール（ハンマーアイコン）／アセット／ビューアプリセット ​を選択します。

6_5_tools-assets-viewerpresets

NOTE
アセットの詳細表示で「閲覧者」を選択すると、デフォルトでビューアのプリセットが 15 個表示されます。この制限は増やすことができます。表示されるビューアプリセットの数を増やすを参照してください。

レスポンシブデザイン Web ページのビューアサポート viewer-support-for-responsive-designed-web-pages

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

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

NOTE
既製のすべてのビューアを、初めて使用する前にすべて公開します。
[ビューアプリセットの公開]を参照してください。（#publishing-viewer-presets）

ビューアプリセットのシステム互換性 viewer-preset-system-compatibility

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

  • デスクトップ
  • Apple iPhone
  • Apple iPad
  • Android™ スマートフォン
  • Android™ タブレット
  • ビデオについては、Blackberry® と Windows Phone 用に MP4 の再生が追加でサポートされています。

ビューアプリセットのリッチメディアタイプ rich-media-types-for-viewer-presets

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

カルーセルセット
ホットスポットや画像マップ、またはその両方が 2 つ以上の一連の画像に追加されます。お客様は画像を左右にパンし、画像のホットスポットをクリックして追加の詳細情報を入力したり、web サイトのテゴリー、ホーム、ランディングページから直接購入したりすることができます。
ディメンション
3D シーンが表示され、カメラの回転、パン、ズーム、中心の変更が可能です。
フライアウトズーム

ズームされた領域の 2 つ目の画像を元の画像の横に表示します。使用できるコントロールはありません。表示する領域に選択範囲を移動します。

このビューアの完全な帯域幅使用量を判断する際には、メイン画像とフライアウト画像の両方がビューアに提供されることを考慮してください。 メイン画像のサイズ（ステージの幅と高さ）とズーム率によって、フライアウト画像のサイズが決まります。フライアウトのファイルサイズが大きくなりすぎないようにするには、次の 2 つの値のバランスを取ります。メイン画像のサイズが大きい場合は、ズーム率の値を小さくします。（フライアウトの幅と高さによってフライアウトウィンドウのサイズが決まりますが、ビューアに提供されるフライアウト画像のサイズは決まりません。）

例えば、メイン画像のサイズが 350 x 350 ピクセルで、ズーム率が 3 の場合、生成されるフライアウト画像は 1050 x 1050 ピクセルになります。メイン画像のサイズが 300 x 300 ピクセルで、ズーム率が 4 の場合、フライアウト画像は 1200 x 1200 ピクセルになります。 JPEG 品質の設定（推奨設定は 80～90）によって、ファイルサイズを大幅に小さくすることができます。推奨ズーム率は、メイン画像のサイズに応じて 2.5～4 です。

インラインズーム
元のビューア内でズームされた領域の画像を表示します。使用するコントロールはありません。つまり、ユーザーは表示したい領域に選択範囲を移動します。
画像セット
画像セットビューアでは、サムネール画像を選択してアイテムの様々なビューやカラーを表示できます。このビューアは、画像を接近して確認するためのズームツールも提供しています。
インタラクティブ画像
ユーザーがクリックして追加の詳細情報を入力したり、web サイトのカテゴリ、ホームまたはランディングページから直接購入したりするためのホットスポットを画像の一部に追加します。
インタラクティブビデオ
ユーザーがクリックして追加の詳細情報を入力したり、web サイトのカテゴリ、ホームまたはランディングページから直接購入したりできるサムネールが、ビデオ内のタイムラインセグメントに追加されます。
混在メディア
1 つのビューアで異なる複数のタイプのメディアを表示します。スピンセット、画像セット、画像、ビデオを使用できます。
パノラマ画像

パノラマ画像およびパノラマ VR ビューアでは球状のパノラマ画像をレンダリングして、部屋、プロパティ、場所、風景などの 360 度の視聴エクスペリエンスにユーザーを没入させます。

アップロードした画像が球パノラマと見なされるには、次のいずれかまたは両方を満たす必要があります。

  • アスペクト比が 2:1 です。
  • キーワード equirectangular、または spherical と panorama、または spherical と panoramic でタグ付けされている必要があります。タグの使用を参照してください。

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

重要：このビューアを使用できるのは、Dynamic Media - Scene7 モードのみです。

スマート切り抜きビデオ
このビューアを使用して、ビデオの焦点を自動的に検出し、切り抜きます。
スピンセット
ユーザーがオブジェクトを回転させて、様々な面や角度を確認できるように、複数の画像ビューを提供します。
360 ビデオ

360/VR ビデオビューアを使用すると、エクイレクタングラー形式でビデオをレンダリングして、室内、物件、場所、風景、医療処置などの臨場感あふれる表示を実現することができます。

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

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

重要：このビューアを使用できるのは、Dynamic Media - Scene7 モードのみです。

ビデオ
プログレッシブまたはアダプティブビットレートストリーミングを使用してビデオを再生します。アダプティブビットレートストリーミングはデバイスと帯域幅を自動的に検出し、適切な形式で適切な品質のビデオを配信します。
垂直方向ズーム

垂直ズームビューアでは、製品画像の視聴エクスペリエンスを最大化して、ユーザーに製品を最適に表示できます。スウォッチの垂直方向の位置では、次の操作を行います。

  • スクロールしなくてもスウォッチが表示されます。
    水平方向のスウォッチの場合、ユーザーのデスクトップ画面サイズによっては、ユーザーがページを下にスクロールするまでスウォッチが見えないことがあります。ビューアにスウォッチを垂直方向に配置すると、ユーザの画面サイズに関係なくスウォッチが表示されます。
  • メイン画像のサイズを最大化する。
    水平方向のスウォッチの場合、確実に表示されるようにページ上にスペースを確保しておく必要があります。この配置によって、メイン画像のサイズが小さくなります。ただし、垂直方向のスウォッチレイアウトの場合は、こうしたスペースを確保する必要がありません。そのため、メイン画像のサイズを最大化できます。
ズーム
ユーザーが領域を選択してズームインできます。ユーザーは、コントロールを選択して、ズームイン、ズームアウトおよび画像をデフォルトのサイズにリセットすることができます。

標準提供のビューアのプリセットの一覧 list-of-out-of-the-box-viewer-presets

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

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

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

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

NOTE
Dynamic Media の標準提供のビューアプリセットはすべてアクティベート済み（オン）になっていますが、それらを公開する必要があります。
ビューアプリセットの公開を参照してください。
作成および追加した新しいすべてのビューアプリセットは、アクティベートされ公開されている必要があります。
ビューアプリセットのアクティベートとアクティベート解除とビューアプリセットの公開を参照してください。
ビューアプリセットのタイトル
タイプ
CSS ファイル名
Carousel_Dotted_dark
Carousel_Set
html5_carouselviewer_dotted_dark.css
Carousel_Dotted_light
Carousel_Set
html5_carouselviewer_dotted_light.css
Carousel_Numeric_dark
Carousel_Set
html5_carouselviewer_numeric_dark.css
Carousel_Numeric_light
Carousel_Set
html5_carouselviewer_numeric_light.css
ディメンショナル
ディメンショナル
html5_dimensionalviewer.css
フライアウト
Flyout_Zoom
html5_flyoutviewer.css
ImageSet_dark
画像セット
html5_zoomviewer_dark.css
ImageSet_light
画像セット
html5_zoomviewer_light.css
InlineMixedMedia_dark
Mixed_Media
html5_inlinemixedmediaviewer_dark.css
InlineMixedMedia_light
Mixed_Media
html5_inlinemixedmediaviewer_light.css
InlineZoom
Flyout_Zoom
html5_inlinezoomviewer.css
MixedMedia_dark
Mixed_Media
html5_mixedmediaviewer_dark.css
MixedMedia_light
Mixed_Media
html5_mixedmediaviewer_light.css
PanoramicImage
Panoramic_Image
html5_panoramicimage.css
PanoramicImageVR
Panoramic_Image
html5_panoramicimage.css
Shoppable_Banner
Interactive_Image
html5_interactiveimage.css
Shoppable_Video_dark
Interactive_Video
html5_interactivevideoviewer_dark.css
Shoppable_Video_light
Interactive_Video
html5_interactivevideovewer_light.css
SmartCropVideo
Smart_Crop_Video
html5_smartcropvideoviewer.css
SmartCropVideo_social
Smart_Crop_Video
html5_smartcropvideoviewersocial.css
SpinSet_dark
Spin_Set
html5_spinviewer_dark.css
SpinSet_light
Spin_Set
html5_spinviewer_light.css

ビデオ

（クローズドキャプションのサポートを含む）

ビデオ
html5_videoviewer.css

Video360_social

（基本的なビデオ再生制御を含んでいます。ビデオレンダリングはステレオモードで行われます。手動の視点制御はオフですが、ジャイロスコープ制御はオンです。ソーシャルメディア機能はありません）

ビデオ 360
html5_video360viewersocial.css

Video360VR

（VR グラスを使用するエンドユーザー向けに設計。基本的なビデオ再生コントロールとソーシャルメディア機能を含む）

ビデオ 360
html5_video360viewer.css

Video_social

（クローズドキャプションおよびソーシャルメディアのサポートを含む）

ビデオ
html5_videoviewersocial.css
Zoom_dark
ズーム
html5_basiczoomviewer_dark.css
Zoom_light
ズーム
html5_basiczoomviewer_light.css
ZoomVertical_dark
Vertical_Zoom
html5_zoomverticalviewer_dark.css
ZoomVertical_light
Vertical_Zoom
html5_zoomverticalviewer_light.css

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

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

ジェスチャー
フライアウトズーム
ズーム
スピン
ドラッグ
パン
パン
パン
選択
フライアウトウィンドウを表示
ユーザインターフェイスを表示または非表示
ユーザインターフェイスを表示または非表示
ダブルクリック
適用なし
ズームインまたはリセット
ズームインまたはリセット
ピンチオープン
適用なし
ズームイン（iOS、Android™ 3x のみ）
ズームイン（iOS、Android™ 3x のみ）
ピンチクローズ
適用なし
ズームアウト（iOS、Android™ 3x のみ）
ズームアウト（iOS、Android™ 3x のみ）
スワイプ
スウォッチバーをスクロール
画像をスクロール
スピン
フリック
スウォッチバーをスクロール
画像をスクロール
スピン

表示されるビューアプリセットの数を増やす increasing-the-number-of-viewer-presets-that-display

Experience Manager では、詳細ビュー／ビューア ​でアセットを表示すると、さまざまなビューアのプリセットが表示されます。表示されるビューアの数を増減できます。

表示されるビューアプリセットの数を増やす：

  1. CRXDE Lite（https://localhost:4502/crx/de）に移動します。

  2. 次の場所にあるビューアプリセットリストノードに移動します。

    /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist

    chlimage_1-221

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

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

    chlimage_1-222

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

  6. 「すべて保存」を選択します。

ビューアプリセットを作成する creating-a-new-viewer-preset

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

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

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

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

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

ビューアプリセットを作成するには：

  1. Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールで​ ツール（ハンマーのアイコン）／Assets／ビューアプリセット ​を選択します。

    6_5_viewerpresets

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

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

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

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

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

  5. ビューアプリセットエディターページで、「外観」タブを選択します。

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

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

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

      ビューアプリセットタイプごとの CSS スタイル設定プロパティについては、『ビューアリファレンスガイド』の「<viewer name> ビューアのカスタマイズ」のヘルプトピックを参照してください。例えば、Mixed_Media タイプのビューアプリセットを作成している場合、プロパティのリストと各プロパティの説明については、混在メディアビューアのカスタマイズを参照してください。

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

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

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

    note note
    NOTE
    RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニューの下の「CSS を表示／非表示」を選択します（必要に応じて、ビジュアルエディターを上にスクロールして表示します）。
    Visual Editor と同様に、CSS でプロパティを直接変更すると、ビューアサンプルにその効果がすぐに反映されます。また、ビジュアルエディターでは、同じプロパティが同時に自動的に更新されます。そのため、生の CSS エディターまたはビジュアルエディターを使用することも、両方を区別なく使用することもできます。
    note note
    NOTE
    ボタンのアートワークの場合は、2 倍画像を選択し、高解像度のアートワークをアップロードします。インタラクティブ画像やショッパブルバナーを操作する場合は、すぐに使える様々なホットスポットボタンから選択することもできます。

  7. （オプション）ビューアプリセットを編集ページの最上部の近くにある「デスクトップ」、「タブレット」または「電話」を選択して、異なる種類のデバイスや画面のビジュアルスタイルを個別に定義します。

  8. ビューアプリセットエディターページで、「ビヘイビアー」タブを選択します。または、任意のビジュアル要素をビューアで選択して設定することもできます。
    例えば、 VideoPlayer タイプの場合、修飾子／再生 ​で、アダプティブビットレートストリーミングの 3 つのオプションの中から 1 つを選択できます。

    • dash - ビデオは DASH としてのみストリーミングされます。ただし、Safari または iOS デバイスでは、代わりに hls タイプを選択する必要があります。

    • hls - ビデオは HLS としてのみストリーミングされます。

    • auto - ベストプラクティスです。DASH ストリームおよび HLS ストリームの作成では、ストレージの最適化が図られています。そのため、再生タイプには常に auto を選択することを推奨します。ビデオは DASH、HLSまたはプログレッシブで、次の再生順でストリーミングされます。

      • ブラウザーが DASH をサポートしている場合は、最初に DASH ストリーミングが使用されます。
      • ブラウザーが DASH をサポートしていない場合は、次に HLS ストリーミングが使用されます。
      • ブラウザーが DASH も HLS もサポートしていない場合は、最後にプログレッシブ再生が使用されます。
    note note
    NOTE
    dash ​オプションを表示して使用するには、まずアドビテクニカルサポートでアカウントを有効にする必要があります。詳しくは、「アカウントでの DASH の有効化」を参照してください。

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

    ビジュアルエディターの多くのコンポーネントには、詳細な説明が関連付けられています。これらの説明は、コンポーネントを展開して関連するパラメーターを表示したときに、青いボックス内に表示されます。

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

    note note
    NOTE
    スマートフォンやタブレットなどのタッチデバイスを使用している場合
    テキストフィールドに値を入力後、ユーザーインターフェイス内を選択すると、変更内容が送信され、仮想キーボードが閉じられます。Enter キーを押した場合は、何も実行されません。

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

  11. 新しいビューアプリセットを公開して、web サイトで使用できるようにします。

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

    note important
    IMPORTANT
    アダプティブビットレートストリーミングのプロファイルを使用する古いビデオでは、ビデオアセットを再処理するまで、その URL で通常通り HLS ストリーミングを使用して再生を行います。再処理した後も同じ URL で引き続き機能しますが、この時点で DASH と HLS の​ 両方 ​のストリーミングが有効になっています。

インタラクティブなビューアのプリセットを作成するための特別な考慮事項 special-considerations-for-creating-an-interactive-viewer-preset

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

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

ディスプレイモード
説明
セグメント

Segment は、既製のインタラクティブビデオビューアプリセット Shoppable_Video_light と Shoppable_Video_dark および自身で作成するすべてのインタラクティブビデオビューアプリセットのデフォルトのディスプレイモードです。

このモードでは、ビデオセグメントに割り当てられているサムネールの数がディスプレイパネルに表示されるスポットの数よりも少ない場合、次または前のサブセグメントのサムネールが取り込まれて、パネル内の空白部分が埋められることは ありません。つまり、特定のビデオセグメントに割り当てられたスウォッチの表示が保持されます。

連続

continuous ディスプレイモードでは、セグメント内のサムネールの数がパネルに表示される数より少ない場合、ビューアには次のセグメントからのサムネールの表示が自動的に含まれます。または、最後のサムネールが表示されている場合、ビューアには前のセグメントのサムネールの表示が自動的に含まれます。

このトピックのビデオは continuous ディスプレイモードの一例です。

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

インタラクティブなビデオビューアのサムネイルの自動スクロールは、選択した表示モードとは関係なく機能します。

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

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

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

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

ビデオサブセグメント
サブセグメント時間（秒単位）
パネルに表示されるサムネイル
1
0～10
1、2、3、4
2
10～20
4、5、6、7
3
20～30
6、7、8、9

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

ビューアが、表示できる位置の数に基づいて、パネルに表示するサムネイルの数を決定するロジックは次のとおりです。

  • サブセグメントの数 = 次のサブセグメントに切り上げ（サムネールの数／サムネールパネル内に表示されるスロットの数（ブラウザー画面のサイズに基づく））前述の表の例では、「9 サムネール / 4 スロット = 2.25」になります（ビューアのロジックにより 2.25 が 3 サブセグメントに切り上げられます）。

  • サムネールの数 = 次のサムネールに切り上げ（サムネールの数／ビデオサブセグメントの数）前述の表の例では、「9 サムネール / 3 ビデオサブセグメント = 3 サムネール」になります。

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

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

説明
アクション
ホットスポットアイコン
ホットスポットに使用するアイコンを変更する
ホットスポットアイコンの画像を変更するには、「外観」タブで、「選択したコンポーネント」の「ImageMapEffect」を選択します。「アイコン」で「背景」を選択し、「画像」フィールドで目的に背景画像に移動します。

ビューアプリセットのアクティベートまたはアクティベート解除 activating-or-deactivating-viewer-presets

ユーザーインターフェイスで使用できるビューアのプリセットは、どれがオーサーモードでアクティブになっているかによって異なります。デフォルトでは、ビューアのプリセットは作成後に「オン」になります。プリセットをオフにすると、オーサーモードでは表示されなくなります。プリセットを公開する場合は、オン／オフに関係なく、常に公開されます。リストの項目が多すぎる場合や、特定のビューアプリセットを使用できないようにする場合は、ビューアプリセットのアクティベートを解除することもできます。

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

  1. Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールで​ ツール（ハンマーのアイコン）／アセット／ビューアプリセット ​を選択します。

  2. ビューアプリセットページの「状態」列ヘッダーの下で、ビューアプリセットのアクティベートとアクティベート解除の切り替えアイコンを選択します。

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

ビューアプリセットの公開 publishing-viewer-presets

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

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

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

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

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

  1. Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールで​ ツール（ハンマーのアイコン）／アセット／ビューアプリセット ​を選択します。
  2. 公開するビューアプリセットを 1 つ以上選択します。
  3. ツールバーの​ 公開 ​アイコンを選択します。

ビューアプリセットの並べ替え sorting-viewer-presets

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

ビューアプリセットの編集 editing-viewer-presets

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

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

  1. Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールで​ ツール（ハンマーのアイコン）／アセット／ビューアプリセット ​を選択します。

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

  3. ツールバーの「編集」を選択します。

  4. ビューアプリセットエディター ​ページで、「外観」タブと「動作」タブのオプションを使用して、必要な変更をビューアプリセットに加えます。

    「外観」タブで、ビューアプリセットエディターページの左上隅近くにある「デスクトップ」、「タブレット」、「電話」のいずれかを選択して、アセットの表示モードを変更します。

  5. ページの右上隅近くで、次のいずれかの操作を行います。

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

カスタムビューアプリセットの削除 deleting-custom-viewer-presets

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

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

  1. Experience Manager の左上隅にある Experience Manager ロゴを選択し、左のレールで「ツール」（ハンマーのアイコン）／アセット／ビューアプリセット ​を選択します。
  2. ビューアプリセットページで、「プリセットのタイトル」のチェックボックスをオンにして、ごみ箱 ​アイコンを選択します。
  3. 「削除」を選択します。

アセットへのビューアプリセットの適用 applying-a-viewer-preset-to-an-asset

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

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

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

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

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

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

ビューアプリセットを使用したアセットの配信 delivering-assets-with-viewer-presets

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

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2