Dynamic Media Client Sample
Dynamic Media機能を1ページで確認するための開発向けワイヤーフレーム。
test
/content/dam/{project}/dynamic-media-sample/
├── single-image/
├── smart-crop/
├── image-set/
├── spin-set/
├── mixed-media/
├── video/
├── interactive-image/
├── interactive-video/
├── panoramic/
├── carousel/
└── 3d-model/
├── single-image/
├── smart-crop/
├── image-set/
├── spin-set/
├── mixed-media/
├── video/
├── interactive-image/
├── interactive-video/
├── panoramic/
├── carousel/
└── 3d-model/
※ 配置先は各環境のAssets構成に合わせて設定してください。
- 1ページ内にDynamic Media機能別のサンプルセクションを配置する。
- 各セクションの参照AssetはUEで差し替え可能とする。
- 確認はAEM Author Previewを基本とする。
- SP表示比較は本ワイヤーの確認対象外とする。
- Set系・Viewer系はDynamic Media側の同期・公開状態によりPublishが必要になる場合があるため、実装時に確認する。
本HTMLは開発者向けのワイヤーフレームであり、最終デザイン・コンポーネント名・Assetパスを確定するものではありません。
ページ構成イメージ
Single Image
Image Set
Spin Set (360°)
Mixed Media Set
Video
Interactive Image
Interactive Video
Panoramic Image
Carousel Banner
Real 3D Model
Single Image
Dynamic Media Sample
1枚の画像をDynamic Media経由で表示するサンプル。サイズ・画質・フォーマット変換の基本確認に利用する。
Image Demo
画像が表示されること。必要に応じてURLパラメータやPreset適用の確認を行う。
Smart Crop
Dynamic Media Sample
AIによる被写体を考慮したトリミングを確認するサンプル。SP比較ではなく、Crop適用結果の確認を目的とする。
Image Set
Dynamic Media Sample
複数画像をまとめてギャラリーとして表示するサンプル。製品画像の前面・背面・詳細画像などを想定する。
画像の切り替えができること。Set内の画像順が意図通りであること。
Spin Set (360°)
Dynamic Media Sample
複数枚の画像を使って360°回転表示するサンプル。DSRの3Dビューア相当の確認に利用する。
ドラッグ操作などで回転できること。画像の順番・つながりに違和感がないこと。
Mixed Media Set
Dynamic Media Sample
画像・動画・Spin Setなどを1つのビューア内で切り替えて表示するサンプル。
メディア種別を切り替えられること。画像・動画・Spinが混在して表示できること。
Video
Dynamic Media Sample
Dynamic Media経由で動画を表示するサンプル。動画再生と基本操作を確認する。
動画が再生できること。再生・停止・シークなどの基本操作ができること。
Interactive Image
Dynamic Media Sample
画像上にホットスポットを配置するサンプル。ホットスポットのクリックで商品ページ等へのリンク遷移を想定する。
画像上にホットスポットが表示されること。ホットスポットのクリックで設定されたリンク先へ遷移できること。
Interactive Video
Dynamic Media Sample
動画上にホットスポットを配置するサンプル。動画内の商品説明・リンク表示を想定する。
動画上にホットスポットが表示されること。再生位置に応じた表示が確認できること。
Panoramic Image
Dynamic Media Sample
横長・広角画像をパノラマビューとして表示するサンプル。ショールームや空間表現を想定する。
パノラマ操作ができること。表示範囲の移動ができること。
Carousel Banner
Dynamic Media Sample
複数バナーをスライド形式で表示するサンプル。プロモーション枠の確認に利用する。
スライド切り替えができること。各スライドのリンク設定が確認できること。
Real 3D Model
Dynamic Media Sample
GLB等の3Dモデルファイルを表示するサンプル。Spin Setとは別の実3Dモデル確認用。
モデルの回転・拡大縮小ができること。対象フォーマットが表示できること。