カルーセルバナー

カルーセルバナーを使用すると、回転するインタラクティブなプロモーションコンテンツをマーケティング担当者が簡単に作成して、任意の画面に配信できるようになり、コンバージョンを推進できます。

プロモーションバナーに表示するコンテンツの作成や変更には時間がかかるので、新しいコンテンツをすぐに公開したり、ターゲットを絞り込んだりする際に制約が生じます。カルーセルバナーを使用すると、回転するバナーをすばやく作成または変更できます。製品の詳細や関連リソースにリンクするホットスポットなどのインタラクティビティを追加し、それらを任意の画面に配信できます。これにより、新しいプロモーションコンテンツをより迅速に市場に投入できます。

カルーセルバナーには「CAROUSELSET」と表示されます。

chlimage_1-438

Web サイトではカルーセルバナーは次のように表示されます。

chlimage_1-439

ここで、ユーザーが番号をクリックして画像を切り替えることができます。また、カスタマイズできる間隔に基づいて自動的にスライドを切り替えることもできます。カルーセルバナーに追加する画像は、ホットスポットと画像マップの両方に対応しており、選択するか、ハイパーリンクに移動するか、クイックビューウィンドウにアクセスします。

この例では、ユーザーは画像マップをタップまたはクリックして、グローブ用のクイックビューウィンドウにアクセスします。

chlimage_1-440

カルーセルバナーの作成方法の視聴

カルーセルバナーの作成方法に関するガイド（10 分 33 秒）を視聴します。また、カルーセルバナーのプレビュー、編集および配信方法についても説明します。

メモ

管理者以外のユーザーは、カルーセルバナーを作成または編集できるように、dam-users グループに追加される必要があります。作成や編集で問題が発生した場合、dam-users グループにユーザーを追加できるシステム管理者に確認してください。

クイックスタート：カルーセルバナー

カルーセルバナーを使用してすばやく作業を開始するには、次の手順を実行します。

ホットスポットと画像マップの変数を識別します（ Experience Manager Assets と Dynamic Media の両方を使用するユーザーのみ）。

まず、既存のクイックビュー実装で使用されている動的変数を識別します。こうすることで、Adobe Experience Manager Assets でのカルーセルバナー作成プロセスでホットスポットと画像マップのデータを適切に入力できます。

メモ

Experience Manager Sites または Ecommerce のユーザーである場合、組み込み機能を使用して製品ページに移動し、製品カタログで既存の SKU （在庫管理単位）を調べることができます。ホットスポットまたは画像マップの変数を手動で入力する必要はありません。eCommerce の設定に関する情報を参照してください。

Experience Manager Assets と Dynamic Media のユーザーである場合は、ホットスポットと画像マップのデータを手動で入力してから、公開済みの URL または埋め込みコードをサードパーティのコンテンツ管理システムに統合します。
オプション：必要であれば、カルーセルセットビューアプリセットを作成します。

管理者は、独自のカルーセルビューアプリセットを作成して、カルーセルの動作と外観をカスタマイズできます。主な利点は、複数のカルーセルに対してこのカスタムビューアプリセットを再利用できることです。ただし、ユーザーがカルーセルを作成するときに、カルーセルの動作や外観を直接カスタマイズすることもできます。カルーセルで特定のデザインが求められるケースではこの方法が適しています。
画像バナーをアップロードします。

インタラクティブにする画像バナーをアップロードします。
カルーセルセットの作成。

カルーセルセットでは、ユーザーはバナー画像を切り替え、ホットスポットまたは画像マップを選択して関連するコンテンツにアクセスします。

Assets でカルーセルセットを作成するには、「作成」を選択し、「カルーセルセット」を選択します。アセットをスライドに追加し、「保存」を選択します。エディター内で、カルーセルの外観と動作を直接編集することもできます。
画像バナーへのホットスポットまたは画像マップの追加.

1 つ以上のホットスポットまたは画像マップを画像バナーに追加し、それぞれにアクション（リンクやクイックビュー、エクスペリエンスフラグメントなど）を関連付けます。ホットスポットまたは画像マップを追加した後は、カルーセルセットを公開してタスクを終了します。公開によって埋め込みコードが生成されます。これは、コピーして Web サイトのランディングページに適用するために使用できます。

（オプション）カルーセルバナーのプレビューを参照してください（オプション）。必要に応じて、カルーセルセットの表示を確認して、インタラクティビティをテストすることができます。
カルーセルバナーを公開します。

他のアセットと同じようにカルーセルセットを公開します。Assets でカルーセルセットに移動し、選択して「公開」を選択します。カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。
次のいずれかの操作を行います。
- Web サイトページへのカルーセルバナーの追加Web サイトページにカルーセルバナーの URL またはコピーした埋め込みコードを追加できます。
  - カルーセルバナーと既存のクイックビューの統合。サードパーティの web コンテンツ管理システムを使用している場合は、新しいカルーセルバナーを、web サイト上の既存のクイックビュー実装に統合する必要があります。
- Experience Manager で web サイトにカルーセルバナーを追加します。 Experience Manager Sites のユーザーである場合は、Experience Manager でインタラクティブメディアコンポーネントを使用して、カルーセルセットをページに直接追加できます。

カルーセルセットを編集するには、カルーセルセットの編集を参照してください。また、カルーセルセットのプロパティを表示および編集することができます。

ホットスポットと画像マップの変数の識別

まず、既存のクイックビュー実装で使用されている動的変数を識別します。こうすることで、Experience Manager Assets でのカルーセルセット作成プロセスでホットスポットまたは画像マップのデータを適切に入力できます。

Experience Manager Assets 内のバナー画像にホットスポットまたは画像マップを追加する際に、各ホットスポットまたは画像マップに SKU とオプションの追加変数を割り当てます。これらの変数は、後でホットスポットまたは画像マップとクイックビューコンテンツを対応付けるために使用されます。

メモ

Experience Manager Sites または Experience Manager Ecommerce（あるいは両方）のユーザーである場合、この手順はスキップできます。ホットスポットまたは画像マップの変数を手動で識別する必要はありません。製品統合のために Ecommerce との統合を使用できます。eCommerce の設定に関する情報を参照してください。また、インタラクティブコンポーネントを使用し、Web ページにインタラクティブコンポーネントを追加できます。

Experience Manager Assets または Media のユーザーである場合は、URL または埋め込みコードを公開してから、サードパーティのコンテンツ管理システムに統合し、ホットスポットと画像マップを手動で識別します。

重要なのは、ホットスポットまたは画像マップのデータに関連付けられる変数の数とタイプを正しく識別することです。バナー画像に追加するそれぞれのホットスポットまたは画像マップは、既存のバックエンドシステム内で製品を一意に識別するための十分な情報を保持する必要があります。同時に、各ホットスポットまたは画像マップに、必要以上のデータを含めないようにしてください。必要以上のデータを含めると、データ入力プロセスが複雑になり、進行中のホットスポットまたは画像マップの管理でエラーが発生しやすくなるからです。

ホットスポットまたは画像マップのデータに使用する一連の変数を識別するには、様々な方法があります。

既存のクイックビュー実装を担当している IT 担当者に問い合わせれば済む場合もあります。おそらく IT 担当者であれば、システムのクイックビューを識別するために必要な最小限のデータセットを把握しています。ただし、フロントエンドコードの既存の動作を分析するだけでもかまいません。

ほとんどのクイックビュー実装では、次のような枠組みが使用されています。

ユーザーは Web サイト上の特定のユーザーインターフェイス要素をアクティベートします。例えば、「クイックビュー」ボタンをタップします。
Web サイトでは、必要に応じて、クイックビューのデータまたはコンテンツを読み込むための Ajax リクエストをバックエンドに送信します。
クイックビューのデータは、Web ページでのレンダリングに備えて、コンテンツに変換されます。
最後に、フロントエンドコードによってそのコンテンツが画面上に視覚的にレンダリングされます。

次に、クイックビュー機能が実装されている既存の Web サイトの各領域にアクセスしてクイックビューをトリガーし、そのクイックビューのデータまたはコンテンツを読み込むために web ページから送信される Ajax URL をキャプチャします。

通常、専門のデバッグツールを使用する必要はありません。最新の Web ブラウザーには、十分なタスクを実行できる Web インスペクターが備わっています。Web インスペクターが搭載されている Web ブラウザーの例を次に示します。

Google Chrome で、ブラウザーから送信されるすべての HTTP リクエストを参照するには、F12 キー（Windows）または Command + Option + I キー（Mac）を押してデベロッパーツールパネルを開き、「Network」タブを選択します。
Firefox では、F12 キー（Windows）または Command + Option + I キー（Mac）を押して Firebug プラグインを有効にして「Net」タブを使用するか、組み込みの Inspector ツールとその「Network」タブを使用します。

ブラウザーでネットワーク監視をオンにして、ページ上でクイックビューをトリガーします。

次に、ネットワークログ内でクイックビューの Ajax URL を見つけ、記録された URL を今後の分析のためにコピーします。通常、クイックビューをトリガーすると、多数のリクエストがサーバーに送信されます。クイックビューの Ajax URL は通常、そのリスト内の最初のほうにあります。この URL には複雑なクエリ文字列部分またはパスが含まれ、その応答の MIME タイプは text/html、text/xml、text/javascript のいずれかになります。

このプロセスの実行中は、製品カテゴリや製品タイプが異なる、Web サイトの様々な領域にアクセスすることが重要です。なぜなら、クイックビュー URL には、ある特定の Web サイトカテゴリに共通するが、Web サイトの異なる領域にアクセスした場合にのみ変化する部分が存在するからです。

単純なケースでは、クイックビュー URL 内で変化する唯一の部分が製品 SKU となります。その場合、SKU の値が、ホットスポットまたは画像マップをバナー画像に追加するために必要になる唯一のデータです。

一方、複雑なケースでは、クイックビュー URL に SKU 以外の様々な要素が含まれます（カテゴリ ID、カラーコード、サイズコードなど）。その場合、各要素は、カルーセルバナー機能のホットスポットまたは画像マップのデータ定義内の個別の変数になります。

次のクイックビュー URL の例と、その結果となるホットスポットまたは画像マップの変数について見てみましょう。

単一の SKU（クエリ文字列内）

記録されたクイックビューの URL：

https://server/json?productId=866558&source=100
https://server/json?productId=1196184&source=100
https://server/json?productId=1081492&source=100
https://server/json?productId=1898294&source=100

この URL で変化する唯一の部分は productId= というクエリ文字列パラメーターの値であり、これが SKU 値であることは明白です。したがって、ホットスポットや画像マップには、次のような値が設定された SKU フィールドのみが必要になります。 866558, 1196184, 1081492, 1898294.

単一の SKU（URL パス内）

記録されたクイックビューの URL：

https://server/product/6422350843
https://server/product/1607745002
https://server/product/0086724882

変化する部分はパスの最後の部分にあり、ホットスポット／画像マップの SKU 値（6422350843、1607745002,、0086724882.）になります

SKU とカテゴリ ID（クエリ文字列内）

記録されたクイックビューの URL：

https://server/quickView/product/?category=1100004&prodId=305466
https://server/quickView/product/?category=1100004&prodId=310181
https://server/quickView/product/?category=1740148&prodId=308706

この場合、URL には変化する部分が 2 つあります。SKU が prodId パラメーターに、カテゴリ ID が category= パラメーターに格納されています。

そのため、ホットスポット／画像マップ定義はペアになります。つまり、SKU 値と、categoryId という追加の変数です。結果のペアは次のようになります。

SKU が 305466、categoryId が 1100004。
SKU が 310181、categoryId が 1100004。
SKU が 308706、categoryId が 1740148。

画像バナーのアップロード

使用する画像を既にアップロードしている場合は、次の手順（カルーセルセットの作成）に進んでください。カルーセルで使用される画像をアップロードする前に Dynamic Media を有効にしておく必要があることに注意してください。

画像バナーをアップロードするには、アセットのアップロードを参照してください。

カルーセルセットの作成

メモ

カルーセルセットを作成するには：

Assets で、カルーセルセットを作成するフォルダーに移動し、作成／カルーセルセットに移動します。
カルーセルバナーエディターページで「タップしてアセットセレクターを開く」を選択し、最初のスライドの画像を選択します。

カルーセルバナーエディターページで次のいずれかをおこないます。
- ページの左上隅付近にある「スライドを追加」を選択します。
- ページの中央付近にある「タップしてアセットセレクターを開く」を選択します。
カルーセルセットに含めるアセットを選択します。選択済みのアセットにはチェックマークアイコンが付いています。作業が完了したら、ページの右上隅付近にある「選択」を選択します。

アセットセレクターでは、キーワードを入力して Enter キーをタップまたはクリックすることで、アセットを検索することができます。フィルターを適用して、検索結果を絞り込むこともできます。パス、コレクション、ファイルタイプおよびタグでフィルタリングできます。フィルターを選択してから、ツールバーの フィルター アイコンを選択します。表示アイコンをタップし、列表示、カード表示、リスト表示のいずれかを選択してビューを変更します。

詳しくは、セレクターの操作を参照してください。
カルーセルセット内で回転させたい画像をすべて追加してしまうまで、スライドを追加し続けます。
（オプション）次のいずれかの操作を行います。
- 必要に応じてスライドをドラッグし、画像をセットのリスト内で並べ替えます。
- 画像を削除するには、画像を選択し、ツールバーで「スライドを削除」を選択します。
- プリセットを適用するには、ページの右上隅付近にあるプリセットドロップダウンリストを選択し、セットに一度に適用するプリセットを選択します。
スライドを削除するには、スライドを選択し、ツールバーで「 スライドを削除」を選択します。スライドを移動するには、並べ替えアイコンを選択して、希望の場所まで移動します。
スライドに画像を追加した後で、ホットスポットまたは画像マップ（または両方）を画像に追加できます。詳しくは、画像バナーへのホットスポットまたは画像マップの追加を参照してください。

カルーセルセットの視覚的なデザインと動作を変更できます。「動作」タブと「外観」タブを選択して、カルーセルバナーの外観や特定のコンポーネントの動作を調整します。ビューアエディターの使用方法について詳しくは、ビューアプリセットの管理を参照してください。

メモ

カルーセルバナーの場合は、次のように調整できます。

* 1 つの画像が表示される時間。デフォルトでは、各画像は 9 秒間表示されます。
* アニメーション.デフォルトでは、各スライドのトランジションはフェードです。これをスライドのトランジションに変更できます。
* ボタンのスタイル。ユーザーは点または番号をタップしてバナーの画像を切り替えることができます。セットインジケーターボタンの表示位置（とスタイルが番号か点か）と大きさを変更できます。
* 画像マップまたはホットスポットに使用されるアイコンのハイライトスタイルを変更します。
* ビューアプリセットを編集する前に、プリセットの基にするスタイルを選択します。スタイルを選択しないと、ビューアプリセットの編集を開始した後、別のプリセットに切り替えることにした場合に、変更内容をすべて失うことになります。

ビューアエディターの詳細や使用手順は、カルーセルバナーに関する注意事項を参照してください。

また、カルーセルバナーの表示をプレビューすることもできます。（オプション）カルーセルバナーのプレビューを参照してください。

終了したら「保存」を選択します。

カルーセルセットエディターを使用して、ホットスポットまたは画像マップをバナーに追加できます。

ホットスポットまたは画像マップを追加する際に、クイックビューポップアップ表示、ハイパーリンクまたはエクスペリエンスフラグメントとして定義することができます。

エクスペリエンスフラグメントを参照してください。

メモ

カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされないことに注意してください。

この問題を回避するには、ソーシャルメディアでの共有ツールを持たないビューアプリセットを使用または作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。

画像にホットスポットまたは画像マップを追加したら、忘れずに作業内容を保存してください。ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成／編集セッションの間で有効です。

カルーセルバナーの作成が完了したら、プレビューを使用して、カルーセルバナーが顧客にどのように表示されるかを確認できます。

（オプション）カルーセルバナーのプレビューを参照してください。

メモ

インタラクティブ画像またはカルーセルバナー内の画像にホットスポットを追加すると、ホットスポット情報は同じメタデータの場所に保存されます。この場所は、インタラクティブ画像かカルーセルバナーかに関係なく、画像の場所に対する相対的な位置になります。つまり、どちらのビューアでも、同じ画像を、定義済みのホットスポットデータとともに簡単に再使用することができます。
ただし、カルーセルバナーでは、ホットスポットを含む画像のイメージマップをサポートしていますが、インタラクティブ画像ではサポートしていません。同じ画像を使用するインタラクティブ画像またはカルーセルバナーを作成する場合には、この点に注意してください。代わりに、同じ画像の別のコピーを使用して、インタラクティブ画像とカルーセルバナーを作成することを検討してください。

メモ

ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。

画像マップの追加も参照してください。

画像バナーにホットスポットまたは画像マップを追加するには：

Assets ビューで、インタラクティブにするカルーセルセットに移動します。
カルーセルセットを選択し、「編集」を選択します。カルーセルビューアエディターが開きます。
インタラクティブにするスライドを選択します。
ページの左上隅付近にある「ホットスポット」または「画像マップ」を選択します。
次のいずれかの操作を行います。
- ホットスポットの場合：画像の上で、ホットスポットを表示する場所を選択します。
- 画像マップの場合：画像上で選択し、左上から右下にドラッグして画像マップ領域を作成します。画像マップのサイズを調整するには、隅をドラッグします。
必要に応じて、ホットスポットまたは画像マップを別の場所にドラッグします。必要に応じて、他のホットスポットまたは画像マップを追加します。

ホットスポットまたは画像マップを削除するには、「アクション」タブを選択します。マップとホットスポット見出しの下にある選択したタイプドロップダウンメニューから、削除するホットスポットまたは画像マップの名前を選択します。メニューの横にあるごみ箱アイコンを選択したあと、「削除」を選択します。
「名前」テキストフィールドにホットスポットまたは画像マップの名前を入力します。この名前はマップとホットスポットドロップダウンリストにも表示されます。名前を指定すると、後で変更を加える際に、ホットスポットまたは画像特定しやすくなります。
「アクション」タブで次のいずれかの操作を行います。
- 「クイックビュー」を選択します。
  - Experience Manager Sites と eCommerce をご利用の場合は、製品ピッカーアイコン（虫眼鏡）を選択して、製品を選択ページを開きます。使用する製品を選択してから、ページの右上隅のチェックマークを選択して、カルーセルバナーエディターに戻ります。
  - Experience Manager Sites または eCommerce の顧客でない場合は、次のようにします。
    - これらの変数を定義するときは、ホットスポットの変数の識別を参照してください。
    - 次に、SKU 値を手動で入力します。「SKU 値」テキストフィールドに、製品の SKU（Stock Keeping Unit）を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、タップされたホットスポットが特定の SKU のクイックビューに関連付けられます。
    - （オプション）クイックビュー内で製品をさらに識別するために必要な他の変数がある場合は、「汎用変数を追加」を選択します。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Mens などと指定します。
    - 詳しくは、セレクターの操作を参照してください。
- 「ハイパーリンク」を選択します。
  - Adobe Experience Manager Sites のユーザーである場合は、サイトセレクターアイコン（フォルダー）を選択して URL に移動します。
    
    メモ
    
    インタラクティブコンテンツに相対 URL のリンク（特に Experience Manager Sites ページへのリンク）がある場合、URL ベースのリンク方法は使用できません。
  - スタンドアロンユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。
このリンクを新しいブラウザータブで開く（推奨のデフォルト）か同じタブで開くかを指定してください。

詳しくは、セレクターの操作を参照してください。
- 「エクスペリエンスフラグメント」を選択します。
  - Adobe Experience Manager Sites のユーザーである場合は、検索アイコン（虫眼鏡）を選択してエクスペリエンスフラグメントページを開きます。使用するエクスペリエンスフラグメントを選択し、ページの右上隅の「選択」を選択して、ホットスポット管理ページに戻ることができます。
    エクスペリエンスフラグメントを参照してください。
  - エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。
    
    メモ
    
    カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされないことに注意してください。
    この問題を回避するには、ソーシャルメディアでの共有ツールを持たないビューアープリセットを作成します。このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。
また、カルーセルバナーの表示をプレビューすることもできます。（任意）カルーセルバナーのプレビューを参照してください。
「保存」を選択します。
カルーセルセットを公開します。公開によって、Web サイトのページで使用できる、埋め込みコードまたは URL が生成されます。Experience Manager Sites をご利用の場合は、カルーセルセットを web ページに直接追加できます。

アセットの公開を参照してください。

Web サイトランディングページへのカルーセルセットの追加を参照してください。

カルーセルセットの編集

メモ

カルーセルセットには、次のような様々な編集タスクを実行できます。

カルーセルセットにスライドを追加します。セレクターの操作も参照してください。
カルーセルセット内のスライドを並べ替えます。
カルーセルセットのアセットを削除します。
ビューアプリセットを適用します。
カルーセルセットを削除します。
ホットスポットや画像マップを追加または編集します。セレクターの操作も参照してください。

カルーセルセットを編集するには：

次のいずれかの操作を行います。
- カルーセルセットアセットの上にマウスポインターを置き、編集（鉛筆アイコン）を選択します。
- カルーセルセットアセットにカーソルを合わせ、「選択」（チェックマークアイコン）を選択してから、ツールバーから編集を選択してください。
- カルーセルセットアセットを選択し、ページの左上隅にある「編集」（鉛筆アイコン）を選択します。
カルーセルセットを編集するには、次のいずれかの操作を行います。
- スライドを追加するには、スライドを追加アイコンを選択し、そのスライドに追加したいアセットに移動してから、チェックマークを選択してください。
- スライドを並べ替えるには、スライドを新しい位置までドラッグします（並べ替えアイコンを選択して項目を移動します）。
- ホットスポットまたは画像マップを追加するには、ホットスポットまたは画像マップのアイコンを選択し、「ホットスポットおよび画像マップの追加」を参照してください。
- カルーセルセットの外観や動作を編集するには、外観タブまたは動作タブを選択してから、必要なオプションを設定してください。
- ホットスポットまたは画像マップを編集するには、対応するスライドのアクションタブの下で、ホットスポットまたは画像マップを選択し、必要に応じて変更を加えます。
- スライドを削除するには、スライドを選択してから、ツールバーのスライドを削除を選択してください。
- プリセットを適用するには、ページの右上隅付近にあるプリセットドロップダウンリストを選択し、ビューアプリセットを選択します。
- カルーセルセット全体を削除するには、カルーセルセットの場所に移動して選択し、「削除」を選択します。
メモ

ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。

（オプション）カルーセルバナーのプレビュー

プレビューを使用して、カルーセルバナーが顧客にどのように表示されるかを確認し、カルーセルバナーのホットスポットと画像マップが期待通りに動作しているかどうかをテストすることができます。

カルーセルバナーの設定が完了したら、このカルーセルバナーを公開できます。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。Web アプリケーションへの URL のリンクを参照してください。インタラクティブコンテンツに相対 URL のリンク（特に Experience Manager Sites ページへのリンク）がある場合、URL ベースのリンク方法は使用できません。ページへの Dynamic Media アセットの追加を参照してください。

カルーセルバナーは、カルーセルエディター（推奨）またはビューアリストでプレビューできます。

カルーセルバナーをプレビューするには:

Assets で、作成したカルーセルバナーの場所に移動し、選択して開きます。
「編集」を選択します。
ツールバーの右端にあるビューアプリセットリストで、カルーセルバナーをプレビューするビューアを選択します。
プレビューを選択します。
画像上のホットスポットや画像マップを選択し、関連するアクションをテストすることができます。

ビューアリストでカルーセルバナーをプレビューするには:

Assets で、作成したカルーセルバナーの場所に移動し、選択して開きます。
プレビューページの左上隅付近にある「コンテンツ」アイコンを選択します。
ページの左側のパネルにあるビューアリストで、使用するカルーセルバナービューアプリセットの名前を選択します。
画像上のホットスポットや画像マップを選択し、関連するアクションをテストすることができます。

カルーセルバナーの公開

カルーセルを公開して使用できるようにします。カルーセルセットを公開すると、URL と埋め込みコードがアクティベートされます。これにより、スケーラブルで効率の良い配信を実現するため、CDN と統合された Dynamic Media クラウドにもカルーセルが公開されます。

メモ

ホットスポットを含む既存のインタラクティブ画像をカルーセルバナー用として使用する場合は、カルーセルバナーを公開した後で、そのインタラクティブ画像を別に公開する必要があります。
また、カルーセルバナーで使用している公開済みインタラクティブ画像を変更する場合は、そのインタラクティブ画像を公開する必要があります。その後、変更がカルーセルバナーに反映されます。

カルーセルバナーの公開方法については、「Dynamic Media アセットの公開」を参照してください。

バナー画像をアップロードしてカルーセルを作成し、ホットスポットまたは画像マップ（あるいは両方）を画像に追加し、カルーセルセットを公開したら、次は既存の web サイトページにカルーセルを追加できます。

メモ

Experience Manager Sites の顧客である場合は、インタラクティブメディアコンポーネントをページにドラッグすることにより、カルーセルバナーをページに直接追加できます。ページへの Dynamic Media アセットの追加を参照してください。

ただし、スタンドアロンの Experience Manager アセットの顧客の場合、この節で説明するように、カルーセルバナーを web サイトのランディングページに手動で追加することができます。

公開済みのカルーセルバナーの埋め込みコードをコピーします。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。
Experience Manager Assets から web ページにコピーした埋め込みコードを追加します。
コピーされた埋め込みコードはレスポンシブなため、ページの埋め込み領域に自動的に適応します。

メモ

この手順はスタンドアロンの Experience Manager Assets のお客様のみに適用されます。

このプロセスの最後のステップは、カルーセルバナーを web サイトの既存のクイックビュー実装に統合することです。すべてのクイックビュー実装は固有であり、フロントエンド IT 担当者の支援を受けた特別なアプローチが必要になります。

既存のクイックビュー実装は一般的に、Web ページ上で以下の順に発生する、相互に関連するアクションの連鎖となっています。

ユーザーは、Web サイトのユーザーインターフェイス内で、特定の要素を起動します。
フロントエンドコードは、手順 1 で起動されたユーザーインターフェイス要素に基づいてクイックビュー URL を取得します。
フロントエンドコードは、手順 2 で取得した URL を使用して Ajax リクエストを送信します。
バックエンドロジックは、対応するクイックビューのデータまたはコンテンツをフロントコードに送り返します。
フロントエンドコードは、そのクイックビューのデータまたはコンテンツを読み込みます。
（オプション）フロントエンドコードは、読み込んだクイックビューのデータを HTML 表現に変換します。
フロントエンドコードは、モーダルダイアログボックスまたはパネルを表示し、エンドユーザー向けに、画面上に HTML コンテンツをレンダリングします。

これらの呼び出しは、必ずしもそれぞれ独立した、Web ページのロジックから任意の手順で呼び出すことができるパブリックな API 呼び出しを表すわけではありません。むしろ、次の手順が前の手順の最後のフェーズ（コールバック）に隠されているような連鎖的な呼び出しになっています。

カルーセルバナーが手順 1 と（部分的に）手順 2 を置き換えます。それに加えて、ユーザーがカルーセルバナー内のホットスポットまたは画像マップをタップすると、そのような操作はビューアーによって処理されます。ビューアは、以前に追加されたすべてのホットスポットまたは画像マップのデータを含む Web ページにイベントを返します。

そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。

カルーセルバナーから送出されるイベントをリッスンします。
ホットスポットデータまたは画像マップデータにもとづいて、クイックビューの URL を作成します。
バックエンドからクイックビューを読み込み、表示用に画面にレンダリングするプロセスをトリガーします。

Experience Manager Assets によって返される埋め込みコードには、すぐに使用可能なイベントハンドラーが既に含まれ、コメントアウトされています。

そのため、必要な処理は、このコードのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。

クイックビュー URL の作成プロセスは、先ほど説明したホットスポットと画像マップの変数を識別するためのプロセスとは逆のプロセスになります。

ホットスポットと画像マップの変数の識別を参照してください。

クイックビュー URL をトリガーしてクイックビューパネルをアクティベートするための最後の手順では、おそらく IT 部門のフロントエンド IT 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しくトリガーするための最適な方法について理解しています。