現在表示中:

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

独自の HTML5 ビューアプリセットの作成とカスタマイズについて詳しくは、Adobe Scene7 HTML5 ビューア SDK を参照してください。このガイドは、、Adobe Developer Connection からダウンロードできます。

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

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

注意:

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

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

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

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

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

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

注意:

既製のビューアを使用するには、まずすべて公開する必要があります。
ビューアプリセットの公開を参照してください。

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

ダイナミックメディアに付属するすべての標準提供ビューアプリセットは、次のシステムと完全に互換します。

  • デスクトップ
  • Apple iPhone
  • Apple iPad
  • Android Smartphone
  • Android Tablet
  • ビデオについては、BlackberryWindows Phone で MP4 の再生が追加でサポートされています。

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

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

カルーセルセット

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

フライアウトズーム

オリジナル画像の横に、第 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 つのビューアで異なる複数のタイプのメディアを表示します。スピンセット、画像およびビデオを含めることができます。
スピンセット ユーザーがオブジェクトを回転させて、様々な面や角度を確認できるように、複数の画像ビューを提供します。
ビデオ

アダプティブビットレートストリーミングが自動的にデバイスと帯域幅を検出し、正しい画質のビデオを正しい形式で再生します。

ズーム ユーザーが領域をクリックしてズームインできます。ユーザーは、ズームイン、ズームアウトおよび画像をデフォルトのサイズにリセットするためのコントロールをクリックできます。

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

次の表に、ダイナミックメディアに付属するすべての事前定義済みの標準提供ビューアプリセットについて示します。

Scene7 ビューアリファレンスライブラリサンプルも参照してください。

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

Scene7 ビューアリファレンスのリリースノートを参照してください。

注意:

ダイナミックメディアの既製のすべてのビューアプリセットは既にアクティベートされて(オンになって)いますが、それらを公開する必要があります。
ビューアプリセットの公開を参照してください。

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

ビューアプリセットのタイトル 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
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
Shoppable_Banner インタラクティブな画像 html5_interactiveimage.css
Shoppable_Video_dark インタラクティブなビデオ html5_interactivevideoviewer_dark.css
Shoppable_Video_light インタラクティブなビデオ html5_interactivevideovewer_light.css
SpinSet_dark スピンセット html5_zoomviewer_dark.css
SpinSet_light スピンセット html5_zoomviewer_light.css

Video

(字幕サポートを含む)

ビデオ html5_videoviewer.css

Video_social

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

ビデオ html5_videoviewersocial.css
Zoom_dark
ズーム
html5_basiczoomviewer_dark.css
Zoom_light
ズーム html5_basiczoomviewer_light.css

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

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

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

ドラッグ

パン

パン

パン

タップ

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

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

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

ダブルタップ

適用なし

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

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

ピンチオープン

適用なし

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

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

ピンチクローズ

適用なし

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

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

スワイプ

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

画像をスクロール

スピン

フリック

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

画像をスクロール

スピン

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

ビューアプリセットの作成では、これらの設定を適用してアセットを表示およびアセットと対話できます。新しいビューアプリセットを作成する必要はありません。必要な場合は、AEM Assets に付属の既製のビューアプリセットタイプを使用できます。

ビューアプリセットを保存すると、そのステータスがビューアプリセットページで自動的にオンに設定されます。この状態は、画像やビデオをプレビューするときは常にダイナミックメディアコンポーネントとインタラクティブなメディアコンポーネントに表示されることを意味します。

注意:

URL を取得またはアセットにコードを埋め込むには、既製のものを含むすべてのビューアプリセットをアクティベートして公開する必要があります。
ビューアプリセットのアクティベートとアクティベート解除ビューアプリセットの公開を参照してください。

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

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

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

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

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

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

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

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

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

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

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

  6. 次のいずれかの操作をおこないます。

    • 選択したコンポーネント」プルダウンメニューで、ビジュアルデザインをカスタマイズするコンポーネントを選択します。

      Visual Editor を使用すると、特定のプロパティがスタイルに与える効果を確認できます。プロパティを設定または調整すると、ビューアにその効果がすぐに反映されます。

      各タイプのビューアプリセットの CSS スタイル設定プロパティについては、ビューアリファレンスガイドの HTML5 ビューアごとの HTML5 のカスタマイズに関する節で説明します。例えば、タイプが混在メディアのビューアプリセットを作成している場合、プロパティのリストと各プロパティの説明についてはHTML5 混在メディアビューアのカスタマイズを参照してください。

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

    注意:

    ビューアプリセットの CSS を直接編集する場合は、選択したコンポーネントプルダウンメニュー(表示するには Visual Editor を上にスクロールする必要がある場合があります)の下の「CSS を表示/非表示」をタップします。

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

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

  8. ビューアプリセットを編集ページで、「動作」タブをタップします。

     

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

    選択したコンポーネントの各パラメーターに関する詳細な説明を確認するには、パラメーター名の上にポインターを重ねます。黒丸の情報アイコンが名前の右側に表示されたら、そのアイコンの上にポインターを重ねます。

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

    注意:

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

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

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

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

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

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

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

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

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

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

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

連続

連続ディスプレイモードでは、セグメント内のサムネールの数がパネルに表示可能な数よりも少ない場合は、次のセグメント(最後のサムネールが表示されている場合は、前のセグメント)のサムネールが自動的に表示されます。

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

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

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

インタラクティブなビデオのビューアプリセットを作成または編集するときは、「動作」タブから自動スクロールにアクセスします。選択したコンポーネントドロップダウンメニューの「動作」タブで、「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

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

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

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

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

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

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

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

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

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

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

注意:

ビューアプリセットのオンとオフの切り替えは、ダイナミックメディアコンポーネントとインタラクティブなメディアコンポーネント内、およびアセットを表示する際に表示されるかどうかに影響します。ただし、ビューアプリセットを使用して URL を生成およびアセットにコードを埋め込むには、ビューアプリセットを公開する必要があります。

ダイナミックメディアの既製のすべてのビューアプリセットは既にアクティベートされて(オンになって)いますが、それらを公開する必要があります。ビューアプリセットの公開を参照してください。

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

 

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

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

  2. 各ビューアプリセットには、隣に「オン」ボタンがあります。オフにするには、「オン」をクリックします。ボタンが「オフ」と表示されます。ビューアプリセットをもう一度アクティベートするには、「オフ」をクリックします。再度ボタンに「オン」と表示されます。

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

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

ただし、ビューアプリセットを使用してアセットを配信するには、ビューアプリセットを公開する必要があります。 URL を取得またはアセットにコードを埋め込むには、すべてのビューアプリセットをアクティベートして公開する必要があります。

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

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

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

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

  2. 公開するビューアプリセットを 1 つ以上選択します。

  3. ツールバーの発行アイコンをタップします。

ビューアプリセットのプレビュー

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

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

  2. プレビューするプリセットのタイトルを 1 つチェックします。

  3. ツールバーのプレビューアイコンをタップします。

  4. (オプション)ビューアプリセットをプレビューページで、右上隅付近にある参照をタップして、プレビューする別のアセットを選択します。

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

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

  2. 並べ替える基準とする列ヘッダーをクリックします。例えば、「プリセットのタイトル」をクリックして、アルファベット順またはアルファベット順の逆で並べ替えます。

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

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

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

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

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

  3. ツールバーの編集アイコン(鉛筆)をタップします。

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

  5. 次のいずれかの操作をおこないます。

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

ビューアプリセットの削除

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

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

  2. ビューアプリセットページで、「プリセットのタイトル」のチェックボックスをオンにして、ごみ箱アイコンをタップします。

  3. 削除」をタップします。

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

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

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

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

    注意:

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

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

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

ビューアプリセットによるアセットの配信

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー