現在表示中:

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

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

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

chlimage_1

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

chlimage_1

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

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

chlimage_1

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

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

注意:

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

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

すぐに使い始めるには:

  1. ホットスポットと画像マップの変数を識別します(AEM Assets とダイナミックメディアの両方を使用するユーザーのみ)。

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

    注意:

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

    AEM Assets とダイナミックメディアのユーザーである場合は、ホットスポットと画像マップのデータを手動で入力してから、公開済みの URL または埋め込みコードをサードパーティのコンテンツ管理システムに統合します。

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

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

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

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

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

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

    AEM アセットでカルーセルセットを作成するには、「作成」をクリックして、「カルーセルセット」を選択します。次に、画像をスライドに追加して「保存」をクリックします。エディターで、カルーセルの外観と動作を直接変更することもできます。

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

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

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

  6. カルーセルセットを公開します。

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

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

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

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

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

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

注意:

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

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

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

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

既存のクイックビュー実装を担当する IT スペシャリストに相談するだけで十分な場合もあります(通常、そのような IT スペシャリストは、システム内のクイックビューを識別するために必要な最小データセットを理解しています)。ただし、ほとんどの場合は、フロントエンドコードの既存の動作を分析するだけでもかまいません。

クイックビュー実装の大部分では、次の枠組みが使用されています。

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

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

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

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

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

次に、ネットワークログでクイックビューの Ajax URL を探し、記録された URL を今後の分析用にコピーします。クイックビューを起動するとほとんどの場合、サーバーに大量のリクエストが送信されます。通常、クイックビューの Ajax URL は、そのリクエストリストの最初のほうにあります。Ajax URL には複雑なクエリ文字列の一部またはパスが含まれ、応答の MIME タイプは text/htmltext/xmltext/javascript のいずれかです。

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

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

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

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

単一の SKU(クエリ文字列内)

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

  • http://server/json?productId=866558&source=100

  • http://server/json?productId=1196184&source=100

  • http://server/json?productId=1081492&source=100

  • http://server/json?productId=1898294&source=100

URL で変化するのは productId= というクエリ文字列パラメーターの値の部分だけで、これは明らかに SKU 値です。そのため、ホットスポットや画像マップには、866558 1196184 1081492 1898294 のような値が入力された SKU フィールドのみが必要です。

単一の SKU(URL パス内)

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

  • http://server/product/6422350843

  • http://server/product/1607745002

  • http://server/product/0086724882

変化する部分はパスの最後の部分にあり、ホットスポット/画像マップの SKU 値 642235084316077450020086724882 になります。

SKU とカテゴリ ID(クエリ文字列内)

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

  • http://server/quickView/product/?category=1100004&prodId=305466

  • http://server/quickView/product/?category=1100004&prodId=310181

  • http://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

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

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

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

カルーセルセットの作成

注意:

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

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

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

  2. カルーセルバナーエディターが開きます。タップしてアセットセレクターを開き、最初のスライド用の画像を選択します。詳しくは、セレクターの操作を参照してください。

    chlimage_1
  3. 最初の画像を選択し、チェックマークをクリックまたはタップして選択します。画像が、カルーセルバナーエディターにスライド 1 として表示されます。

    chlimage_1
  4. カルーセルで回転させる別のスライドを追加するには、スライドを追加アイコンをクリックします。適切な画像を選択し、チェックマークをクリックまたはタップします。スライドの追加を続けて、回転させる画像をすべて選択します。

    chlimage_1

    スライドを削除するには、スライドをタップまたはクリックし、ツールバーの「スライドを削除」をクリックします。スライドを移動するには、並べ替えアイコンをタップして、希望の場所まで移動します。

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

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

    注意:

    カルーセルバナーについて調整できるのは次のような項目です。

    • 1 つの画像が表示される時間。デフォルトでは、各画像は 9 秒間表示されます。
    • アニメーション.デフォルトでは、各スライドのトランジションはフェードです。これをスライドのトランジションに変更できます。
    • ボタンのスタイル。ユーザーは点または番号をタップしてバナーの画像を切り替えることができます。セットインジケーターボタンの表示位置(とスタイルが番号か点か)と大きさを変更できます。
    • 画像マップまたはホットスポットに使用されるアイコンのハイライトスタイルを変更します。

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

    カルーセルバナーがどのように表示されるかをプレビューすることもできます。(オプション)カルーセルバナーのプレビューを参照してください。

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

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

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

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

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

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

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

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

注意:

インタラクティブ画像またはカルーセルバナーの画像にホットスポットを追加すると、インタラクティブ画像かカルーセルバナーかに関わらず、ホットスポット情報が同じメタデータの場所(画像に対して相対的な場所)に格納されます。つまり、どちらのビューアでも、同じ画像を定義済みのホットスポットデータと一緒に簡単に再利用できます。

ただし、カルーセルバナーでは、画像上の画像マップ(ホットスポットを含むことができる)がサポートされることに注意してください。インタラクティブ画像ではサポートされません。同じ画像を使用するインタラクティブ画像またはカルーセルバナーを作成する場合には、このことに注意してください。同じ画像の別のコピーを使用してインタラクティブ画像とカルーセルバナーを作成することをお勧めします。

