ビューアプリセットの管理 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 に設定されています)を目的の数に変更します。
-
ビューアプリセットデータソース(
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource
)に移動します。 -
「limit」プロパティの数を、目的の数(例:
{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}
)に変更します。 -
「すべて保存」を選択します。
ビューアプリセットの作成 creating-a-new-viewer-preset
ビューアプリセットを作成しておくと、アセットの表示やアセットとの対話のための様々な設定を適用できます。ただし、ビューアプリセットを作成する必要はありません。デフォルトの、すぐに使えるビューアプリセットが既に Adobe Experience Manager Assets に付属していますので、これを使用できます。
ビューアプリセットの作成を選んだ場合、ビューアプリセットを保存すると、ビューアプリセットページのそのビューアの状態が自動的にアクティベート済みになります(「オン」に設定されます)。この状態は、画像やビデオをプレビューするときは常に Dynamic Media コンポーネントとインタラクティブメディアコンポーネントに表示されることを意味します。
一部のビューアプリセットには、ビューアの全体的な動作に影響する専用の設定があります。作成するビューアプリセットによっては、これらの特別な考慮事項について注意する必要があります。
インタラクティブなビューアのプリセットを作成するための特別な考慮事項を参照してください。
カルーセルバナーのビューアプリセットの作成に関する考慮事項を参照してください。
ビューアプリセットを作成するには:
-
Adobe Experience Manager の左上隅にある Adobe Experience Manager ロゴを選択し、左のレールで ツール(ハンマーのアイコン)/アセット/ビューアプリセット に移動します。
-
ビューアプリセットページのツールバーで、「作成」を選択します。
-
新規ビューアプリセット ダイアログボックスで、「プリセット名」フィールドに新しいプリセットの名前を入力します。名前は慎重に選択してください。「作成」を選択した後で編集することはできません。
後述の手順でプリセットを保存すると、この名前がビューアプリセットページの「プリセットのタイトル」列ヘッダーの下に表示されます。
-
「リッチメディアタイプ」ドロップダウンメニューで、作成するビューアプリセットのタイプを選択し、ページ右上隅の「作成」を選択します。
ビューアプリセットのリッチメディアタイプを参照してください。
-
ビューアプリセットエディターページで、「外観」タブを選択します。
-
次のいずれかの操作を行います。
-
「選択したタイプ」プルダウンメニューで、ビジュアルデザインをカスタマイズするコンポーネントを選択します。または、設定するビジュアル要素をビューアで選択することもできます。
Visual Editor を使用すると、特定のプロパティがスタイルに与える効果を確認できます。プロパティを設定または調整すると、Visual Editor の左にあるサンプルを使用して、ビューア上での効果を瞬時に確認できます。
ビューアプリセットタイプごとの CSS スタイル設定プロパティについては、『ビューアリファレンスガイド』の「
<viewer name>
ビューアのカスタマイズ」のヘルプトピックを参照してください。例えば、Mixed_Media
タイプのビューアプリセットを作成している場合、プロパティのリストと各プロパティの説明については、混在メディアビューアのカスタマイズを参照してください。 -
スタイル設定を別個の CSS ファイルで定義している場合は、その CSS ファイルを Adobe Experience Manager Assets にアップロードできます。アップロードした CSS ファイルを探してビューアプリセットと関連付けるには、「選択したタイプ」プルダウンメニューの下の「CSS を読み込み」を選択します(必要に応じて、ビジュアルエディターを上にスクロールして表示します)。
CSS ファイルを読み込むと、Visual Editor は、その CSS に正しいビューアマーカーが使用されているかを確認します。例えば、ズームビューアを作成している場合、読み込むすべての CSS ルールが、親のビューア要素に定義されているズームビューアのクラス名
.s7mixedmediaviewer
を使用して定義されている必要があります。指定ビューアの CSS マーカーが正しく定義された CSS であれば、自作した任意の CSS を読み込むことができます(CSS マーカーについては、『ビューアリファレンスガイド』の「<viewer name> ビューアのカスタマイズ」のヘルプトピックを参照してください。例えば、ズームビューアの CSS マーカーについては、ズームビューアのカスタマイズを参照してください)。ただし、Visual Editor が一部の CSS 値を認識できない可能性もあります。そのような場合、Visual Editor は、CSS が正常に機能するように、エラーを上書きしようとします。
note note NOTE RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニューの下の「CSS を表示/非表示」を選択します(必要に応じて、ビジュアルエディターを上にスクロールして表示します)。
Visual Editor と同様に、CSS でプロパティを直接変更すると、ビューアサンプルにその効果がすぐに反映されます。また、ビジュアルエディターでは、同じプロパティが同時に自動的に更新されます。そのため、生の CSS エディターまたはビジュアルエディターを使用することも、両方を区別なく使用することもできます。note 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 もサポートしていない場合は、最後にプログレッシブ再生が使用されます。
note note NOTE dash オプションを表示して使用するには、まずアドビテクニカルサポートでアカウントを有効にする必要があります。詳しくは、「アカウントでの DASH の有効化」を参照してください。 -
-
「選択したタイプ」プルダウンメニューで、動作を変更するコンポーネントを選択します。
ビジュアルエディターの多くのコンポーネントには、詳細な説明が関連付けられています。これらの説明は、コンポーネントを展開して関連するパラメーターを表示したときに、青いボックス内に表示されます。
一部のビューアタイプには、「IS コマンド」テキストフィールドに画像サービングコマンドを指定できるコンポーネントがあります。使用できるコマンドのリストについては、画像サービング API リファレンス(英語)を参照してください。
note 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 NOTE アセットと選択したビューアを既に公開している場合は、ビューアプリセットの選択後に「URL」ボタンと「埋め込み」ボタンが表示されます。 -
アセットに適用するビューアプリセットを左側のパネルから選択します。
この URL をコピーして、他のユーザーと共有できます。
ビューアプリセットを使用するアセットの配信 delivering-assets-with-viewer-presets
ビューアプリセットの URL を取得する方法については、Web アプリケーションへの URL のリンクを参照してください。Web ページへのビデオビューアの埋め込みも参照してください。
Adobe Experience Manager を WCM として使用している場合は、ビューアプリセットを使用するアセットをページに直接追加できます。ページへの Dynamic Media アセットの追加を参照してください。