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

[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}

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

最終更新日： 2026年9月29日
  • 適用対象：
  • Experience Manager as a Cloud Service

作成対象：

  • ユーザー

ビューアプリセットは、ユーザーがコンピューター画面とモバイルデバイスでリッチメディアアセットをどのように表示するかを決定する設定のコレクションです。 管理者の場合は、ビューアプリセットを作成できます。 ビューア設定オプションの配列に対して設定を使用できます。 例えば、ビューアの表示サイズやズーム動作を変更できます。

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

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

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

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

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

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

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

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

65tools-assets-viewerpresets

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

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

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

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

NOTE
あらかじめ用意されている標準のビューアはすべて、使用する前に公開します。
ビューアプリセットの公開を参照してください。

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

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

  • デスクトップ
  • Apple iPhone
  • Apple iPad
  • Android™ スマートフォン
  • Android™ タブレット

ビューアプリセットのリッチメディアタイプ 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 コンポーネントのパノラマアセットに適用されます。

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

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

フラットディスプレイでの再生時に、ユーザーは視野角を制御できます。 モバイルデバイスでの再生では、デバイスビルトインのジャイロスコープ制御が使用されます。

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

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

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

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

標準提供のビューアのプリセットの一覧 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
フライアウト
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
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

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

表示されるビューアプリセットの数を増減させるには：

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

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

    chlimage1-221

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

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

    chlimage1-222

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

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

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

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

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

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

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

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

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

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

    65viewerpresets

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

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

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

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

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

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

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

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

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

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

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

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

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

    note
    NOTE
    RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニューの下の「CSS を表示／非表示」を選択します（必要に応じて、ビジュアルエディターを上にスクロールして表示します）。
    Visual Editor と同様に、CSS でプロパティを直接変更すると、ビューアサンプルにその効果がすぐに反映されます。 また、ビジュアルエディターでは、同じプロパティが同時に自動的に更新されます。 そのため、生の CSS エディターまたはビジュアルエディターを使用することも、両方を区別なく使用することもできます。
    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 もサポートしていない場合は、最後にプログレッシブ再生が使用されます。

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

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

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

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

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

  11. 新しいビューアプリセットを公開します。 生成される URL を 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. Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールで​ツール（ハンマーのアイコン）／アセット／ビューアプリセット​を選択します。
  2. ビューアプリセットページで、「プリセットのタイトル」のチェックボックスをオンにして、ごみ箱​アイコンを選択します。
  3. 「削除」を選択します。

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

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

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

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

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

  2. アセットに適用するビューアプリセットを左側のパネルから選択します。

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

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

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

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

recommendation-more-help
experience-manager-cloud-service-help-main-toc