ビューアプリセットは、ユーザーのコンピューター画面やモバイルデバイスでのリッチメディアアセットの表示方法を決定する様々な設定のコレクションです。管理者は、ビューアプリセットを作成できます。設定は、幅広いビューア設定オプションで使用できます。例えば、ビューアの表示サイズやズームの動作を変更できます。
独自の HTML5 ビューアプリセットの作成とカスタマイズについて詳しくは、「Adobe Scene7 HTML5 ビューア SDK」を参照してください。このガイドは、、Adobe Developer Connection からダウンロードできます。
Adobe Scene7 ビューアリファレンスガイドも参照してください。
ここでは、ビューアプリセットを作成、編集および管理する方法について説明します。アセットをプレビューするときに、いつでもビューアプリセットを適用できます。詳しくは、ビューアプリセットの適用を参照してください。
注意：
事前に定義された既製のビューアプリセットを編集するシナリオはサポートされていません。既製のビューアプリセットを編集しようとすると、そのビューアプリセットを新しい名前で保存するように指示されます。
機能パック 14410 をインストール済みであるかどうかによって、またどのパブリッシュモードを使用しているかによって、ビューアプリセットの明示的な公開が必要になる場合があります。ビューアプリセットの公開を参照してください。
注意：
アセットの詳細ビューで「ビューア」を選択したときに表示されるビューアプリセットは、デフォルトでは 15 個です。この上限は増やせます。表示されるビューアプリセットの数を増やすを参照してください。
Web ページごとに異なるニーズがあります。例えば、個別のブラウザーウィンドウで HTML5 ビューアを開くリンクを示す Web ページが必要な場合や、ホスティングページに直接 HTML5 ビューアを埋め込む必要がある場合があります。後者の場合、Web ページのレイアウトは静的なものになる場合と、「レスポンシブ」にして、デバイスやブラウザーウィンドウのサイズが異なれば、異なる表示をする場合もあります。これらのニーズに対応するために、ダイナミックメディアに付属する事前定義済みの標準提供 HTML5 ビューアはすべて、静的な Web ページとレスポンシブデザイン Web ページの両方をサポートしています。
レスポンシブビューアを Web ページに埋め込む方法について詳しくは、Scene7 画像サービング API ヘルプのレスポンシブ静的画像ライブラリを参照してください。
注意：
既製のビューアを使用するには、まずすべて公開する必要があります。
ビューアプリセットの公開を参照してください。
ダイナミックメディアに付属するすべての標準提供ビューアプリセットは、次のシステムと完全に互換します。
- デスクトップ
- Apple iPhone
- Apple iPad
- Android Smartphone
- Android Tablet
- ビデオについては、Blackberry と Windows 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 つのビューアで表示します。スピンセット、画像およびビデオを含めることができます。 |
| スピンセット | ユーザーがオブジェクトを回転させて、様々な面や角度を確認できるように、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 3x のみ） | ズームイン（iOS、Android 3x のみ） |
ピンチクローズ | 適用なし | ズームアウト（iOS、Android 3x のみ） | ズームアウト（iOS、Android 3x のみ） |
スワイプ | スウォッチバーをスクロール | 画像をスクロール | スピン |
フリック | スウォッチバーをスクロール | 画像をスクロール | スピン |
デフォルトでは、詳細ビュー／ビューアでアセットを表示したときに AEM に表示されるビューアプリセットは 15 個です。この表示されるビューアの上限を増やせます。
表示されるビューアプリセットの数を増やすには、次の手順をおこないます。
ビューアプリセットを作成しておくと、アセットの表示やアセットとの対話のための様々な設定を適用できます。ただし、新しいビューアプリセットを作成する必要はありません。デフォルトの、すぐに使えるビューアプリセットが既に AEM Assets に付属していますので、これを使用できます。
新しいビューアプリセットを作成することを選んだ場合、ビューアプリセットを保存すると、ビューアプリセットページのそのビューアの状態が自動的にアクティベート済みになります（「オン」に設定されます）。この状態は、ダイナミックメディアコンポーネントとインタラクティブなメディアコンポーネントに、また画像やビデオをプレビューするときには常に、このビューアプリセットが表示されることを意味します。
注意：
URL の取得やアセットのコードの埋め込みをおこなうには、AEM に組み込みのビューアプリセットも、自分で作成したビューアプリセットもすべて、アクティベートして公開する必要があります。機能パック 14410 がインストールされている場合は、ビューアプリセットが自動的に公開される場合とそうでない場合があります。
この機能パックがインストールされている場合、「公開」オプションや「非公開」オプションが表示されないことがあります。
ビューアプリセットのアクティベートとアクティベート解除とビューアプリセットの公開を参照してください。
一部のビューアプリセットには、ビューアの全体的な動作に影響する専用の設定があります。作成するビューアプリセットによっては、これらの特別な考慮事項について注意する必要があります。
インタラクティブなビデオのビューアプリセットの作成に関する考慮事項を参照してください。
カルーセルバナーのビューアプリセットの作成に関する考慮事項を参照してください。
-
「リッチメディアタイプ」ドロップダウンメニューで、作成するビューアプリセットのタイプを選択し、ページ右上隅の「作成」をタップします。
ビューアプリセットのリッチメディアタイプを参照してください。
-
次のいずれかの操作をおこないます。
- 「選択したタイプ」プルダウンメニューで、ビジュアルデザインをカスタマイズするコンポーネントを選択します。または、設定するビジュアル要素をビューアでタップまたはクリックして選択することもできます。
Visual Editor を使用すると、特定のプロパティがスタイルに与える効果を確認できます。プロパティを設定または調整するだけで、Visual Editor の左にあるサンプルを使用して、ビューア上での効果を瞬時に確認できます。
各タイプのビューアプリセットの CSS スタイル設定プロパティについては、ビューアリファレンスガイドの HTML5 ビューアごとの HTML5 のカスタマイズに関する節で説明します。例えば、タイプが混在メディアのビューアプリセットを作成している場合、プロパティのリストと各プロパティの説明についてはHTML5 混在メディアビューアのカスタマイズを参照してください。 - スタイル設定を別個の CSS ファイルで定義している場合は、その CSS ファイルを AEM Assets にアップロードできます。「選択したタイプ」プルダウンメニュー（表示するには Visual Editor を上にスクロールする必要がある場合があります）の下の「CSS を読み込み」をタップし、アップロードした CSS ファイルを探してビューアプリセットと関連付けます。
CSS ファイルを読み込むと、Visual Editor は、その CSS に正しいビューアマーカーが使用されているかを確認します。例えば、ズームビューアを作成している場合、読み込むすべての CSS ルールが、親のビューアエレメントに定義されているズームビューアのクラス名 .s7mixedmediaviewer を使用して定義されている必要があります。
ビューアリファレンスガイドに記載されているビューアマーカーが正しく定義された CSS であれば、任意の、自作した CSS を読み込むことができます。ただし、Visual Editor が一部の CSS 値を理解できないこともありえます。そのような場合、Visual Editor は、CSS が正常に機能するように、エラーを上書きしようとします。
注意：
RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニュー（表示するには Visual Editor を上にスクロールする必要がある場合があります）の下の「CSS を表示／非表示」をタップします。
Visual Editor と同様に、CSS でプロパティを直接変更すると、ビューアサンプルにその効果がすぐに反映されます。また、同時に、Visual Editor でもその同じプロパティが自動的に更新されます。このことから、RAW である CSS エディターと、Visual Editor のどちらを使用しても、また交互に使用してもかまいません。
注意：
ボタンのアートワークの場合は、2 倍画像を選択し、高解像度のアートワークをアップロードします。インタラクティブな画像やショッパブルバナーを操作する場合は、すぐに使える様々なホットスポットボタンから選択することもできます。
- 「選択したタイプ」プルダウンメニューで、ビジュアルデザインをカスタマイズするコンポーネントを選択します。または、設定するビジュアル要素をビューアでタップまたはクリックして選択することもできます。
-
「選択したタイプ」プルダウンメニューで、動作を変更するコンポーネントを選択します。
Visual Editor 内の多くのコンポーネントには、詳しい説明が関連付けられています。この説明は、コンポーネントを展開して関連パラメーターを表示したときに、青いボックス内に示されます。
一部のビューアタイプには、「IS コマンド」テキストフィールドに画像サービングコマンドを指定できるコンポーネントがあります。使用できるコマンドのリストについては、画像サービング API リファレンス（英語）を参照してください。
注意：
スマートフォンやタブレットなどのタッチデバイスを使用している場合は...
テキストフィールドに値を入力後、ユーザーインターフェイス内をタップすると、変更内容が送信され、仮想キーボードが閉じられます。Enter キーをタップした場合は、何も実行されません。
-
新しいビューアプリセットを公開します。プリセットを Web サイトで使用するには、まずそのプリセットを公開する必要があります。
ビューアプリセットの公開を参照してください。
パネル内の画像サムネールのディスプレイモードについて
「動作」タブの下の選択したコンポーネントプルダウンメニューから InteractiveSwatches を選択するとき、インタラクティブなビデオのビューアプリセットを作成または編集するときに使用するディスプレイモードの設定を選択できます。選択するディスプレイモードは、ビデオの再生中にサムネールを表示する方法とタイミングに影響します。セグメントディスプレイモード（デフォルト）または連続ディスプレイモードのいずれかを選択できます。
| ディスプレイモード | 説明 |
| セグメント | セグメントは、組み込みのインタラクティブビデオビューアプリセット Shoppable_Video_light および Shoppable_Video_dark と、自身で作成したすべてのインタラクティブビデオビューアプリセットの、デフォルトのディスプレイモードです。 このモードでは、ビデオセグメントに割り当てられているサムネールの数がディスプレイパネル内に表示されるスポットの数よりも少ない場合、次または前のサブセグメントがパネル内の空のスポットを満たすように引き込まれることはありません。つまり、特定のビデオセグメントに割り当てられたスウォッチの表示が保持されます。 |
| 連続 | 連続ディスプレイモードでは、セグメント内のサムネールの数がパネルに表示可能な数よりも少ない場合は、次のセグメント（最後のサムネールが表示されている場合は、前のセグメント）のサムネールが自動的に表示されます。 このトピックのビデオは、連続ディスプレイモードの一例です。 |
インタラクティブなビデオビューアの自動スクロール動作について
インタラクティブなビデオビューア内のサムネールの自動スクロール動作は、選択したディスプレイモードとは独立して機能します。
インタラクティブなビデオのビューアプリセットを作成または編集するときは、「動作」タブから自動スクロールにアクセスします。選択したコンポーネントドロップダウンメニューの「動作」タブで、「InteractiveSwatches」をタップします。「自動スクロール」チェックボックスは「IS コマンド」テキストフィールドの下にリストされます。
ビューアプリセットで「自動スクロール」を無効（チェックボックスをオフ）にした場合、ユーザーによるビデオの再生中、パネルにはビデオの全長につき最初のサムネール画像のみが表示されます。ただし、ユーザーは必要に応じて上下の矢印アイコンを使用してサムネール間を手動でスクロールできます。
ビューアプリセットで「自動スクロール」を有効にすると、ビデオの再生中、セグメントの最初にビデオセグメントに割り当てられた画像に表示がスクロールされます。ただし、セグメントによっては特定のサムネールが前後のサムネールの 2 倍の時間表示されることもあります。この動作は、セグメント内のサムネールの数がパネルに表示される数よりも多く、均等に分割できないことが原因で発生します。
図解してみましょう。30 秒のビデオセグメントが 1 つあるとします。30 秒の間に表示されるサムネールは合計で 9 個です。ブラウザーは 4 つのサムネールがディスプレイパネルに表示できるようにサイズ設定されています。30 秒のビデオの時間セグメントは 3 つのサブセグメントに分割されています。次の表に、指定の時間サブセグメントに表示されるサムネールの内訳を示します。
ビデオサブセグメント 3 が、割り当てられているサムネールを超えて拡張されることはありません。また、サムネール 4、6、7 は、他のサムネールの 2 倍の時間パネルに表示されます。
ビューアでは次のロジックに従い、サイドパネルに表示できる数に基づいて表示するサムネールの数を決めています。
- サブセグメントの数 = 次のサブセグメントに切り上げ（サムネールの数／サムネールパネル内に表示されるスロットの数（ブラウザー画面のサイズに基づく））
前の表の例では、9 サムネール／4 スロット = 2.25 サブセグメント（ビューアのロジックにより 3 に切り上げ）になります。
- サムネールの数 = 次のサムネールに切り上げ（サムネールの数／ビデオサブセグメントの数）
前の表の例では、9 サムネール／3 ビデオサブセグメント = 3 サムネールになります。
- サブセグメントの表示時間 = ビデオの合計再生時間／ビデオサブセグメントの数
前の表の例では、30 秒／3 ビデオサブセグメント = 各ビデオサブセグメントで 10 秒の再生時間になります。
| 説明 | アクション | |
| ホットスポットアイコン | ホットスポット用に使用するアイコンの変更 | ホットスポットのアイコン画像を変更するには、選択したコンポーネントの「外観」タブで「ImageMapEffect」をクリックまたはタップします。「アイコン」の下で「背景」を選択し、「画像」フィールドで、目的の背景画像に移動します。 |
ビューアプリセットがアクティベートされているかどうかによって、ユーザーインターフェイスに表示されるビューアプリセットが変わります。デフォルトでは、ビューアプリセットは作成後に「オン」になります。リストの項目が多すぎる場合、または特定のビューアプリセットを使用できないようにしたい場合に、ビューアプリセットをアクティベート解除することができます。
注意：
ビューアプリセットのオンとオフの切り替えは、ダイナミックメディアコンポーネントとインタラクティブなメディアコンポーネント内、およびアセットを表示する際に表示されるかどうかに影響します。ただし、ビューアプリセットを使用して URL を生成およびアセットにコードを埋め込むには、ビューアプリセットを公開する必要があります。
ダイナミックメディアに組み込みのビューアプリセットはすべて、既にアクティベートされて（オンになって）いますが、機能パック 14410 がインストールされていない場合は、それらを明示的に公開する必要があります。詳しくは、ビューアプリセットの公開を参照してください。
作成および追加した新しいすべてのビューアプリセットは、アクティベートかつ公開されている必要があります。
ビューアプリセットのアクティベートとアクティベート解除とビューアプリセットの公開を参照してください。
ビューアプリセットの状態をアクティベートする（または「オン」に切り替える）ことは、ダイナミックメディアコンポーネントとインタラクティブなメディアコンポーネント内、およびアセットを表示する際に表示されるかどうかに影響します。
ただし、ビューアプリセットを使用してアセットを配信するには、ビューアプリセットも公開する必要があります。URL を取得したりアセットのコードを埋め込むには、すべてのビューアプリセットをアクティベートして公開する必要があります。
ビューアプリセットのアクティベートとアクティベート解除を参照してください。
アセットのプレビューも参照してください。
| AEM 6.3 | 機能パック 14410 がインストールされた AEM 6.3 | ||
| 公開：即時モード（即時公開） | 公開：アクティベーション時 | ||
| 組み込みのすぐに使えるビューアプリセット | ビューアプリセットの公開が必要です | ビューアプリセットは自動公開されます | ビューアプリセットは自動公開されます |
| カスタムのビューアプリセット（ユーザーが作成したもの） | ビューアプリセットの公開が必要です | ビューアプリセットは自動公開されます | ビューアプリセットの公開が必要です |
注意：
機能パック 14410 がインストールされている場合は、「公開」オプションも「非公開」オプションも表示されません（これらのボタンが表示されるのは、アクティベーション時モードで使用しているカスタムのビューアプリセットに対してのみです）。
ビューアプリセットの公開を参照してください。また、機能パック 14410 をインストール済みで、ビューアプリセットの問題がある場合は、ダイナミックメディアのトラブルシューティング（機能パック 14410 の場合）を参照してください。
-
左側のウィンドウからビューアプリセット を選択して、アセットに適用します。
この URL を共有用にコピーして、他のユーザーと共有できます。
ビューアプリセットの URL を取得する方法については、Web アプリケーションへの URL のリンクを参照してください。Web ページへのビデオビューアの埋め込みも参照してください。
AEM を WCM として使用している場合は、ビューアプリセットを使用するアセットをページに直接追加できます。ページへのダイナミックメディアアセットの追加を参照してください。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。