注意:

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

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

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

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

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

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

  5. 画像上で、ホットスポットを表示する場所をタップまたはクリックします。または、画像マップを作成している場合は、クリックしてドラッグし、画像マップ領域を作成します。画像マップのサイズを調整するには、隅をクリックしてドラッグします。

    必要に応じて、ホットスポットまたは画像マップを別の場所にドラッグします。必要に応じて、他のホットスポットまたは画像マップを追加します。

    ホットスポットまたは画像マップを削除するには、マップとホットスポットドロップダウンメニューで、削除するホットスポット名を選択し、メニューの横のごみ箱アイコンをクリックまたはタップします。

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

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

    • クイックビュー」をタップまたはクリックします。
      • AEM Sites および Ecommerce のユーザーである場合は、製品ピッカーアイコン(虫眼鏡)をタップまたはクリックして、製品を選択ページを開きます。使用する製品をタップまたはクリックしてから、ページの右上隅のチェックマークをタップして、カルーセルバナーエディターに戻ります。
      •  AEM Sites または Ecommerce のユーザーではない場合は次のようにします。
        • これらの変数を定義するときは、ホットスポットの変数の識別を参照してください。
        • 次に、SKU 値を手動で入力します。「SKU 値」テキストフィールドに、製品の SKU(Stock Keeping Unit)を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、タップされたホットスポットが特定の SKU のクイックビューに関連付けられます。
        • (オプション)クイックビュー内で製品をさらに識別するために必要になる他の変数がある場合は、「汎用変数を追加」をタップします。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Mens などと指定します。
        • 詳しくは、セレクターの操作を参照してください。
    • ハイパーリンク」をタップまたはクリックします。
      • AEM Sites のユーザーである場合は、サイトセレクターアイコン(フォルダー)をタップまたはクリックして URL に移動します。
        注意:インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
      • スタンドアロンユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。

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

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

    • エクスペリエンスフラグメント」をタップまたはクリックします。
      • AEM Sites のユーザーである場合は、検索アイコン(虫眼鏡)をタップまたはクリックしてエクスペリエンスフラグメントページを開きます。使用するエクスペリエンスフラグメントをタップまたはクリックし、ページの右上隅にある「選択」をタップして、ホットスポット管理ページに戻ります。
        エクスペリエンスフラグメントを参照してください。
      • エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。
    experience_fragment-carouselbanner

    カルーセルバナーがどのように表示されるかをプレビューすることもできます。(オプション)カルーセルバナーのプレビューを参照してください。

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

  9. 閉じる」をタップして、アセットページに戻ります。

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

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

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

カルーセルセットの編集

注意:

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

アセットの編集と同じように、ユーザーインターフェイスで直接、画像セット内のアセットに対して様々な編集タスクを実行できます。また、カルーセルセットでは次のアクションも実行できます。

  • カルーセルセットにスライドを追加します。セレクターの操作も参照してください。
  • カルーセルセット内のスライドを並べ替えます。
  • カルーセルセットのアセットを削除します。
  • カルーセルセットを削除します。
  • 画像マップとホットスポットを追加するか変更します。セレクターの操作も参照してください。

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

  1. カルーセルセットの場所に移動し、クリックして開くか、カルーセルセットを選択してサムネールの鉛筆アイコンをクリックします。

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

    • スライドを追加するには、スライドを追加アイコンをクリックし、そのスライドに追加するアセットの場所に移動して、チェックマークをタップまたはクリックします。
    • スライドを並べ替えるには、スライドを新しい位置までドラッグします(並べ替えアイコンを選択して項目を移動します)。
    • ホットスポットまたは画像マップを追加するには、ホットスポットまたは画像マップのアイコンをクリックし、ホットスポットおよび画像マップの追加を参照してください。
    • ホットスポットまたは画像マップを編集するには、該当するスライドで、ホットスポットまたは画像マップを新しい位置に移動し、必要に応じて外観、動作、アクションを変更します。
    • スライドを削除するには、スライドを選択して、「スライドを削除」をタップまたはクリックします。

    注意:

    • カルーセルセット全体を削除するには、カルーセルセットの場所に移動してカルーセルセットを選択し、「削除」を選択します。
    • 画像セットの画像を編集するには、セットの場所に移動し、左側のレールの「メンバーを設定」を選択してから、個々のアセットの鉛筆アイコンをクリックまたはタップして編集ウィンドウを開きます。
    • ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。

     

(オプション)カルーセルバナーのプレビュー

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

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

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

カルーセルエディターでカルーセルバナーをプレビューするには:

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

  2. 編集」をタップまたはクリックします。

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

    experience_fragment-carouselbanner-viewerdropdown
  4. プレビュー」をタップまたはクリックします。

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

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

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

  2. プレビューページの左上隅付近にある「コンテンツ」アイコンをクリックします。

  3. ページの左側のパネルにある「ビューア」リストで、使用するカルーセルバナービューアプリセットの名前をタップします。

  4. 画像上のホットスポットまたは画像マップをタップし、関連付けられたアクションをテストします。

カルーセルバナーの公開

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

注意:

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

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

カルーセルバナーの公開方法に関する情報については、ダイナミックメディアアセットの公開を参照してください。

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

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

注意:

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

ただし、スタンドアロン AEM Assets のユーザーである場合は、この節で説明するようにカルーセルバナーを手動で Web サイトのランディングページに追加できます。

  1. 公開済みのカルーセルバナーの埋め込みコードをコピーします。
    Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。
  2. AEM Assets からコピーした埋め込みコードを 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 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しく起動するための最適な方法について理解しています。

クイックビューを使用したカスタムポップアップの作成

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー