[AEM Assets]{class="badge positive" title="AEM Assetsに適用)。"}

カルーセルバナー carousel-banners

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

プロモーションバナーのコンテンツを制作、修正するのは時間がかかり、新しいコンテンツをすばやく公開したり、よりターゲットを絞って制作したりすることができません。 カルーセルバナーを使用すると、回転するバナーをすばやく作成または変更したり、インタラクティブ機能(製品の詳細や関連リソースへのホットスポットリンクなど)を追加したりできます。 あらゆるデバイスに配信できるため、新しいプロモーションコンテンツを迅速にリリースできます。

CAROUSELSET​という単語のバナーは、カルーセルバナーを指定します。

chlimage1-438

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

chlimage1-439

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

この例では、ユーザーは画像マップを選択して、手袋のクイックビューウィンドウにアクセスしました。

chlimage1-440

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

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

最初のステップは以下のとおりです。

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

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

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

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

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

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

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

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

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

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

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

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

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

    任意のアセットを実行する際に、カルーセルセットを公開します。 Assetsで、「カルーセルセット」に移動して選択し、「公開」を選択します。 カルーセルセットを公開すると、URL と埋め込み文字列がアクティベートされます。

  6. 次のいずれかの操作を行います。

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

ホットスポットと画像マップの変数の識別 identifying-hotspot-and-image-map-variables

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

バナー画像にホットスポットまたは画像マップを追加する場合は、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 には複雑なクエリ文字列部分またはパスが含まれ、その応答の MIME タイプは text/htmltext/xmltext/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 値(64223508431607745002,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 が 305466categoryId1100004

  • SKU が 310181categoryId1100004

  • SKU が 308706categoryId1740148

画像バナーのアップロード uploading-image-banners

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

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

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

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

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

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

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

    • ページの左上隅付近にある「スライドを追加」アイコンを選択します。

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

    カルーセルセットに含めるアセットを選択します。 選択済みのアセットにはチェックマークアイコンが付きます。 完了したら、ページの右上隅付近にある「選択」を選択します。

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

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

  3. すべての画像が追加されるまで、引き続きスライドを追加します。 これらの画像は、カルーセルセットで回転させたい画像です。

  4. (オプション)次のいずれかの操作を行います。

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

    • 画像を削除するには、画像を選択し、「スライドを削除」を選択します。

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

    スライドを削除するには、目的のスライドを選択します。 ツールバーで、スライドを削除​を選択します。 スライドを移動するには、並べ替えアイコンを選択して、目的の場所に移動します。

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

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

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

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

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

画像バナーへのホットスポットまたは画像マップの追加 adding-hotspots-or-image-maps-to-an-image-banner

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. 次のいずれかの操作を行います。

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

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

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

  6. 「名前」テキストフィールドにホットスポットまたは画像マップの名前を入力します。 この名前は、マップとホットスポット ドロップダウンリストにも表示されます。 名前を指定すると、ホットスポットまたは画像マップを簡単に識別できます。 将来これを変更する場合は、これを行います。

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

    • クイックビュー」を選択します。

      • Experience Manager Sites のユーザーである場合は、製品ピッカーアイコン(虫眼鏡)を選択して、製品を選択ページを開きます。 カルーセルバナーエディターに戻るには、使用する製品を選択し、ページの右上隅のチェックマークを選択します。

      • Experience Manager Sites のお客様でない場合:

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

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

        • (オプション)クイックビュー内に、製品をさらに識別するために使用する必要がある他の変数がある場合は、「汎用変数を追加」を選択します。 テキストフィールドに追加の変数を指定します。 例えば、category=Menswearは追加変数です。

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

    • ハイパーリンク」を選択します。

      • Adobe Experience Manager Sites のユーザーである場合は、サイトセレクターアイコン(フォルダー)を選択して URL に移動します。

        note
        NOTE
        インタラクティブコンテンツに相対 URL のリンク(特に Experience Manager Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
      • スタンドアロンユーザーの場合は、「href」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。

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

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

    • エクスペリエンスフラグメント」を選択します。

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

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

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

    experiencefragment-carouselbanner

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

  8. 保存」を選択します。

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

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

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

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

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

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

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

  1. 次のいずれかの操作を行います。

    • カルーセルセットアセットの上にマウスポインターを置き、編集(鉛筆アイコン)を選択します。

    • カルーセルセットアセットの上にマウスポインターを置き、選択(チェックマークアイコン)を選択したあと、ツールバーの「編集」を選択します。

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

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

    • スライドを追加するには、スライドを追加​アイコンを選択します。 そのスライドに追加するアセットに移動し、チェックマークを選択します。
    • スライドを並べ替えるには、スライドを新しい位置までドラッグします(並べ替えアイコンを選択して項目を移動します)。
    • ホットスポットまたは画像マップを追加するには、ホットスポットまたは画像マップのアイコンを選択し、画像バナーへのホットスポットまたは画像マップの追加を参照してください。
    • カルーセルセットの外観や動作を編集するには、「外観」タブまたは「動作」タブを選択し、必要なオプションを設定します。
    • ホットスポットまたは画像マップを編集するには、該当するスライドで、ホットスポットまたは画像マップを選択します。 「アクション」タブで変更を行います。
    • スライドを削除するには、スライドを選択し、ツールバーの「スライドを削除」を選択します。
    • プリセットを適用するには、ページの右上隅付近にある​ プリセット ​ドロップダウンリストを選択し、ビューアプリセットを選択します。
    • カルーセルセット全体を削除するには、カルーセルセットの場所に移動して選択し、「削除」を選択します。
    note
    NOTE
    ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。

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

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

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

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

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

  2. 編集」を選択します。

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

    experiencefragment-carouselbanner-viewerdropdown

  4. プレビュー​を選択します。

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

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

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

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

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

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

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

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

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

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

  2. Experience Manager Assets から Web ページにコピーした埋め込みコードを追加します。
    コピーされた埋め込みコードはレスポンシブです。つまり、ページの埋め込み領域に自動的に適合します。

注意:この手順はスタンドアロンの Experience Manager Assets のユーザーのみに適用されます。

このプロセスの最後の手順は、カルーセルバナーを web サイトの既存のクイックビュー実装に統合することです。 クイックビューの実装はどれも独自性があり、通常はフロントエンド開発者の支援を受ける特定のアプローチが必要です。

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

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

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

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

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

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

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

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

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

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

クイックビューURLをトリガーしてクイックビューパネルをアクティブ化する最後の手順では、IT部門のフロントエンド IT担当者の支援が必要です。 クイックビューの実装をトリガーする方法を適切な手順から正確に決定する知識を持っています。 すぐに使用できるクイックビューURLがあります。

クイックビューを使用したカスタムポップアップウィンドウの作成 using-quickviews-to-create-custom-pop-ups

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

recommendation-more-help
experience-manager-cloud-service-help-main-toc