ドキュメントAEMDynamic Media ビューアリファレンスガイド

カルーセル carousel

最終更新日： 2025年10月3日

作成対象：

  • {"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

カルーセルビューアは、クリック可能なホットスポットまたは領域を含む、ズーム不可のバナー画像のカルーセルを表示するビューアです。 このビューアは、ユーザーがバナー画像上のホットスポットまたは地域を選択できる「買い物可能なカルーセル」エクスペリエンスの実装に役立ちます。 顧客のweb サイトのクイックビューまたは製品詳細ページにリダイレクトされます。 デスクトップやモバイルデバイスで動作するように設計されています。

NOTE
画像レンダリングまたはユーザー生成コンテンツ（UGC）を使用する画像は、このビューアではサポートされていません。

ビューアータイプは511です。

デモ URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://landing.adobe.com/en/na/dynamic-media/ctir-2755/live-demos.html

システム要件 section-b7270cc4290043399681dc504f043609

必要システム構成を参照してください。

カルーセルビューアの使用 section-e6c68406ecdc4de781df182bbd8088b4

カルーセルビューアは、メインのJavaScript ファイルと一連のヘルパーファイル（1つのJavaScriptには、この特定のビューア、アセット、CSSで使用されるすべてのビューアSDK コンポーネントが含まれています）を実行時にビューアがダウンロードすることを表します。

カルーセルビューアは、IS ビューアを備えた実稼動対応のHTML ページを使用するポップアップモードと、文書化されたAPIを使用してターゲット web ページに統合する埋め込みモードの両方で使用できます。

設定とスキニングは、このヘルプに記載されている他のビューアと同様です。 すべてのスキニングは、カスタム CSSを使用して実行できます。

すべてのビューアに共通する​ コマンド参照 – 構成属性およびすべてのビューアに共通するコマンド参照 – URLを参照してください

カルーセルセット内の移動は、メインビューを水平にスワイプするか、デスクトップデバイスで2つの矢印ボタンを使用して行います。 セットインジケーターのドットは、セット内の現在の位置を示します。

ビューアは、バナー画像の上にホットスポットまたは領域をレンダリングして、製品のインタラクティブ領域を示すことができます。

ホットスポットまたはリージョンをクリックまたはタップすると、作成時にホットスポットに関連付けられたアクションがトリガーされます。 アクションは、web サイト上の別のページにリダイレクトされる場合もあれば、製品情報をweb ページロジックに渡して、関連する製品コンテンツでクイックビューをトリガーする場合もあります。

ビューアは完全にキーボードアクセス可能です。

​ キーボードのアクセシビリティとナビゲーション ​を参照してください。

カルーセルビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

ポップアップモードについて

ポップアップモードでは、ビューアは別のweb ブラウザーウィンドウまたはタブで開きます。 ブラウザーのサイズが変更されたり、モバイルデバイスの向きが変更されたりすると、ブラウザーのウィンドウ領域全体が調整されます。

ポップアップモードは、モバイルデバイスで最も一般的です。 Web ページは、window.open() JavaScript呼び出し、A HTML要素の適切な設定、またはその他の適切なメソッドを使用してビューアを読み込みます。

ポップアップ操作モードには、標準のHTML ページを使用することをお勧めします。 この場合はCarouselViewer.htmlと呼ばれ、標準のIS-Viewers デプロイメントのhtml5/ サブフォルダー内にあります。

<s7viewers_root>/html5/CarouselViewer.html

カスタム CSSを適用すると、視覚的なカスタマイズを実現できます。

固定サイズ埋め込みモードとレスポンシブデザイン埋め込みモードについて

埋め込みモードでは、ビューアが既存のweb ページに追加されます。 このweb ページには、ビューアに関連しない一部の顧客コンテンツが既に含まれている可能性があります。 通常、閲覧者はweb ページの不動産の一部しか占めていません。

主なユースケースは、デスクトップ PCやタブレットデバイス向けのweb ページと、デバイスの種類に応じてレイアウトを自動的に調整するレスポンシブデザインのページです。

初期読み込み後にビューアのサイズが変更されない場合は、固定サイズ埋め込みが使用されます。 この方法は、静的レイアウトを持つweb ページに最適です。

レスポンシブデザイン埋め込みは、コンテナ DIVのサイズ変更に応じて、実行時にビューアのサイズを変更する必要があることを前提としています。 最も一般的なユースケースは、柔軟性の高いページレイアウトを使用するweb ページにビューアを追加することです。

レスポンシブデザイン埋め込みモードでは、web ページのサイズとコンテナ DIVのサイズによって、ビューアの動作が異なります。 Web ページでコンテナ DIVの幅のみを設定し、高さを制限しない場合、ビューアは使用するアセットの縦横比に応じて自動的に高さを選択します。 この機能により、側面にパディングすることなく、アセットをビューに完全に収めることができます。 このユースケースは、BootstrapやFoundationなどのレスポンシブ web デザインレイアウトフレームワークを使用するweb ページで最も一般的です。

それ以外の場合、web ページでビューアのコンテナ DIVの幅と高さの両方を設定すると、ビューアはその領域だけを塗りつぶします。 また、web ページレイアウトが提供するサイズにも従います。 良い例は、ビューアをモーダルオーバーレイに埋め込むことです。このオーバーレイは、web ブラウザーのウィンドウサイズに応じてサイズが調整されます。

固定サイズ埋め込み

次の操作を実行して、ビューアをweb ページに追加します。

  1. ビューアのJavaScript ファイルをweb ページに追加します。

  2. コンテナ DIVを定義しています。

  3. ビューアサイズの設定。

  4. ビューアの作成と初期化。

  5. ビューアのJavaScript ファイルをweb ページに追加します。

    ビューアを作成するには、HTML ヘッドにスクリプトタグを追加する必要があります。 ビューアーAPIを使用する前に、CarouselViewer.jsを含めることを確認してください。 CarouselViewer.js ファイルは、標準のIS-Viewers デプロイメントのhtml5/js/ サブフォルダーにあります。

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js

ビューアがAdobe Dynamic Media Classic サーバーのいずれかにデプロイされ、同じドメインから提供される場合は、相対パスを使用できます。 そうでない場合は、IS-ViewersがインストールされているAdobe Dynamic Media Classic サーバーの1つにフルパスを指定します。

相対パスは次のようになります。

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
NOTE
ページ上のメイン ビューア JavaScript include ファイルのみを参照してください。 実行時にビューアのロジックによってダウンロードされる可能性があるweb ページコード内の他のJavaScript ファイルを参照しないでください。 特に、/s7viewers コンテキストパス（いわゆる統合SDK include）からビューアによって読み込まれたHTML5 SDK Utils.js ライブラリを直接参照しないでください。 その理由は、Utils.jsまたは類似のランタイムビューアーライブラリの場所が、ビューアーのロジックによって完全に管理され、ビューアーリリース間で場所が変更されるためです。 Adobeは、古いバージョンのセカンダリビューア includesをサーバー上に保持しません。
その結果、ビューアがページ上で使用するセカンダリ JavaScript includeを直接参照すると、新しい製品バージョンがデプロイされる際に、将来的にビューア機能が破損します。

  1. コンテナ DIVを定義しています。

    ビューアを表示するページに、空のDIV要素を追加します。 このIDは後でビューア APIに渡されるので、DIV要素にはIDが定義されている必要があります。 DIVのサイズはCSSで指定します。

    プレースホルダーDIVは配置された要素です。position CSS プロパティがrelativeまたはabsoluteに設定されていることを意味します。

    次に、定義済みのプレースホルダーDIV要素の例を示します。

    code language-css 
    
<div id="s7viewer" style="position:relative"></div>

  2. ビューアサイズの設定

    ビューアの静的サイズは、.s7carouselviewer トップレベル CSS クラスを絶対単位で宣言するか、stagesize修飾子を使用することで設定できます。

    CSSで直接HTML ページにサイズを設定できます。 または、カスタムビューア CSS ファイルにサイズを設定して、後でAEM Assets オンデマンドのビューアプリセットレコードに割り当てるか、style コマンドを使用して明示的に渡すことができます。

    CSSを使用したビューアのスタイル設定について詳しくは、​ カルーセルビューアのカスタマイズ ​を参照してください。

    次に、HTML ページで静的ビューアサイズを定義する例を示します。

    code language-css 
    
#s7viewer.s7carouselviewer {
 width: 1174px;
 height: 500px;
}

    params コレクションを使用してビューア初期化コードを使用してstagesize修飾子を明示的に渡すか、次のように「コマンドリファレンス」セクションで説明されているように、API呼び出しとして渡すことができます。

    code language-css 
    
carouselViewer.setParam("stagesize", "1174,500");

    CSS ベースのアプローチを推奨し、この例で使用します。

  3. ビューアの作成と初期化。

    上記の手順を完了したら、s7viewers.CarouselViewer クラスのインスタンスを作成し、すべての構成情報をそのコンストラクターに渡し、ビューアーインスタンスでinit() メソッドを呼び出します。 構成情報は、JSON オブジェクトとしてコンストラクターに渡されます。 少なくとも、このオブジェクトには、ビューアコンテナ IDの名前を保持するcontainerId フィールドと、ビューアでサポートされている設定パラメーターを含むネストされたparams JSON オブジェクトが必要です。 この場合、params オブジェクトには、少なくともserverUrl プロパティとして渡された画像サービング URLと、asset パラメーターとして最初のアセットが必要です。 JSON ベースの初期化APIを使用すると、1行のコードでビューアを作成して開始できます。

    ビューアコードがIDでコンテナ要素を見つけられるように、ビューアコンテナをDOMに追加することが重要です。 一部のブラウザーは、Web ページの最後までDOMの構築を遅らせます。 互換性を最大限に高めるには、終了BODY タグの直前または本文onload() イベントでinit() メソッドを呼び出します。

    同時に、コンテナ要素は必ずしもweb ページレイアウトの一部であってはなりません。 例えば、割り当てられたdisplay:none スタイルを使用して非表示にすることができます。 この場合、ビューアは、web ページがコンテナ要素をレイアウトに戻す瞬間まで初期化プロセスを遅らせます。 この機能が発生すると、ビューアの読み込みが自動的に再開されます。

