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

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

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 ビューアリファレンスガイドも参照してください。

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

メモ

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

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

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

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

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

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

6_5_tools-assets-viewerpresets

メモ

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

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

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

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

メモ

標準提供ビューアを使用するには、まずすべて公開する必要があります。
[ビューアプリセットの公開]を参照してください。(#publishing-viewer-presets)

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

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

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

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

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

カルーセルセット

ホットスポットや画像マップ、またはその両方が 2 つ以上の一連の画像に追加されます。お客様は画像を左右にパンし、画像のホットスポットをクリックして追加の詳細情報を入力したり、web サイトのテゴリー、ホーム、ランディングページから直接購入したりすることができます。

ディメンション

3D シーンが表示され、カメラの回転、パン、ズーム、中心の変更が可能です。

フライアウトズーム

オリジナル画像の横に、第 2 のズームされた領域の画像を表示します。使用できるコントロールはありません。ユーザーは表示したい領域上に選択範囲を動かします。

このビューアの全体的な帯域幅使用量を算出する場合は、メイン画像とフライアウト画像の両方がビューアに配信されることを考慮してください。メイン画像のサイズ(ステージの幅と高さ)とズーム率によってフライアウト画像のサイズが決まります。フライアウトファイルのサイズが大きくなりすぎないようにするには、これら 2 つの値のバランスを取る必要があります。つまり、メイン画像のサイズが大きい場合は、ズーム率の値を小さくします。(フライアウトの幅と高さによってフライアウトウィンドウのサイズが決まりますが、ビューアに配信されるフライアウト画像のサイズが決まるわけではありません)。

例えば、メイン画像のサイズが 350 x 350 ピクセルで、ズーム率が 3 の場合、生成されるフライアウト画像は 1,050 x 1,050 ピクセルになります。メインの画像サイズが 300 x 300 ピクセルで、ズーム率が 4 の場合、フライアウト画像は 1,200 x 1,200 ピクセルになります。JPEG 画質の設定(推奨設定は 80~90)によっては、ファイルサイズを大幅に削減できます。推奨されるズーム率は、メイン画像のサイズに応じて 2.5~4 となります。

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

パノラマ画像ビューアと PanoramicVR ビューアは、球パノラマ画像をレンダリングして、室内、物件、場所、風景などをあらゆる角度から見ることができる臨場感あふれる体験をユーザーに提供します。

アップロードする画像が球パノラマとして適格となるには、以下の一方または両方の条件を満たしている必要があります。

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

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

重要:このビューアは Dynamic Media(Scene7 モード)でのみ使用できます。

スマート切り抜きビデオ

このビューアを使用して、ビデオの焦点を自動的に検出し、切り抜きます。

スピンセット ユーザーがオブジェクトを回転させて、様々な面や角度を確認できるように、複数の画像ビューを提供します。
360 ビデオ

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

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

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

重要:このビューアは Dynamic Media(Scene7 モード)でのみ使用できます。

ビデオ

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

垂直方向ズーム

垂直方向ズームビューアを使用すると、製品画像の閲覧エクスペリエンスを最大限に高めて、ユーザーにとって最適な製品の表示を実現できます。スウォッチを垂直方向に配置することで、次のような利点があります。

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

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

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

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

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

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

メモ

Dynamic Media の標準提供のビューアプリセットはすべてアクティベート済み(オン)になっていますが、それらを公開する必要があります。
ビューアプリセットの公開を参照してください。

作成および追加した新しいすべてのビューアプリセットは、アクティベートされ公開されている必要があります。
ビューアプリセットのアクティベートとアクティベート解除ビューアプリセットの公開を参照してください。

ビューアプリセットのタイトル タイプ CSS ファイル名
Carousel_Dotted_dark カルーセルセット html5_carouselviewer_dotted_dark.css
Carousel_Dotted_light カルーセルセット html5_carouselviewer_dotted_light.css
Carousel_Numeric_dark カルーセルセット html5_carouselviewer_numeric_dark.css
Carousel_Numeric_light カルーセルセット html5_carouselviewer_numeric_light.css
ディメンショナル ディメンショナル html5_dimensionalviewer.css
Flyout フライアウトズーム html5_flyoutviewer.css
ImageSet_dark 画像セット html5_zoomviewer_dark.css
ImageSet_light 画像セット html5_zoomviewer_light.css
InlineMixedMedia_dark 混在メディア html5_inlinemixedmediaviewer_dark.css
InlineMixedMedia_light 混在メディア html5_inlinemixedmediaviewer_light.css
InlineZoom フライアウトズーム html5_inlinezoomviewer.css
MixedMedia_dark 混在メディア html5_mixedmediaviewer_dark.css
MixedMedia_light 混在メディア html5_mixedmediaviewer_light.css
PanoramicImage パノラマ画像 html5_panoramicimage.css
PanoramicImageVR パノラマ画像 html5_panoramicimage.css
Shoppable_Banner インタラクティブ画像 html5_interactiveimage.css
Shoppable_Video_dark インタラクティブビデオ html5_interactivevideoviewer_dark.css
Shoppable_Video_light インタラクティブビデオ html5_interactivevideovewer_light.css
SmartCropVideo Smart_Crop_Video html5_smartcropvideoviewer.css
SmartCropVideo_social Smart_Crop_Video html5_smartcropvideoviewersocial.css
SpinSet_dark スピンセット html5_spinviewer_dark.css
SpinSet_light スピンセット html5_spinviewer_light.css

ビデオ

(字幕サポートを含む)

ビデオ html5_videoviewer.css

Video360_social

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

ビデオ 360 html5_video360viewersocial.css

Video360VR

(仮想現実メガネを使用するエンドユーザー向けに設計されています。基本的なビデオ再生制御とソーシャルメディア機能を含んでいます)

ビデオ 360 html5_video360viewer.css

Video_social

(字幕とソーシャルメディアのサポートを含む)

ビデオ html5_videoviewersocial.css
Zoom_dark
ズーム
html5_basiczoomviewer_dark.css
Zoom_light
ズーム html5_basiczoomviewer_light.css
ZoomVertical_dark
垂直方向ズーム html5_zoomverticalviewer_dark.css
ZoomVertical_light 垂直方向ズーム html5_zoomverticalviewer_light.css

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

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

ジェスチャー フライアウトズーム ズーム スピン

ドラッグ

パン

パン

パン

選択

フライアウトウィンドウを表示

ユーザーインターフェイスを表示または非表示

ユーザーインターフェイスを表示または非表示

ダブルタップ

適用なし

ズームインまたはリセット

ズームインまたはリセット

ピンチオープン

適用なし

ズームイン(iOS、Android™ 3x のみ)

ズームイン(iOS、Android™ 3x のみ)

ピンチクローズ

適用なし

ズームアウト(iOS、Android™ 3x のみ)

ズームアウト(iOS、Android™ 3x のみ)

スワイプ

スイッチバーをスクロール

画像をスクロール

スピン

フリック

スイッチバーをスクロール

画像をスクロール

スピン

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

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. すべて保存」を選択します。

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

ビューアプリセットを作成しておくと、アセットの表示やアセットとの対話のための様々な設定を適用できます。ただし、ビューアプリセットを作成する必要はありません。デフォルトの、すぐに使えるビューアプリセットが既に 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 が正常に機能するように、エラーを上書きしようとします。

    メモ

    RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニューの下の「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 ディスプレイモードを選択できます。

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

Segment は、既製のインタラクティブビデオビューアプリセット Shoppable_Video_lightShoppable_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」を選択します。「アイコン」で「背景」を選択し、「画像」フィールドで目的に背景画像に移動します。

ビューアプリセットのアクティベートまたはアクティベート解除

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

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

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

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

    アクティベートされたビューアプリセットには、右側の青いボックスに切替スイッチが表示されます。アクティベート解除されたビューアプリセットには、左側の薄いグレーのボックスに切替スイッチが表示されます。

ビューアプリセットのパブリッシュ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    メモ

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

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

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

ビューアプリセットを使用したアセットの配信

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

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

このページ