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

カルーセル carousel

Last update: Wed Mar 09 2022 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 開発者
  • ユーザー

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

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

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

デモ URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/carousel/CarouselViewerDemo.html?lang=ja

システム要件 section-b7270cc4290043399681dc504f043609

詳しくは、 必要システム構成.

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

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

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

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

詳しくは、 すべてのビューアに共通のコマンドリファレンス — 設定属性 および すべてのビューアに共通のコマンドリファレンス — URL

カルーセルビューアの操作 section-642e66ca38cd4032992840ec6c0b0cd2

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

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

オーサー時に、ホットスポットまたは領域をクリックまたはタップすると、そのトリガーに関連付けられたアクションが実行されます。 アクションは、Web サイト上の別のページにリダイレクトされる場合や、製品情報を Web ページロジックに渡す場合があります。その後、クイックビューに関連する製品コンテンツをトリガー付けできます。

ビューアが完全にキーボードでアクセス可能になる。

詳しくは、 キーボードのアクセシビリティとナビゲーション.

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

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

ポップアップモードでは、ビューアは別の Web ブラウザーウィンドウまたはタブで開きます。 ブラウザーウィンドウの全領域を占め、ブラウザーのサイズが変更された場合や、モバイルデバイスの向きが変更された場合は調整されます。

ポップアップモードは、モバイルデバイスで最も一般的なモードです。 Web ページでは、 window.open() JavaScript 呼び出し（適切に設定） A HTML要素、またはその他の適切な方法。

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

<s7viewers_root>/html5/CarouselViewer.html

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

以下は、ビューアを新しいウィンドウでHTMLする開封コードの例です。

<a href="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/CarouselViewer.html?asset=/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner&serverurl=https://adobedemo62-h.assetsadobe.com/is/image" target="_blank">Open popup viewer</a>

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

埋め込みモードでは、ビューアは既存の Web ページに追加されます。 この Web ページには、ビューアに関連しない一部の顧客コンテンツが既に含まれている可能性があります。 ビューアは、通常、Web ページの一部の領域のみを占有します。

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

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

レスポンシブデザイン埋め込みは、コンテナのサイズ変更に応じて実行時にビューアのサイズを変更する必要がある場合を想定しています DIV. 最も一般的な使用例は、柔軟なページレイアウトを使用する Web ページにビューアを追加する場合です。

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

それ以外の場合は、Web ページでビューアのコンテナの幅と高さの両方が設定されている場合 DIVを指定した場合、ビューアはその領域だけを占めます。 また、Web ページレイアウトで指定されているサイズに従います。 良い例として、ビューアをモーダルオーバーレイに埋め込み、オーバーレイが Web ブラウザーのウィンドウサイズに従ってサイズ変更される場合があります。

固定サイズ埋め込み

ビューアを Web ページに追加するには、次の手順を実行します。

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

  2. コンテナの定義 DIV.

  3. ビューアのサイズを設定します。

  4. ビューアを作成および初期化する。

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

    ビューアを作成するには、HTMLhead にスクリプトタグを追加する必要があります。 ビューア API を使用する前に、 CarouselViewer.js. この CarouselViewer.js ファイルは html5/js/ 標準の IS-Viewers デプロイメントのサブフォルダー

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

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

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

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

  1. コンテナの定義 DIV.

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

    プレースホルダー DIV は位置固定された要素で、 position CSS プロパティがに設定されている relative または absolute.

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

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

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

    ビューアの静的サイズを設定するには、次のように宣言します .s7carouselviewer 最上位の CSS クラス ( 絶対単位で、または stagesize 修飾子。

    サイズ調整は、HTMLページで直接 CSS に配置できます。 または、カスタムビューアの CSS ファイルにサイズを設定し、その後、AEM Assets - On-demand でビューアプリセットレコードに割り当てるか、 style コマンドを使用します。

    詳しくは、 カルーセルビューアのカスタマイズ を参照してください。

    以下は、HTMLページで静的ビューアサイズを定義する例です。

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

    明示的に stagesize 修飾子を指定し、 params コレクション、または API 呼び出しとして（コマンドリファレンスの節で説明）使用できます。以下に例を示します。

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

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

  3. ビューアを作成および初期化する。

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

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

    同時に、コンテナ要素は必ずしも Web ページレイアウトに含まれているとは限りません。 例えば、 display:none スタイルが割り当てられています。 この場合、Web ページでコンテナ要素がレイアウトに戻るまで、ビューアは初期化プロセスを遅延します。 この機能が発生すると、ビューアの読み込みが自動的に再開されます。

    次の例では、ビューアインスタンスを作成し、最低限必要な設定オプションをコンストラクターに渡して、 init() メソッド。 この例では、次のように仮定します。 carouselViewer はビューアインスタンスです。 s7viewer はプレースホルダーの名前です DIV; https://adobedemo62-h.assetsadobe.com/is/image は画像サービングの URL で、 /content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner はアセットです。

    code language-javascript 
    <script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer ({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>

    次のコードは、固定サイズのカルーセルビューアを埋め込んだ簡単な Web ページの例です。

    code language-html 
    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
#s7viewer.s7carouselviewer {
 width: 1174px;
 height: 500px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

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

レスポンシブデザイン埋め込みでは、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. 次のコードは完全な例です。 ブラウザーのサイズが変更されたときにビューアのサイズが変化すること、およびビューアの縦横比がアセットと一致することに注意してください。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
.holder {
 width: 80%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

以下のサンプルページでは、高さ無制限のレスポンシブデザイン埋め込みの、より実際に使用されている例を示します。

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/carousel/CarouselViewer-responsive-unrestricted-height.html?lang=ja

幅と高さが定義されたフレキシブルサイズ埋め込み

幅と高さが定義されたフレキシブルサイズ埋め込みでは、Web ページのスタイル設定が異なります。 次の両方のサイズを "holder" DIV を指定し、ブラウザーウィンドウの中央に配置します。 また、Web ページでは HTML および BODY 要素を 100%に設定します。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

残りの埋め込み手順は、高さ無制限のレスポンシブ埋め込みに使用した手順と同じです。 結果の例は次のようになります。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

セッターベースの API を使用した埋め込み

JSON ベースの初期化を使用する代わりに、セッターベースの API と no-args コンストラクターを使用できます。 この API コンストラクターを使用する場合は、パラメーターは必要ありません。設定パラメーターは、 setContainerId(), setParam()、および setAsset() API メソッドを個別の JavaScript 呼び出しで使用できます。

次の例は、固定サイズ埋め込みをセッターベースの API で使用する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
#s7viewer.s7carouselviewer {
 width: 1174px;
 height: 500px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer();
carouselViewer.setContainerId("s7viewer");
carouselViewer.setParam("serverurl", "https://adobedemo62-h.assetsadobe.com/is/image");
carouselViewer.setAsset("/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner");
carouselViewer.init();
</script>
</body>
</html>
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8