カルーセルバナー

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

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

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

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

数字をクリックして画像間を移動できます。 また、カスタマイズできる間隔に基づいて自動的にスライドを切り替えることもできます。カルーセルバナーに追加する画像は、ホットスポットと画像マップの両方をサポートしています。ユーザーは、タップまたはハイパーリンクへの移動、またはクイック表示ウィンドウへのアクセスが可能です。

この例では、ユーザが画像マップをタップまたはクリックして、手袋のクイック表示ウィンドウにアクセスしました。

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

10 分 33 秒のカルーセルバナーの作成方法に関する説明を視聴してください。カルーセルバナーのプレビュー、編集、配信方法についても学習します。

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

すぐに使い始めるには：

1. ホットスポットと画像マップの変数の特定 (Adobe Experience Managerアセット+Dynamic Mediaを使用しているお客様のみ)

   既存のクイック表示実装で使用される動的変数を識別して開始します。 これにより、Experience Managerアセットでカルーセルバナーを作成する際に、ホットスポットと画像マップのデータを正しく入力できます。

1. オプション：必要であれば、カルーセルセットビューアプリセットを作成します。

   管理者は、独自のカルーセルビューアプリセットを作成して、カルーセルの動作と外観をカスタマイズできます。主な利点は、このカスタムビューアプリセットを複数のカルーセルに再利用できる点です。 ただし、カルーセルの作成時に、カルーセルの動作と外観を直接カスタマイズすることもできます。 この方法は、任意のカルーセルに対して特定のデザインを必要とする場合に適しています。

2. 画像バナーをアップロードします。

   インタラクティブにする画像バナーをアップロードします。

3. カルーセルセットを作成します。

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

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

4. 画像バナーにホットスポットまたは画像マップを追加します。

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

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

5. カルーセルバナーを公開します。

   他のアセットと同じようにカルーセルセットを公開します。Assets でカルーセルセットに移動し、選択して「公開」をタップします。カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。

6. 次のいずれかの操作をおこないます。

   • Web サイトへのカルーセルバナーの追加Web サイトページにカルーセルバナーの URL またはコピーした埋め込みコードを追加できます。

     • カルーセルバナーを既存のクイック表示と統合します。サードパーティのWebコンテンツ管理システムを使用する場合は、新しいカルーセルバナーをWebサイト上の既存のクイック表示実装に統合する必要があります。

   • Experience Manager内追加のWebサイトのカルーセルバナー。Experience Managerサイトのお客様は、インタラクティブメディアコンポーネントを使用してカルーセルセットを直接ページに追加できます。

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

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

既存のクイック表示実装で使用される動的変数を識別して開始します。 この方法を使用すると、Experience Managerアセットでカルーセルセットを作成する際に、ホットスポットまたは画像マップデータを正しく入力できます。

バナー画像にホットスポットまたは画像マップを追加する場合は、SKU(Stock Keeping Unit)を割り当てます。 各ホットスポットまたは画像マップに、オプションで追加の変数を割り当てることもできます。 これらの変数は、後でホットスポットや画像マップをクイック表示のコンテンツと一致させるために使用されます。

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

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

既存のクイック表示の導入を担当するITスペシャリストに相談するのに十分な場合があります。 システム内のクイック表示を識別するための最小データセットは何かを知っている可能性が高くなります。 ただし、フロントエンドコードの既存の動作を単純に分析することは可能です。

ほとんどのクイック表示の実装では、次のようなパラダイムが使用されます。

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

次に、クイック表示機能が実装されている既存のWebサイトの様々な領域を訪問します。 次に、クイック表示をトリガーし、Webページから送信されたAjax URLを取得して、クイック表示のデータまたはコンテンツを読み込みます。

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

• Google Chromeで送信されたすべてのHTTP要求を表示するには、F12(Windows)またはCommand-Option-I(Mac)を押して、開発者ツールパネルを開きます。 「ネットワーク」タブをタップします。
• Firefoxでは、F12キー(Windows)またはCommand-Option-Iキー(Mac)を押してFirebugプラグインをアクティブ化できます。 [ネットワーク]タブを使用するか、組み込みの[インスペクタ]ツールと[ネットワーク]タブを使用します。

ブラウザーでネットワーク監視を有効にする場合は、ページのクイック表示をトリガーします。

次に、表示ログでクイックネットワークのAjax URLを探し、記録したURLをコピーして、分析を後で行います。 通常、クイック表示をトリガーすると、サーバーに送信される要求が多数あります。 通常、クイック表示のAjax URLはリストの最初のURLの1つです。 この 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 値であることは明白です。したがって、ホットスポットや画像マップに必要なのは、 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が有効になった後にアップロードする必要があります。

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

カルーセルセットの作成

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

1. Assets で、カルーセルセットを作成するフォルダーに移動し、作成／カルーセルセット​をタップします。

2. カルーセルバナーエディターページで「タップしてアセットセレクターを開く」をタップし、最初のスライドの画像を選択します。

   カルーセルバナーエディターページで次のいずれかをおこないます。

   • ページの左上隅付近にある「スライドを追加」をタップします。

   • ページの中央付近にある「タップしてアセットセレクターを開く」をタップします。

   カルーセルセットに含めるアセットをタップして選択します。選択したアセットには、チェックマークのアイコンが表示されます。 終了したら、ページ右上隅近くにある「選択」をタップします。

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

   詳しくは、セレクターの操作を参照してください。

3. カルーセルセット内で回転させたい画像をすべて追加してしまうまで、スライドを追加し続けます。

4. （オプション）次のいずれかの操作をおこないます。

   • 必要に応じて、スライドをドラッグしてリスト内の画像を並べ替えます。

   • 画像を削除するには、画像を選択し、ツールバーの​スライドを削除​をタップします。

   • プリセットを適用するには、ページの右上隅付近にあるプリセットドロップダウンリストをタップし、セットに一度に適用するプリセットを選択します。

   スライドを削除するには、スライドをタップまたはクリックし、ツールバーの「スライドを削除」をクリックします。スライドを移動するには、順序変更アイコンをタップし、押したまま、目的の位置に移動します。

5. スライドに画像を追加した後で、ホットスポットまたは画像マップ（または両方）を画像に追加できます。ホットスポットまたは画像マップの追加を参照してください。

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

   メモ

   カルーセルバナーでは、以下を調整できます。

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

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

7. 終了したら「保存」をタップします。

画像バナーへのホットスポットまたは画像マップの追加

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

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

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

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

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

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

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

1. Assets ビューで、インタラクティブにするカルーセルセットに移動します。

2. カルーセルセットを選択し、「編集」をタップします。カルーセルビューアエディターが開きます。

3. インタラクティブにするスライドを選択します。

4. ページの左上隅付近にある「ホットスポット」または「画像マップ」をタップします。

5. 次のいずれかの操作をおこないます。

   • ホットスポットの場合：画像の上で、ホットスポットを表示する場所をタップします。
   • 画像マップの場合：画像上でをクリックし、左上から右下にドラッグして、画像マップ領域を作成します。 画像マップのサイズを調整するには、隅をドラッグします。

   必要に応じて、ホットスポットまたは画像マップを別の場所にドラッグします。または、キーボードの矢印キーを使用して、選択したホットスポットの位置を制御します。 必要に応じて、追加より多くのホットスポットまたは画像マップが作成されます。

   ホットスポットまたは画像マップを削除するには、「アクション」タブをタップします。マップとホットスポット​の見出しの下の​選択したタイプ​ドロップダウンリストから、削除するホットスポットまたは画像マップの名前を選択します。 メニューの横にある​ごみ箱​アイコンをタップし、「削除」をタップします。

6. 「名前」テキストフィールドにホットスポットまたは画像マップの名前を入力します。この名前は​マップとホットスポット​ドロップダウンリストにも表示されます。名前を指定すると、ホットスポットや画像マップを変更した場合に、そのホットスポットや画像マップを識別しやすくなります。

7. 「アクション」タブで次のいずれかの操作をおこないます。

   • クイック表示​をタップします。

     • Experience Managerサイトのお客様の場合は、製品選択アイコン（虫めがね）をタップして、製品を選択ページを開きます。 カルーセルバナーエディターに戻るには、使用する製品をタップし、ページの右上隅のチェックマークをタップします。

     • Experience Managerサイトのお客様でない場合：

       • 変数を定義します。 ホットスポットの変数の識別を参照してください。

       • 次に、SKU 値を手動で入力します。「SKU 値」テキストフィールドに、製品の SKU（Stock Keeping Unit）を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力したSKU値によって、クイック表示テンプレートの可変部分が自動的に設定されます。 タップされたホットスポットを特定のSKUのクイック表示に関連付けることができるようになりました。

       • （オプション）クイック表示内に他の変数があり、それを使用して製品をさらに識別する必要がある場合は、追加汎用変数​をタップします。 テキストフィールドで、追加の変数を指定します。 例えば、追加の変数として category=Mens などと指定します。

       • 詳しくは、セレクターの操作を参照してください。

   • 「ハイパーリンク」をタップします。

     • AEM Sites のユーザーである場合は、サイトセレクターアイコン（フォルダー）をタップして URL に移動します。

       メモ

       インタラクティブコンテンツに相対 URL のリンク（特に AEM Sites ページへのリンク）がある場合、URL ベースのリンク方法は使用できません。

     • スタンドアロンのお客様の場合は、hrefテキストフィールドに、リンクされたWebページの完全なURLパスを指定します。

   このリンクを新しいブラウザータブで開く（推奨のデフォルト）か同じタブで開くかを指定してください。

   詳しくは、セレクターの操作を参照してください。

   • 「エクスペリエンスフラグメント」をタップします。

     • AEM Sites のユーザーである場合は、検索アイコン（虫眼鏡）をタップしてエクスペリエンスフラグメントページを開きます。ホットスポット管理ページに戻るには、使用するエクスペリエンスフラグメントをタップし、ページの右上隅にある「選択」をタップします。
       エクスペリエンスフラグメントを参照してください。

     • エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。

       メモ

       カルーセルバナーのソーシャルメディア共有ツールは、エクスペリエンスフラグメントにビューアを埋め込む場合はサポートされません。
       この点を回避するには、ソーシャルメディア共有ツールを備えていないビューアプリセットを使用または作成します。 このようなビューアプリセットを使用すると、ビューアをエクスペリエンスフラグメントに正常に埋め込むことができます。

   

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

8. 「保存」をタップします。

9. カルーセルセットを公開します。公開によって、Web サイトのページで使用できる、埋め込みコードまたは URL が生成されます。Experience Managerサイトのお客様の場合は、カルーセルセットを直接Webページに追加します。

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

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

カルーセルセットの編集

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

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

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

1. 次のいずれかの操作をおこないます。

   • カルーセルセットアセットの上にカーソルを置き、編集（鉛筆アイコン）をタップします。

   • カルーセルセットアセットの上にカーソルを置き、選択（チェックマークのアイコン）をタップし、ツールバーの​編集​をタップします。

   • カルーセルセットアセットをタップし、ページの左上隅にある「編集」（鉛筆アイコン）をタップします。

2. カルーセルセットを編集するには、次のいずれかの操作をおこないます。

   • スライドを追加するには、スライド​追加アイコンをタップします。 そのスライドに追加するアセットに移動し、チェックマークをタップまたはクリックします。
   • スライドの順序を変更するには、スライドを新しい位置にドラッグします（項目を移動するには、順序変更アイコンを選択します）。
   • ホットスポットまたは画像マップを追加するには、ホットスポットまたは画像マップのアイコンをクリックし、ホットスポットおよび画像マップの追加を参照してください。
   • カルーセルセットの外観や動作を編集するには、「外観」タブまたは「動作」タブをタップし、必要なオプションを設定します。
   • ホットスポットまたは画像マップを編集するには、該当するスライドで、ホットスポットまたは画像マップを選択します。 「アクション」タブで変更を行います。
   • スライドを削除するには、スライドを選択し、ツールバーの​スライドを削除​をタップします。
   • プリセットを適用するには、ページの右上隅付近にある「プリセット」ドロップダウンリストをタップし、ビューアプリセットを選択します。
   • カルーセルセット全体を削除するには、カルーセルセットの場所に移動して選択し、「削除」をタップします。
   メモ

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

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

カルーセルバナーは、プレビューを使用して、ユーザーにとってどのような外観を持つかを確認できます。 また、プレビューを使用すると、カルーセルバナーのホットスポットと画像マップをテストして、期待どおりに動作するかを確認できます。

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

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

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

1. Assets で、作成したカルーセルバナーの場所に移動し、タップして開きます。

2. 「編集」をタップします。

3. ツールバーの右隅のビューアプリセットリストで、カルーセルバナーをプレビューするビューアを選択します。

   

4. 「プレビュー」をタップします。

5. 関連するアクションをテストするには、画像上のホットスポットまたは画像マップをタップします。

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

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

カルーセルバナーの公開

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

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

Web サイトページへのカルーセルバナーの追加

バナー画像をアップロードしてカルーセルを作成した後、バナーにホットスポットや画像マップを追加したり、その両方を追加したりします。 カルーセルセットを公開しました。 これで、既存のWebサイトページに追加する準備が整いました。

ただし、スタンドアロンのExperience Managerアセットをご利用の場合は、カルーセルバナーをWebサイトのランディングページに手動で追加できます。

1. 公開済みのカルーセルバナーの埋め込みコードをコピーします。Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。

2. Experience Manager追加アセットからWebページにコピーした埋め込みコード。
   コピーされた埋め込みコードはレスポンシブなので、ページの埋め込み領域に合わせて自動的に調整されます。

カルーセルバナーと既存のクイック表示の統合

注意：この手順は、スタンドアロンのAEM Assetsのお客様の場合にのみ適用されます。

このプロセスの最後の手順は、カルーセルバナーとWebサイト上の既存のクイック表示実装を統合することです。 すべてのクイック表示の実装は独自のものであり、通常はフロントエンドのIT担当者の支援を必要とする、特定のアプローチが必要です。

既存のクイック表示の実装は、通常、Webページ上で発生する相互に関連するアクションのチェーンを次の順序で表します。

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

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

カルーセルバナーがステップ1を置き換えるのと同時に、部分的にステップ2を行うのと同時に、ユーザがホットスポットまたは画像マップをクリックした場合、そのようなインタラクションはビューアで処理されます。 ビューアは、以前に追加されたすべてのホットスポットまたは画像マップのデータを含む Web ページにイベントを返します。

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

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

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

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

クイック表示URLを作成するプロセスは、前述のホットスポット変数と画像マップ変数を識別するプロセスとは逆です。

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

クイック表示URLをトリガーし、クイック表示パネルをアクティブにする最後の手順は、おそらく、IT部門のフロントエンドIT担当者の支援が必要です。ユーザーは、クイック表示の導入を正確にトリガーする方法を最もよく理解し、使いやすいクイック表示URLを適切な手順から取得できます。

クイック表示を使用したカスタムポップアップウィンドウの作成

「クイック表示を使用したカスタムポップアップウィンドウの作成」を参照してください。