高さの制限のないレスポンシブデザイン埋め込み

レスポンシブデザインの埋め込みでは、通常、web ページには、ビューアのコンテナ DIVのランタイムサイズを決定する、ある種の柔軟なレイアウトが配置されています。

次の例では、web ページでビューアのコンテナ DIVがweb ブラウザーのウィンドウ サイズの40%を使用できるようになったと仮定します。 そして、その高さは無制限に残されています。 Web ページのHTML コードは次のようになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 80%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

このようなページにビューアを追加することは、固定サイズ埋め込みの手順と似ています。 唯一の違いは、ビューアサイズを明示的に定義する必要がないことです。

  1. ビューアのJavaScript ファイルをweb ページに追加します。
  2. コンテナ DIVを定義しています。
  3. ビューアの作成と初期化。

上記のすべての手順は、固定サイズの埋め込みと同じです。 コンテナ DIVを既存の"holder" DIVに追加します。

幅と高さが定義された柔軟なサイズ埋め込み

幅と高さが定義された柔軟なサイズの埋め込みでは、web ページのスタイルが異なります。 "holder" DIVに両方のサイズを提供し、ブラウザーウィンドウに中央に配置します。 また、web ページでは、HTML要素とBODY要素のサイズが100%に設定されています。

Setter ベースのAPIを使用した埋め込み

JSON ベースの初期化を使用する代わりに、セッターベースのAPIとno-args コンストラクターを使用できます。 このAPI コンストラクターを使用すると、パラメーターは受け取られず、設定パラメーターはsetContainerId()、setParam()、setAsset()のAPI メソッドを使用して指定され、別々のJavaScript呼び出しが行われます。

recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref