Dynamic Mediaビューアプリセットの管理 managing-viewer-presets
Dynamic Mediaのビューアプリセットは、ユーザーがコンピューターの画面やモバイルデバイスでリッチメディアアセットを表示する方法を決定する一連の設定です。 管理者は、ビューアプリセットを作成できます。 設定は、ビューア設定オプションの配列で使用できます。 例えば、ビューアの表示サイズやズームの動作を変更できます。
HTML5 ビューアーのプリセットを独自に作成およびカスタマイズする方法については、Adobe Dynamic Media の HTML5 Viewer SDK API ドキュメント を参照してください。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
Adobe Dynamic Media ビューアリファレンスガイドも参照してください。
このセクションでは、ビューアのプリセットを作成、編集、管理する方法について説明します。ビューアのプリセットは、アセットをプレビューする際にいつでも適用できます。詳しくは、「ビューアのプリセットの適用」を参照してください。
閲覧者のキーボードアクセシビリティ keyboard-accessibility-for-viewers
すべての標準提供ビューアでキーボードアクセシビリティがサポートされています。
キーボードアクセシビリティとナビゲーションに関するページも参照してください。
Dynamic Mediaビューアプリセットの管理 managing-presets
AEMでビューアプリセットの追加、編集、削除、公開、非公開およびプレビューを実行するには、次の操作をタップします ツール/アセット/ビューアプリセット.
レスポンシブデザイン Web ページのビューアサポート viewer-support-for-responsive-designed-web-pages
Web ページによってニーズは異なります。例えば、HTML5 ビューアが別のブラウザーウィンドウで 開くリンクを提供する web ページが必要な場合があります。ホスティングページに直接 HTML5 ビューアを埋め込む必要が生じる場合があります。後者の場合は、web ページのレイアウトが静的な場合や、または、 レスポンシブ およびの表示は、デバイスごと、またはブラウザーウィンドウのサイズごとに異なります。 これらのニーズに対応するために、Dynamic Media に付属する事前定義済みの標準提供 HTML5 ビューアはすべて、静的な Web ページとレスポンシブデザイン Web ページの両方をサポートしています。
詳しくは、 レスポンシブ画像ライブラリ 内 画像サービング API ヘルプ レスポンシブビューアを web ページに埋め込む方法について詳しくは、こちらを参照してください。
ビューアプリセットの公開を参照してください。
ビューアプリセットのシステム互換性 viewer-preset-system-compatibility
Dynamic Media に付属するすべての標準提供のビューアのプリセットは、次のシステムと完全に互換性があります。
- デスクトップ
- Apple iPhone
- Apple iPad
- Android スマートフォン
- Android タブレット
- ビデオの場合、MP4 再生の追加サポートが Blackberry および Windows Phone 8.
ビューアプリセットのリッチメディアタイプ rich-media-types-for-viewer-presets
管理者は、新しいビューアプリセットの作成時に次のリッチメディアタイプを追加してカスタマイズすることができます。
アップロードした画像が球パノラマと見なされるには、次のいずれかまたは両方を満たす必要があります。
- アスペクト比が 2:1 です。
- キーワードがエクイレクタングラー、球状とパノラマ、または球状とパノラマでタグ付けされています。 タグの使用を参照してください。
垂直ズームビューアでは、製品画像の視聴エクスペリエンスを最大化して、ユーザーに製品を最適に表示できます。スウォッチの垂直方向の位置では、次の操作を行います。
- スウォッチがフォールドの上に表示されます。 水平スウォッチの場合、ユーザーのデスクトップ画面のサイズに応じて、スウォッチは、ユーザーがページを下にスクロールするまで表示されませんでした。 ビューアにスウォッチを垂直方向に配置すると、ユーザの画面サイズに関係なくスウォッチが表示されます。
- メイン画像のサイズを最大化する。 水平方向のスウォッチの場合、確実に表示されるようにページ上にスペースを確保しておく必要があります。この配置によって、メイン画像のサイズが小さくなります。ただし、垂直方向のスウォッチレイアウトの場合は、こうしたスペースを確保する必要がありません。そのため、メイン画像のサイズを最大化できます。
標準提供ビューアプリセットのリスト list-of-out-of-the-box-viewer-presets
次の表に、Dynamic Mediaに付属する事前定義済みの標準提供ビューアプリセットを示します。
ライブデモも参照してください。
ビューアでサポートされている Web ブラウザーとオペレーティングシステムのバージョンについては、ビューアのリリースノートに記載されています。
詳しくは、 ビューアリリースノート の目次に ビューアリファレンスガイド.
ビューアプリセットの公開を参照してください。
ビューアプリセットのアクティベートとアクティベート解除とビューアプリセットの公開を参照してください。
サポートされているモバイルビューアのジェスチャーに関する表 supported-mobile-viewers-gestures-matrix
次の表に、iOS、Android 2.x および Android 3.x デバイスでサポートされているモバイルビューアのジェスチャーを示します。
表示されるDynamic Mediaビューアプリセットの数の増加 increasing-the-number-of-viewer-presets-that-display
詳細ビュー/ビューア でアセットを表示したとき、AEM には様々なビューアプリセットが表示されます。表示されるビューアの数を増減できます。
表示されるDynamic Mediaビューアプリセットの数を増やすには::
-
に移動します。 CRXDE Lite (http://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
)に移動します。 -
内 制限 プロパティの数を、目的の数(例: )に変更します。
{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}
-
「すべて保存」をタップします。
新しいDynamic Mediaビューアプリセットの作成 creating-a-new-viewer-preset
ビューアプリセットを作成しておくと、アセットの表示やアセットとの対話のための様々な設定を適用できます。ただし、新しいビューアプリセットを作成する必要はありません。 デフォルトの、すぐに使えるビューアプリセットが既に AEM Assets に付属していますので、これを使用できます。
新しいビューアプリセットを作成することを選んだ場合、ビューアプリセットを保存すると、ビューアプリセットページのそのビューアの状態が自動的にアクティベート済みになります(「オン」に設定されます)。 この状態は、 Dynamic Media コンポーネントと インタラクティブメディア コンポーネントを使用し、画像またはビデオをプレビューする際に使用できます。
一部のビューアプリセットには、ビューアの全体的な動作に影響する専用の設定があります。作成するビューアプリセットによっては、これらの特別な考慮事項について注意する必要があります。
インタラクティブなビューアのプリセットを作成するための特別な考慮事項を参照してください。
カルーセルバナーのビューアプリセットの作成に関する考慮事項を参照してください。
新しいDynamic Mediaビューアプリセットを作成するには::
-
AEMの左上隅にあるAEMロゴをタップし、左側のレールでをタップします。 ツール/アセット/ビューアプリセット.
-
の ビューアプリセット ページで、ツールバーの 作成.
-
内 新しいビューアプリセット ダイアログボックス、 プリセット名 「 」フィールドに、新しいプリセットの名前を入力します。名前は慎重に選択してください。タップした後は編集できません 作成.
後の手順でプリセットを保存すると、その名前がビューアプリセットページの プリセットのタイトル 列ヘッダー。
-
の リッチメディアタイプ ドロップダウンメニューで、作成するビューアプリセットのタイプを選択し、ページの右上隅にあるをタップします。 作成.
ビューアプリセットのリッチメディアタイプを参照してください。
-
の ビューアプリセットを編集 ページで、 外観 タブをクリックします。
-
次のいずれかの操作を行います。
-
「選択したタイプ」プルダウンメニューで、ビジュアルデザインをカスタマイズするコンポーネントを選択します。または、設定するビジュアル要素をビューアでタップして選択することもできます。
Visual Editor を使用すると、特定のプロパティがスタイルに与える効果を確認できます。プロパティを設定または調整するだけで、Visual Editor の左にあるサンプルを使用して、ビューア上での効果を瞬時に確認できます。
ビューアプリセットタイプごとの CSS スタイル設定プロパティについては、「カスタマイズ」を参照してください。 <viewer_name> Viewer」ヘルプトピック ( ビューアリファレンスガイド.
例えば、
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 が正常に機能するように、エラーを上書きしようとします。
note note NOTE RAW 形式で CSS を直接編集する場合は、「選択したタイプ」プルダウンメニュー(表示するには Visual Editor を上にスクロールする必要が生じる場合があります)の下の「CSS を表示/非表示」をタップします。 Visual Editor と同様に、CSS でプロパティを直接変更すると、ビューアのサンプルに対する効果を即座に確認できます。 また、ビジュアルエディターでは、同じプロパティが同時に自動的に更新されます。そのため、生の CSS エディターまたはビジュアルエディターを使用することも、両方を区別なく使用することもできます。 note note NOTE ボタンのアートワークの場合は、2 倍の画像を選択し、高解像度のアートワークをアップロードします。 インタラクティブ画像やショッパブルバナーを操作する場合は、あらかじめ用意されている様々なホットスポットボタンから選択することもできます。 -
-
(オプション) ビューアプリセットを編集 ページ、タップ デスクトップ, タブレット または 電話 異なるデバイスや画面の種類に対して表示スタイルを一意に定義する。
-
の ビューアプリセットを編集 ページで、 動作 タブをクリックします。 または、設定するビジュアル要素をビューアでタップまたはクリックして選択することもできます。
-
「選択したタイプ」プルダウンメニューで、動作を変更するコンポーネントを選択します。
ビジュアルエディターの多くのコンポーネントには、詳細な説明が関連付けられています。これらの説明は、コンポーネントを展開して関連するパラメーターを表示したときに、青いボックス内に表示されます。
一部のビューアタイプには、「IS コマンド」テキストフィールドに画像サービングコマンドを指定できるコンポーネントがあります。使用できるコマンドのリストについては、画像サービング API リファレンス(英語)を参照してください。
note note NOTE スマートフォンやタブレットなどのタッチデバイスを使用している場合 テキストフィールドに値を入力した後、ユーザーインターフェイスの別の場所をタップして変更を送信し、仮想キーボードを閉じます。 次をタップした場合: 入力 を呼び出した場合、アクションは発生しません。 -
ページの右上隅にある「保存」をタップします。
-
新しいビューアプリセットを公開します。プリセットを Web サイトで使用するには、事前に公開する必要があります。
ビューアプリセットの公開を参照してください。
インタラクティブなビューアのプリセットを作成するための特別な考慮事項 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
カルーセルバナーのビューアプリセットを作成するときに、ホットスポットのスタイル変更は次のように実行できます。
Dynamic Mediaビューアプリセットのアクティベートとアクティベート解除 activating-or-deactivating-viewer-presets
ユーザーインターフェイスで使用できるビューアのプリセットは、どれがオーサーモードでアクティブになっているかによって異なります。デフォルトでは、ビューアプリセットは オン 作成後 プリセットをオフに切り替えた場合、オーサーモードでは表示されません。 プリセットが公開されている場合。 オン/オフを切り替えても、常に公開されます。 リストが不十分になった場合や、ビューアプリセットを使用できなくしたい場合は、ビューアプリセットを非アクティブ化できます。
Dynamic Mediaビューアプリセットをアクティベートまたはアクティベート解除するには::
-
AEMの左上隅にあるAEMロゴをタップし、左側のレールでをタップします。 ツール/アセット/ビューアプリセット.
-
の ビューアプリセット ページの 都道府県 列ヘッダーで、切り替えをタップして、ビューアプリセットをアクティベートまたはアクティベート解除します。
アクティベートされたビューアプリセットには、右側の青いボックスに切替スイッチが表示されます。アクティベート解除されたビューアプリセットには、左側の薄いグレーのボックスに切替スイッチが表示されます。
Dynamic Mediaビューアプリセットの公開 publishing-viewer-presets
有効化(または回転) オン) ビューアプリセットの状態とは、Dynamic Mediaコンポーネントとインタラクティブメディアコンポーネントに、またアセットを表示する際には常に表示されることを意味します。
ただし、ビューアプリセットを使用しているアセットを配信するには、そのビューアプリセットも公開する必要があります。URL を取得したりアセットのコードを埋め込むには、すべてのビューアプリセットをアクティベートし、かつ 公開する必要があります。Dynamic Media に付属しているすべての既製ビューアプリセットをアクティベートして公開する必要があります。自分で作成して追加したカスタムビューアプリセットは自動的にアクティベートされますが、やはり手動で公開する必要があります。
「ビューアのプリセットのアクティベートとアクティベート解除」を参照してください。
「アセットのプレビュー」も参照してください。
Dynamic Mediaビューアプリセットを公開するには::
- AEMの左上隅にあるAEMロゴをタップし、左側のレールでをタップします。 ツール/アセット/ビューアプリセット.
- 公開するビューアプリセットを 1 つ以上選択します。
- ツールバーで、 公開 アイコン
Dynamic Mediaビューアプリセットの並べ替え sorting-viewer-presets
Dynamic Mediaビューアプリセットを並べ替えるには::
- AEM の左上隅にある AEM ロゴをタップし、左側のパネルで ツール(ハンマーアイコン)/Assets/ビューアプリセット をタップします。
- 「プリセットのタイトル」、「タイプ」、「公開」または「状態」をクリックして、その見出しの列でソートします。例えば、「タイプ」をクリックすると、ビューアプリセットのタイプが、アルファベット順で、またはアルファベットの逆の順序でソートされます。
Dynamic Mediaビューアプリセットの編集 editing-viewer-presets
事前に定義された標準提供ビューアプリセット を編集するシナリオはサポートされていません。標準提供ビューアプリセットを編集すると、新しい名前で保存するように指示されます。
Dynamic Mediaビューアプリセットを編集するには::
-
AEMの左上隅にあるAEMロゴをタップし、左側のレールでをタップします。 ツール/アセット/ビューアプリセット.
-
ビューアプリセットのタイトルの左側にあるチェックボックスをオンにして、プリセットを選択します。
-
ツールバーの「編集」をタップします。
-
の ビューアプリセットを編集 ページで、必要な変更をビューアプリセットに加えます。
-
次のいずれかの操作を行います。
- 「保存」をタップして変更内容を保存し、ビューアプリセットページに戻ります。
- 「キャンセル」をタップして変更内容をキャンセルし、ビューアプリセットページに戻ります。
カスタムDynamic Mediaビューアプリセットの削除 deleting-custom-viewer-presets
作成して Dynamic Media に追加したビューアプリセットを削除できます。
カスタムDynamic Mediaビューアプリセットを削除するには::
- AEMの左上隅にあるAEMロゴをタップし、左側のレールでをタップします。 ツール/アセット/ビューアプリセット.
- の ビューアプリセット ページ、チェック プリセットのタイトル 次に、 ごみ箱 アイコン
- 「削除」をタップします。
アセットへの Dynamic Media ビューアプリセットの適用 applying-a-viewer-preset-to-an-asset
アセットと選択したビューアを既に公開している場合は、ビューアプリセットの選択後に「URL」ボタンと「埋め込み」ボタンが表示されます。
アセットにDynamic Mediaビューアプリセットを適用するには::
-
アセットを開き、ページの左上隅付近にあるドロップダウンメニュータップして、「ビューア」を選択します。
note note NOTE アセットと選択したビューアを既に公開している場合は、ビューアプリセットの選択後に「URL」ボタンと「埋め込み」ボタンが表示されます。 -
左側のウィンドウからビューアプリセットを選択して、アセットに適用します。
この URL をコピーして、他のユーザーと共有できます。
Dynamic Mediaビューアプリセットを使用するアセットの配信 delivering-assets-with-viewer-presets
ビューアプリセットの URL を取得する方法については、Web アプリケーションへの URL のリンクを参照してください。Web ページへのビデオビューアの埋め込みも参照してください。
AEMを WCM として使用している場合は、ページ上でビューアプリセットを使用してアセットを直接追加できます。 ページへの Dynamic Media アセットの追加を参照してください。