[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}
ビューアプリセットの管理 managing-viewer-presets
ビューアプリセットは、ユーザーがコンピューター画面とモバイルデバイスでリッチメディアアセットをどのように表示するかを決定する設定のコレクションです。 管理者の場合は、ビューアプリセットを作成できます。 ビューア設定オプションの配列に対して設定を使用できます。 例えば、ビューアの表示サイズやズーム動作を変更できます。
Dynamic Media ビューアリファレンスガイドも参照してください。
このセクションでは、ビューアのプリセットを作成、編集、管理する方法について説明します。 ビューアのプリセットは、アセットをプレビューする際にいつでも適用できます。 詳しくは、ビューアプリセットの適用を参照してください。
閲覧者のキーボードアクセシビリティ keyboard-accessibility-for-viewers
すべての標準ビューアは、キーボードアクセシビリティをサポートしています。
キーボードアクセシビリティとナビゲーションに関するページも参照してください。
ビューアプリセットの管理 managing-viewer-presets-1
Adobe Experience Manager でビューアプリセットの追加、編集、削除、公開、非公開およびプレビューを実行できます。そのためには、ツール（ハンマーアイコン）／アセット／ビューアプリセットに移動します。
レスポンシブデザイン web ページのビューアサポート viewer-support-for-responsive-designed-web-pages
Web ページによってニーズは異なります。 例えば、HTML5 ビューアが別のブラウザーウィンドウで 開くリンクを提供する web ページが必要な場合があります。 ホストページ内に直接 HTML5 ビューアを埋め込むことが必要な場合もあります。 後者の場合は、Web ページのレイアウトが静的か、 「レスポンシブ」かによって、異なるデバイスや異なるブラウザーウィンドウサイズで異なる表示になります。 これらのニーズに対応するために、Dynamic Mediaに付属するすべての事前定義済みの標準HTML5 ビューアは、静的web ページとレスポンシブデザインのweb ページの両方をサポートしています。
レスポンシブビューアを web ページに埋め込む方法について詳しくは、 Dynamic Media 画像サービングおよびレンダリング API ヘルプのレスポンシブ静的画像ライブラリを参照してください。
ビューアプリセットの公開を参照してください。
ビューアプリセットのシステム互換性 viewer-preset-system-compatibility
Dynamic Mediaに付属するすべての標準ビューアプリセットは、次のシステムと完全に互換性があります。
- デスクトップ
- Apple iPhone
- Apple iPad
- Android™ スマートフォン
- Android™ タブレット
ビューアプリセットのリッチメディアタイプ rich-media-types-for-viewer-presets
管理者は、ビューアプリセットの作成時に次のリッチメディアタイプを追加してカスタマイズすることができます。
標準ビューアプリセットのリスト list-of-out-of-the-box-viewer-presets
次の表は、Dynamic Mediaに付属するすべての事前定義済みの標準ビューアプリセットを示しています。
ライブデモも参照してください。
ビューアでサポートされている Web ブラウザーとオペレーティングシステムのバージョンについては、ビューアのリリースノートに記載されています。
『ビューアリファレンスガイド』の目次の「ビューアのリリースノート」を参照してください。
サポートされているモバイルビューアのジェスチャーに関する表 supported-mobile-viewers-gestures-matrix
iOS、Android™ 2.x および Android™ 3.x デバイスでサポートされているモバイルビューアジェスチャーを次の表に示します。
表示されるビューアプリセットの数の増減 increasing-the-number-of-viewer-presets-that-display
詳細ビュー／ビューアでアセットを表示したとき、Adobe Experience Manager には様々なビューアプリセットが表示されます。 表示されるビューアの数を増減できます。
表示されるビューアプリセットの数を増減させるには：
-
CRXDE Lite （https://localhost:4502/crx/de）に移動します。
-
ビューアプリセットリストノード（
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist）に移動します。
-
limit プロパティで、システムがデフォルトで15に設定している Value を目的の数値に変更します。
-
ビューアプリセットデータソース（
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource）に移動します。
-
「limit」プロパティの数を、目的の数（例：
{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}）に変更します。 -
「すべて保存」を選択します。
ビューアプリセットの作成 creating-a-new-viewer-preset
ビューアプリセットを作成しておくと、アセットの表示やアセットとの対話のための様々な設定を適用できます。 ただし、ビューアプリセットを作成する必要はありません。 必要に応じて、Experience Manager Assetsに既に付属しているデフォルトの標準ビューアプリセットを使用できます。
ビューアプリセットの作成を選んだ場合、ビューアプリセットを保存すると、ビューアプリセットページのそのビューアの状態が自動的にアクティベート済みになります（「オン」に設定されます）。 この状態は、画像やビデオをプレビューするときは常に Dynamic Media コンポーネントとインタラクティブメディアコンポーネントに表示されることを意味します。
一部のビューアプリセットには、ビューアの全体的な動作に影響する専用の設定があります。 作成するビューアプリセットによっては、これらの特別な考慮事項について注意する必要があります。
インタラクティブなビューアのプリセットを作成するための特別な考慮事項を参照してください。
カルーセルバナーのビューアプリセットの作成に関する考慮事項を参照してください。
ビューアプリセットを作成するには：
-
Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールでツール（ハンマーのアイコン）／アセット／ビューアプリセットに移動します。
-
ビューアプリセットページのツールバーで、「作成」を選択します。
-
新規ビューアプリセットダイアログボックスで、「プリセット名」フィールドに新しいプリセットの名前を入力します。 名前は慎重に選択してください。「作成」を選択した後で編集することはできません。
後述の手順でプリセットを保存すると、この名前がビューアプリセットページの「プリセットのタイトル」列ヘッダーの下に表示されます。
-
「リッチメディアタイプ」ドロップダウンメニューで、作成するビューアプリセットのタイプを選択し、ページ右上隅の「作成」を選択します。
ビューアプリセットのリッチメディアタイプを参照してください。
-
ビューアプリセットエディターページで、「外観」タブを選択します。
-
次のいずれかの操作を行います。
-
「選択したタイプ」プルダウンメニューで、ビジュアルデザインをカスタマイズするコンポーネントを選択します。 または、設定するビジュアル要素をビューアで選択することもできます。
Visual Editor を使用すると、特定のプロパティがスタイルに与える効果を確認できます。 任意のプロパティを設定または調整して、エディターの左側にあるサンプルを使用して、ビューアにどのような影響があるのかを即座に確認します。
ビューアプリセットタイプごとの CSS スタイル設定プロパティについては、『ビューアリファレンスガイド』の「
<viewer name>ビューアのカスタマイズ」のヘルプトピックを参照してください。 例えば、Mixed_Mediaタイプのビューアプリセットを作成している場合、プロパティのリストと各プロパティの説明については、混在メディアビューアのカスタマイズを参照してください。 -
スタイル設定を別個の CSS ファイルで定義している場合は、その CSS ファイルを Adobe Experience Manager Assets にアップロードできます。 アップロードしたCSS ファイルをビューアプリセットに関連付けるには、Selected Type プルダウンメニューの下にある Import CSS を選択します（必要に応じて、ビジュアルエディターを上にスクロールして表示します）。
CSS ファイルを読み込むと、Visual Editor は、その CSS に正しいビューアマーカーが使用されているかを確認します。 例えば、ズームビューアを作成している場合、読み込むすべての CSS ルールが、親のビューア要素に定義されているズームビューアのクラス名
.s7mixedmediaviewerを使用して定義されている必要があります。特定のビューアのCSS マーカーを適切に定義している限り、任意のカスタム CSSを読み込むことができます。 （CSS マーカーについては、 ビューアリファレンスガイド で説明しています。 Zoom Viewer CSS マーカーについては、Zoom Viewerのカスタマイズ を参照してください。） ただし、ビジュアルエディターが一部のCSS値を理解していない可能性があります。 そのような場合、Visual Editor は、CSS が正常に機能するように、エラーを上書きしようとします。
note NOTE RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニューの下の「CSS を表示／非表示」を選択します（必要に応じて、ビジュアルエディターを上にスクロールして表示します）。
Visual Editor と同様に、CSS でプロパティを直接変更すると、ビューアサンプルにその効果がすぐに反映されます。 また、ビジュアルエディターでは、同じプロパティが同時に自動的に更新されます。 そのため、生の CSS エディターまたはビジュアルエディターを使用することも、両方を区別なく使用することもできます。note NOTE ボタンのアートワークの場合は、2 倍画像を選択し、高解像度のアートワークをアップロードします。 インタラクティブ画像やショッパブルバナーを操作する場合は、すぐに使える様々なホットスポットボタンから選択することもできます。 -
-
（オプション）ビューアプリセットを編集ページの上部で、デスクトップ、タブレット、電話のいずれかを選択して、様々なデバイスや画面タイプに合わせて独自のビジュアルスタイルを定義します。
-
ビューアプリセットエディターページで、「ビヘイビアー」タブを選択します。 または、任意のビジュアル要素をビューアで選択して設定することもできます。
例えば、タイプが VideoPlayer の場合、修飾子／再生において、3 つのアダプティブビットレートストリーミングオプションの中から 1 つ選択できます。-
dash - ビデオは DASH 形式でのみストリーミングされます。 ただし、Safari ／ iOS デバイスでは、タイプとして hls を選択する必要があります。
-
hls - ビデオは HLS 形式でのみストリーミングされます。
-
auto - ベストプラクティスとして推奨されます。 DASH ストリームおよび HLS ストリームの作成では、ストレージの最適化が図られています。 そのため、再生タイプには常に auto を選択することを推奨します。 次のように、ビデオは DASH、HLS またはプログレッシブとしてストリーミングされます。
- ブラウザーが DASH をサポートしている場合は、最初に DASH ストリーミングが使用されます。
- ブラウザーが DASH をサポートしていない場合は、次に HLS ストリーミングが使用されます。
- ブラウザーが DASH も HLS もサポートしていない場合は、最後にプログレッシブ再生が使用されます。
-
-
「選択したタイプ」プルダウンメニューで、動作を変更するコンポーネントを選択します。
ビジュアルエディターの多くのコンポーネントには、詳細な説明が関連付けられています。 これらの説明は、コンポーネントを展開して関連するパラメーターを表示したときに、青いボックス内に表示されます。
一部のビューアタイプには、「IS コマンド」テキストフィールドに画像サービングコマンドを指定できるコンポーネントがあります。 使用できるコマンドのリストについては、画像サービング API リファレンス（英語）を参照してください。
note NOTE スマートフォンやタブレットなどのタッチデバイスを使用している場合 テキストフィールドに値を入力後、ユーザーインターフェイス内を選択すると、変更内容が送信され、仮想キーボードが閉じられます。 Enter キーを押した場合は、何も実行されません。 -
ページの右上隅にある「保存」を選択します。
-
新しいビューアプリセットを公開します。 生成される URL を web サイトで使用するには、まずそのプリセットを公開する必要があります。
ビューアプリセットの公開を参照してください。
note important IMPORTANT アダプティブビットレートストリーミングのプロファイルを使用する古いビデオでは、ビデオアセットを再処理するまで、その URL で通常通り HLS ストリーミングを使用して再生を行います。 再処理後も、同じ URL を引き続き使用できますが、DASH ストリーミングと HLS ストリーミングの 両方 が有効になります。
インタラクティブビデオのビューアプリセットの作成に関する考慮事項 special-considerations-for-creating-an-interactive-viewer-preset
パネル内の画像サムネールのディスプレイモードについて:
インタラクティブビデオビューアプリセットを作成または編集する場合は、使用する表示モード設定を選択できます。 この選択を行うのは、「動作」タブの「選択したコンポーネント」プルダウンメニューから InteractiveSwatches を選択したときです。 選択するディスプレイモードは、ビデオの再生中にサムネールを表示する方法とタイミングに影響します。 segment表示モード（デフォルト）またはcontinuous表示モードのいずれかを選択できます。
インタラクティブビデオビューアの自動スクロール動作について
インタラクティブなビデオビューアのサムネイルの自動スクロールは、選択した表示モードとは関係なく機能します。
インタラクティブビデオのビューアプリセットを作成または編集するときは、「ビヘイビアー」タブから自動スクロールにアクセスします。 選択したコンポーネントドロップダウンメニューの「ビヘイビアー」タブで、「InteractiveSwatches」を選択します。 「自動スクロール」チェックボックスは「IS コマンド」テキストフィールドの下にリストされます。
ビューアプリセットで「自動スクロール」を無効（チェックボックスをオフ）にした場合、ユーザーによるビデオの再生中、パネルにはビデオの全長につき最初のサムネール画像のみが表示されます。 ただし、ユーザーは必要に応じて上下の矢印アイコンを使用してサムネール間を手動でスクロールできます。
ビューアプリセットで「自動スクロール」を有効（チェックボックスをオン）にすると、ビデオの再生中、セグメントの開始時に、ビデオセグメントに割り当てられたサムネール画像まで表示がスクロールされます。 ただし、セグメント内の特定のサムネールが、他のサムネールの2倍の期間にわたって表示される場合があります。 この動作は、セグメント内のサムネールの数がパネルに表示される数よりも多く、サムネールが均等に分割できないために発生します。
説明のために、30 秒のビデオセグメントが 1 つあるとします。 また、30 秒間に表示されるサムネイルは合計 9 個です。 ブラウザーのサイズは、ディスプレイパネルの 4 つの位置でサムネイルが表示されるように設定されます。 30 秒のビデオの時間セグメントは 3 つのサブセグメントに分割されています。 次の表に、指定の時間サブセグメントに表示されるサムネールの分類を示します。
ビデオサブセグメント 3 が、割り当てられているサムネールを超えて拡張されることはありません。 サムネール 4、6、7は、他のサムネールの2倍の期間パネルに表示されます。
ビューアが、表示できる位置の数に基づいて、パネルに表示するサムネイルの数を決定するロジックは次のとおりです。
-
サブセグメントの数 = 次のサブセグメントに切り上げ（サムネールの数／サムネールパネル内に表示されるスロットの数（ブラウザー画面のサイズに基づく））
前述の表の例では、「9 サムネール / 4 スロット = 2.25」になります（ビューアのロジックにより 2.25 が 3 サブセグメントに切り上げられます）。 -
サムネールの数 = 次のサムネールに切り上げ（サムネールの数／ビデオサブセグメントの数）
前述の表の例では、「9 サムネール / 3 ビデオサブセグメント = 3 サムネール」になります。 -
サブセグメントの表示時間 = ビデオの合計再生時間 / ビデオサブセグメントの数
前述の表の例では、「30 秒 / 3 ビデオサブセグメント = 各ビデオサブセグメントで 10 秒」の表示時間になります。
カルーセルバナーのビューアプリセットの作成に関する特別な考慮事項 special-considerations-for-creating-a-carousel-banner-viewer-preset
カルーセルバナーのビューアプリセットを作成するときに、ホットスポットのスタイル変更は次のように実行できます。
ビューアプリセットのアクティベートまたはアクティベート解除 activating-or-deactivating-viewer-presets
ユーザーインターフェイスで使用できるビューアのプリセットは、どれがオーサーモードでアクティブになっているかによって異なります。 デフォルトでは、ビューアのプリセットは作成後に「オン」になります。 プリセットをオフに切り替えると、オーサーモードでは表示されなくなります。 プリセットを公開する場合は、オン／オフに関係なく、常に公開されます。 リストが長すぎたり、ビューアプリセットを使用できないようにする場合は、ビューアプリセットのアクティベートを解除します。
ビューアプリセットをアクティベートまたはアクティベート解除するには：:
-
Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールでツール（ハンマーのアイコン）／アセット／ビューアプリセットを選択します。
-
ビューアプリセットページの「状態」列ヘッダーの下で、ビューアプリセットのアクティベートとアクティベート解除の切替スイッチアイコンを選択します。
アクティベートされたビューアプリセットには、青いボックス内で、右側に切替スイッチアイコンが示されます。アクティベート解除されたビューアプリセットには、薄いグレーのボックス内で、左側に切替スイッチアイコンが示されます。
ビューアプリセットの公開 publishing-viewer-presets
ビューアプリセットの状態をアクティベートする（または「オン」に切り替える）と、Dynamic Media コンポーネントとインタラクティブメディアコンポーネント内、およびアセットを表示する際に表示されるようになります。
ただし、ビューアプリセットを使用しているアセットを 配信 するには、そのビューアプリセットも公開する必要があります。 URL を取得したりアセットのコードを埋め込むには、すべてのビューアプリセットをアクティベートし、かつ公開する必要があります。 Dynamic Mediaに付属するすべての標準ビューアプリセットをアクティベートして公開します。 自分で作成して追加したカスタムビューアプリセットは自動的にアクティベートされますが、やはり手動で公開する必要があります。
「ビューアのプリセットのアクティベートとアクティベート解除」を参照してください。
「アセットのプレビュー」も参照してください。
ビューアプリセットを公開するには：:
- Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールでツール（ハンマーのアイコン）／アセット／ビューアプリセットを選択します。
- 公開するビューアプリセットを 1 つ以上選択します。
- ツールバーの 公開 アイコンを選択します。
ビューアプリセットの並べ替え sorting-viewer-presets
- Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールでツール（ハンマーのアイコン）／アセット／ビューアプリセットを選択します。
- 「プリセットのタイトル」、「タイプ」、「公開」または「状態」を選択して、その見出しの列でソートします。 例えば、「タイプ」を選択すると、ビューアプリセットのタイプが、アルファベット順で、またはアルファベットの逆の順序でソートされます。
ビューアプリセットの編集 editing-viewer-presets
定義済みの標準ビューアプリセットの編集は、サポートされているシナリオではありません。 標準ビューアプリセットを編集する場合は、新しい名前で保存するように求められます。
ビューアプリセットを編集するには：:
-
Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールでツール（ハンマーのアイコン）／アセット／ビューアプリセットを選択します。
-
ビューアプリセットのタイトルの左側にあるチェックボックスをオンにして、プリセットを選択します。
-
ツールバーの「編集」を選択します。
-
ビューアプリセットエディターページで、「外観」タブと「動作」タブのオプションを使用して、必要な変更をビューアプリセットに加えます。
「外観」タブで、ビューアプリセットエディターページの左上隅近くにある「デスクトップ」、「タブレット」、「電話」のいずれかを選択して、アセットの表示モードを変更します。
-
ページの右上隅近くで、次のいずれかの操作を行います。
- 「保存」を選択して変更内容を保存し、ビューアプリセットページに戻ります。
- 「キャンセル」を選択して変更内容をキャンセルし、ビューアプリセットページに戻ります。
カスタムビューアプリセットの削除 deleting-custom-viewer-presets
作成して Dynamic Media に追加したビューアプリセットを削除できます。
カスタムビューアプリセットを削除するには：:
- Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールでツール（ハンマーのアイコン）／アセット／ビューアプリセットを選択します。
- ビューアプリセットページで、「プリセットのタイトル」のチェックボックスをオンにして、ごみ箱アイコンを選択します。
- 「削除」を選択します。
ビューアプリセットのアセットへの適用 applying-a-viewer-preset-to-an-asset
アセットと選択したビューアを既に公開している場合は、ビューアプリセットの選択後に「URL」ボタンと「埋め込み」ボタンが表示されます。
アセットにビューアプリセットを適用するには:
-
アセットを開き、ページの左上隅付近にあるドロップダウンメニュー選択して、「ビューア」を選択します。
note NOTE アセットと選択したビューアを既に公開している場合は、ビューアプリセットの選択後に「URL」ボタンと「埋め込み」ボタンが表示されます。 -
アセットに適用するビューアプリセットを左側のパネルから選択します。
他のユーザーと共有するには、URLをコピーできます。
ビューアプリセットを使用するアセットの配信 delivering-assets-with-viewer-presets
ビューアプリセットの URL を取得する方法については、Web アプリケーションへの URL のリンクを参照してください。 Web ページへのビデオビューアの埋め込みも参照してください。
Adobe Experience Manager を WCM として使用している場合は、ビューアプリセットを使用するアセットをページに直接追加できます。 ページへの Dynamic Media アセットの追加を参照してください。