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

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

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

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

メモ

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

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

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

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

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

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、または spherical および panorama、または 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 デバイスでサポートされているモバイルビューアジェスチャーを次の表に示します。

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

ドラッグ

パン

パン

パン

Select

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

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

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

ダブルタップ

適用なし

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

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

ピンチオープン

適用なし

ズームイン(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. Experience Managerの左上隅にあるExperience Managerロゴを選択し、左側のレールで​ツール(ハンマーのアイコン)/アセット/ビューアプリセット​を選択します。

    6_5_viewerpresets

  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ディスプレイモードを選択できます。

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

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. Experience Managerの左上隅にあるExperience Managerロゴを選択し、左側のレールで​ツール(ハンマーのアイコン)/アセット/ビューアプリセット​を選択します。

  2. ビューアプリセットページの​状態​列見出しで、ビューアプリセットのアクティベートとアクティベート解除の切り替えを選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Experience Managerの左上隅にある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 アセットの追加を参照してください。

このページ