Show Menu
トピック×

インタラクティブ画像

「買い物可能な」ホットスポットを画像にドラッグ&ドロップすることで、顧客の魅力的な魅力を引き出す静的な画像を簡単に作成できます。買い物可能なホットスポットは、製品やサービスに関する追加情報と、直接販売時点情報である「買い物かごに追加」または「購入」機能を組み合わせています。顧客は、これらのホットスポットをタップまたはクリックして、製品やサービスに直接リンクしたり、買い物かごに追加したり、Webページにリンクしたりできます。顧客関与やWebサイト上のコンバージョンの増加など、直接的なエクスペリエンス。
次に、クイックビューポップアップを含むショッパブルバナーを示します。モデルの上の円(「ホットスポット」)をタップすると、クイックビューがアクティブになります。
この Web ページの実際のインタラクティブ画像は、次の URL から参照してください。

インタラクティブ画像バナーの作成方法

インタラクティブ画像バナーの作成方法 を示す 10 分 33 秒のガイドをご覧ください。ここでは、インタラクティブ画像バナーのプレビュー、編集、配信方法も説明します。

クイックスタート:インタラクティブ画像

次のワークフローの手順説明は、AEM Assets 内のインタラクティブ画像をすぐに使い始めることを目的としたものです。
一部のクイックスタートタスク内には「 」という見出しがあります。これには、まだインタラクティブ画像が追加されていない次のサンプル Web ページに基づく簡単なチュートリアルが含まれています。
このチュートリアルでは、Web サイトにインタラクティブ画像を統合する手順が説明されています。
インタラクティブ画像の手順:
  1. (オプション)ホットスポット変数の識別 - AEM Assetsとダイナミックメディアスタンドアロンを使用する場合は、まず既存のQuickview実装で使用する動的変数を指定し、インタラクティブイメージの作成時にホットスポットデータを入力できるようにします。 (オプション)ホットスポットの変数の識別 を参照してください。 ただし、AEM Sites または AEM eCommerce(あるいは両方)を使用している場合、この手順は必要ありません。 AEM Assets での eCommerce の概念 を参照してください。
  2. (オプション)インタラクティブ画像ビューアプリセットの作成 — ホットスポットの表現に使用するグラフィック画像をカスタマイズします。 独自のインタラクティブ画像ビューアプリセットの作成は、標準提供のインタラクティブ画像ビューアプリセット Shoppable_Banner を使用する場合には必要ありません。 (オプション)インタラクティブ画像ビューアプリセットの作成 を参照してください。
  3. 画像バナーのアップロード — インタラクティブにする画像バナーをアップロードします。詳しくは、画 像バナーのアップロードを参照してくださ い。
  4. イメージバナーへのホットスポットの追加 - 1つ以上のホットスポットをイメージバナーに追加し、各ホットスポットをハイパーリンク、クイックビュー、エクスペリエンスフラグメントなどのアクションに関連付けます。 ホットスポットを追加した後は、インタラクティブ画像を公開するとタスクが終了します。 画像バナーへのホットスポットの追加 を参照してください。 (オプション)インタラクティブ画像のプレビュー を参照してください。必要に応じて、ショッパブルバナーの表示を確認して、インタラクティビティをテストすることができます。インタラクティブ画像アセットの公開方法について詳しくは、 アセットの公開 を参照してください。
  5. AEM でのインタラクティブ画像の Web サイトへの追加 AEM Sites または AEM eCommerce(あるいは両方)を使用している場合、AEM でインタラクティブメディアコンポーネントを Web ページにドラッグすることで、インタラクティブ画像を Web ページに直接追加できます。 ページへの Dynamic Media アセットの追加を参照してください。 を参照してください。 AEM Assets と Dynamic Media をスタンドアロンで使用している場合は、埋め込みコードを Web サイトにコピーしてから、既存のクイックビューに統合する必要があります。 インタラクティブ画像の Web サイトへの統合 を参照してください。 サードパーティの WCM(Web Content Manager)を使用している場合は、新しいインタラクティブビデオを、Web サイトで使用されている既存のクイックビュー実装に統合する必要があります。 インタラクティブ画像の既存のクイックビューへの統合 を参照してください。

(オプション)ホットスポットの変数の識別

このタスクが必要になるのは次に該当する場合のみです。
  • クイックビューをトリガーして、画像にインタラクティブ機能を追加する。
  • eCommerce ソリューション(IBM Websphere Commerce、Elastic Path、hybris、Intershop など)から AEM に製品データを取り出すために、AEM の実装が​** eCommerce 統合フレームワークを使用していない。 AEM Assets での eCommerce の概念 を参照してください。
AEM の実装が eCommerce を使用している場合は、このタスクをスキップして次のタスクに進みます。
まず、既存のクイックビュー実装で使用されている動的変数を識別します。こうすることで、ホットスポットデータを入力してインタラクティブ画像を作成できます。
AEM Assetsのバナー画像にホットスポットを追加する場合は、SKU(Stock Keeping Unit;在庫保管単位)を割り当てる必要があります提供する個々の製品またはサービスの一意の識別子)と、各ホットスポットに対するオプションの追加変数。 そのようなホットスポットの変数は、後でホットスポットとクイックビューコンテンツを対応付けるために使用されます。
重要なのは、ホットスポットデータに関連付けられる変数の数とタイプを正しく識別することです。バナー画像に追加するそれぞれのホットスポットに、既存のバックエンドシステム内で製品を一意に識別するための十分な情報がある必要があります。
ホットスポットデータに使用する一連の変数を識別するには、様々な方法があります。
既存のクイックビュー実装を担当する IT スペシャリストに相談するだけで十分な場合もあります(通常、そのような IT スペシャリストは、システム内のクイックビューを識別するために必要な最小データセットを理解しています)。ただし、ほとんどの場合は、フロントエンドコードの既存の動作を分析するだけでもかまいません。
クイックビュー実装の大部分では、次の枠組みが使用されています。
  • ユーザーは Web サイト上の特定のユーザーインターフェイス要素をアクティベートします。例えば、「クイックビュー」ボタンをクリックします。
  • Web サイトでは、必要に応じて、クイックビューのデータまたはコンテンツを読み込むための Ajax リクエストをバックエンドに送信します。
  • クイックビューのデータは、Web ページでのレンダリングに備えて、コンテンツに変換されます。
  • 最後に、フロントエンドコードによってそのコンテンツが画面上に視覚的にレンダリングされます。
次に、クイックビュー機能が実装されている既存の Web サイトの各領域にアクセスしてクイックビューをトリガーし、そのクイックビューのデータまたはコンテンツを読み込むために Web ページから送信される Ajax URL をキャプチャします。
通常、専門のデバッグツールを使用する必要はありません。最新の Web ブラウザーには、十分なタスクを実行できる Web インスペクターが備わっています。Web インスペクターが搭載されている Web ブラウザーの例を次に示します。
  • Google Chrome で、ブラウザーから送信されるすべての HTTP リクエストを参照するには、F12 キーを押してデベロッパーツールパネルを開き、「Network」タブをクリックします。Mac の場合、Command + Option + I キーを押してデベロッパーツールパネルを開き、「Network」タブをクリックします。
  • Firefox では、F12 キーを押して Firebug プラグインを有効にして「Net」タブを使用するか、組み込みの Inspector ツールとその「Network」タブを使用します。Mac の場合、Command + Option + I キーを押してデベロッパーツールパネルを開き、「Inspector」タブをクリックします。
ブラウザーでネットワーク監視をオンにして、ページ上でクイックビューをトリガーします。
次に、ネットワークログ内でクイックビューの·Ajax·URL·を見つけ、記録された·URL·を今後の分析のためにコピーします。クイックビューをトリガーするとほとんどの場合、大量のリクエストがサーバーに送信されます。クイックビューの·Ajax·URL·は通常、そのリスト内の最初のほうにあります。It has either a complex query string portion or path, and its response MIME type is either text/html , text/xml , or text/javascript .
このプロセスの実行中は、様々な製品カテゴリーや製品タイプが含まれる Web サイトの様々な領域にアクセスすることが重要です。なぜなら、クイックビュー URL には、ある特定の Web サイトカテゴリーに共通するが、Web サイトの異なる領域にアクセスした場合にのみ変化する部分が存在する場合があるからです。
単純なケースでは、クイックビュー URL 内で変化する唯一の部分が製品 SKU となります。その場合、SKU の値が、ホットスポットをバナー画像に追加するために必要になる唯一のデータです。
一方、複雑なケースでは、クイックビュー URL に SKU 以外の様々な要素が含まれます(カテゴリー ID、カラーコード、サイズコードなど)。その場合、各要素は AEM Assets のショッパブルインタラクティブ画像機能において、ホットスポットデータ定義内の個別の変数になります。
次のクイックビュー 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
The only variable part in the URL is the value of the productId= query string parameter, and it is clearly a SKU value. Therefore, our hotspots only need SKU fields populated with values like 866558 , 1196184 , 1081492 , 1898294 .
単一の SKU(URL パス内)
記録されたクイックビューの URL:
  • https://server/product/6422350843
  • https://server/product/1607745002
  • https://server/product/0086724882
The variable part is in the last portion of the path, and it becomes the SKU value of the hotspots: 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つの異なる部分があります。 The SKU is stored in the prodId parameter and the category ID is stored in the category= parameter.
そのため、ホットスポット定義はペアになります。つまり、SKU 値と、 categoryId という追加の変数です。結果のペアは次のようになります。
  • SKU is 305466 and categoryId is 1100004 .
  • SKU is 310181 and categoryId is 1100004 .
  • SKU is 308706 and categoryId is 1740148 .
この 3 つの例で使用されているものと同じアプローチを次のデモ Web ページに適用できます。
このデモ Web ページにはいくつかの製品サムネールがあり、それぞれのサムネールには、「See More」というラベルの付いたクイックビューボタンが用意されています。Web ブラウザーのデバッグツールをアクティブにしたまま各ボタンをクリックし、記録されたクイックビュー URL に注目してください。そのページの 4 つの製品クイックビューのすべてをアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。
  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json
これらのサーバーコールを見ると、製品固有の情報がリクエストパスのみに含まれることがわかります。また、クエリ文字列がまったく使用されていないこと、2 つの異なるタイプのデータが含まれることもわかります。
  • 最初のタイプは Men または Women です。これは「製品カテゴリー」と呼ばれます。
  • 2 つ目のタイプは製品名(CamoPullover など)です。これは製品 SKU と考えることができます。
この情報に基づいて、全体的なクイックビュー URL は次のようなパターンであることがわかります。
/datafeed/$categoryId$-$SKU$.json
このような分析に基づいて、ホットスポットに対して categoryId SKU を使用することになります。
これで、画像バナーをアップロードし、AEM Assets のショッパブルインタラクティブ画像機能を使用して画像バナーにホットスポットを追加する準備ができました。

(オプション)インタラクティブ画像ビューアプリセットの作成

You can choose to use the default, out-of-the-box Interactive Image viewer preset called Shoppable_Banner that comes with AEM Assets. また、インタラクティブ画像で使用するカスタムビューアプリセットを独自に作成することもできます。
カスタムのインタラクティブ画像ビューアプリセットを作成する場合、画像バナー上のホットスポットの外観を指定できます。 ビューアプリセットの作成中に、事前定義済みの画像ギャラリーからホットスポットのグラフィックを選択して使用できます。
ビューアプリセットを保存すると、AEM Assetsのビューアプリセットリストページで、ビューアプリセットが自動的にアクティブ化(オンに)されます。 この機能は、インタラクティブメディアコンポーネントに表示され、アセットを表示するときに必ず表示されることを意味します。 ただし、このビューアプリセットを使用してインタラクティブバナーを 配信するには、ビューアプリセットも 公開*する必要があります(カスタムまたは初期設定のビューアプリセットの場合)。
インタラクティブ画像ビューアのプリセットを作成するには
  1. 左側のレールで、 ツール/アセット/ビューアプリセット ​をタップします。
  2. ページの右上隅にある「 作成 」をタップします。
  3. 新規ビューアプリセットダイアログボックスで、インタラクティブバナービューアプリセットを表す名前を入力します。
    この名前が、保存後にビューアプリセットリストページに表示されるタイトルです。
  4. リッチメディアタイププルダウンメニューで、「 インタラクティブ画像 」を選択します。
  5. 作成 」をタップします。
  6. ビューアプリセットを編集ページで、「 外観 」タブをタップします。
  7. 次のいずれかの操作をおこないます。
    • 画像上で使用する独自のホットスポット画像をアップロードするには、アセットピッカーアイコンをタップします。コンテンツを選択ページで、使用するホットスポット画像の場所に移動して画像を選択し、右上隅のチェックマークアイコンをタップします。
    • 事前定義済みのホットスポット画像を選択するには、ホットスポットギャラリーアイコンをタップします。ホットスポットギャラリーパレットで、使用するホットスポット画像をタップします。
  8. ページの右上隅にある「 保存 」をタップします。
    新しいビューアプリセットを忘れずに公開してください。
    これで、画像バナーをアップロードできるようになりました。

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

If you have already uploaded the images that you want to use, advance to the next step, Adding hotspots to an image banner .
イメージバナーをアップロードするには
  1. インタラクティブにする画像バナーをアップロードします。
    アセットのアップロード を参照してください。
    これで、画像バナーにホットスポットを追加する準備が整いました。この後のタスクを参照してください。

画像バナーへのホットスポットの追加

ホットスポット管理ページのエディターを使用して、画像バナーにホットスポットを追加できます。
ホットスポットを追加する際に、クイックビューポップアップ表示、ハイパーリンクまたはエクスペリエンスフラグメントとして定義することができます。
エクスペリエンスフラグメント を参照してください。
ビューアをエクスペリエンスフラグメントに埋め込む場合、インタラクティブ画像のソーシャルメディア共有ツールはサポートされないことに注意してください。この問題を回避するには、ソーシャルメディア共有ツールを備えていないビューアプリセットを使用または作成します。 このようなビューアプリセットを使用すると、エクスペリエンスフラグメントに正常に埋め込むことができます。
現在の作成/編集セッションでは、ページの右上隅近くにある「取り消し」と「やり直し」のオプションがサポートされます。
インタラクティブ画像の作成が完了したら、「プレビュー」を使用して、インタラクティブ画像がユーザーにどのように表示されるかを確認できます。
インタラクティブ画像またはカルーセルバナーの画像にホットスポットを追加すると、インタラクティブ画像かカルーセルバナーかに関わらず、ホットスポット情報が同じメタデータの場所(画像に対して相対的な場所)に格納されます。つまり、どちらのビューアでも、同じ画像を定義済みのホットスポットデータと一緒に簡単に再利用できます。
ただし、カルーセルバナーでは、画像上の画像マップ(ホットスポットを含むことができる)がサポートされることに注意してください。インタラクティブ画像ではサポートされません。同じ画像を使用するインタラクティブ画像またはカルーセルバナーを作成する場合には、このことに注意してください。同じ画像の別のコピーを使用してインタラクティブ画像とカルーセルバナーを作成することをお勧めします。
カルーセルバナー も参照してください。
ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。
イメージバナーにホットスポットを追加するには
  1. Assets ビューで、インタラクティブにする画像バナーに移動します。
  2. 次のいずれかの操作をおこないます。
    • Hover on the image, then tap Select (checkmark icon). ツールバーの「 編集 」をタップします。
    • Hover on the image, then tap More actions (three dots icon) > Edit .
    • 画像をタップして、詳細ビューページで画像を開きます。ツールバーの「 編集 」をタップします。
  3. ページの左上隅にある「 ホットスポットを追加 」(指先アイコン)をタップして、ホットスポット管理ページを開きます。
  4. ページの左上隅にある「 ホットスポット 」をタップします。
  5. ホットスポット管理ページの左上隅にある「 ホットスポット 」をタップします。
  6. 画像上で、ホットスポットを表示する場所をタップします。必要に応じて、ホットスポットをドラッグして場所を調整します。
  7. 必要に応じて手順 a と b を繰り返し、他のホットスポットを追加します。
  8. (オプション)ホットスポットを削除するには、そのホットスポットを画像上で選択した後、「 ホットスポット 」見出しの下にある​ 削除 (ごみ箱アイコン)をタップします。
  9. 「名前」テキストフィールドにホットスポットの名前を入力します。この名前は、選択したホットスポットドロップダウンリストにも表示されます。
  10. 次のいずれかの操作をおこないます。
    • クイックビュー 」をタップします。
      • AEM Sites または eCommerce のユーザーである場合は、製品ピッカーアイコン(虫眼鏡)をタップまたはクリックして、製品を選択ページを開きます。使用する製品をタップまたはクリックし、ページの右上隅にある「 選択 」をタップして、「ホットスポット管理」ページに戻ります。
      • If you are not an AEM Sites or eCommerce customer
        • See Identifying hotspot variables ; you will need to define these variables.
        • 次に、SKU値を手動で入力します。 「SKU値」テキストフィールドに、製品のSKU(在庫保管単位)を入力します。これは、提供する個々の製品またはサービスの一意の識別子です。 入力したSKU値によってクイックビューテンプレートの可変部分が自動的に設定され、タップされたホットスポットを特定のSKUのクイックビューに関連付けることができます。
        • (Optional) If there are other variables within the Quickview that you need to use to further identify a product, tap Add Generic Variable . テキストフィールドで、追加の変数を指定します。 例えば、追加の変数として category=Mens などと指定します。
    • ハイパーリンク 」をタップします。
      • AEM Sites のユーザーである場合は、サイトセレクターアイコン(フォルダー)をタップまたはクリックして URL に移動します。インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。
      • スタンドアロンユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。
    このリンクを新しいブラウザータブで開く(推奨のデフォルト)か同じタブで開くかを指定してください。
    詳しくは、 セレクターの操作 を参照してください。
    • エクスペリエンスフラグメント 」をタップします。
      • AEM Sites のユーザーである場合は、検索アイコン(虫眼鏡)をタップまたはクリックしてエクスペリエンスフラグメントページを開きます。使用するエクスペリエンスフラグメントをタップまたはクリックし、ページの右上隅にある「選択」をタップして、ホットスポット管理ページに戻ります。 エクスペリエンスフラグメント を参照してください。
      • エクスペリエンスフラグメントがバナーに表示されるときの幅と高さを指定します。
        ビューアをエクスペリエンスフラグメントに埋め込む場合、インタラクティブ画像のソーシャルメディア共有ツールはサポートされないことに注意してください。この問題を回避するには、ソーシャルメディア共有ツールを備えていないビューアプリセットを使用または作成します。 このようなビューアプリセットを使用すると、エクスペリエンスフラグメントに正常に埋め込むことができます。
  11. 保存 」をタップして作業内容を保存し、参照ページに戻ります。
  12. インタラクティブ画像を公開します。公開すると、バナーをクラウドで配信できるようになり、サードパーティの Web サイトに統合する必要がある場合は埋め込みコードが生成されます。
    アセットの公開 を参照してください。
    ホットスポットを追加してインタラクティブ画像を公開したら、次に既存の Web サイトにその画像を追加できます。
    ホットスポットを含むインタラクティブ画像を編集しているときに、画像を切り取ると、ホットスポットは削除されます。

(オプション)インタラクティブ画像のプレビュー

プレビューを使用して、インタラクティブイメージが顧客にどのように表示されるかを確認し、イメージのホットスポットをテストして、期待どおりの動作を示すことができます。
インタラクティブ画像の設定が完了したら、この画像を公開できます。 Web ページへのビデオビューアまたは画像ビューアの埋め込み を参照してください。 Web アプリケーションへの URL のリンク を参照してください。インタラクティブコンテンツに相対 URL のリンク(特に AEM Sites ページへのリンク)がある場合、URL ベースのリンク方法は使用できません。See Adding Dynamic Media Assets to Pages.
インタラクティブ画像をプレビューするには
  1. Assets ビューで、作成した既存のインタラクティブ画像の場所に移動し、タップしてプレビューで表示します。
  2. Near the upper-left corner of the Preview page, in the Content drop-down list, tap Viewers .
  3. ビューアリストで「 Shoppable_Banner 」または作成したインタラクティブ画像ビューアプリセットの名前をタップします。
  4. 画像上のホットスポットをタップして、関連するアクションをテストします。

インタラクティブ画像アセットの公開

インタラクティブ画像アセットの公開方法について詳しくは、 アセットの公開 を参照してください。

インタラクティブ画像の Web サイトへの統合

バナー画像をアップロードし、ホットスポットを画像に追加してインタラクティブ画像を公開したら、次に Web サイトページにその画像を追加できます。
AEM Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることによりインタラクティブ画像を追加できます。See Adding Dynamic Media Assets to Pages.
スタンドアロン AEM Assets のユーザーである場合は、この節で説明するようにインタラクティブ画像を手動で Web サイトに追加できます。
  1. 公開済みのインタラクティブ画像の埋め込みコードをコピーします。 Web ページへのビデオビューアまたは画像ビューアの埋め込み を参照してください。
  2. コピーした埋め込みコードを、Web ページ内の必要な場所に追加します。コピーされた埋め込みコードは、割り当てられた領域に自動的に収まるようにレスポンシブ環境用に設定されます。
次のデモ Web サイトを例として使用します。
3 人の男性の写真には次のような静的 IMG タグが使用されています。
<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

統合は、タグを削除し、AEM Assetsか IMG らコピーした埋め込みコードに置き換えるだけで簡単です。 結果は次のURLで確認できます。このURLは、3つの円のホットスポットを含むページ上のショップ可能なインタラクティブ画像を示します。
この時点では、デモ Web サイトのショッパブルインタラクティブ画像上のホットスポットは表示用のみで、まだ既存のクイックビューと統合されていません。
レスポンシブ環境向けにショッパブルインタラクティブ画像に「切り抜き」を適用するために、 ZoomView.iscommand というインタラクティブ画像設定属性をパスに追加できます。ここでの ZoomView は呼び出すコンポーネントで、 iscommand は適用する「crop」画像サービングコマンドです。
ZoomView.iscommand 設定属性を参照してください。
crop 画像サービングコマンドを参照してください。
これで、インタラクティブ画像を 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 を置き換えるのと同時に、ユーザーがショッパブル画像内のホットスポットをクリックしたときに、そのユーザー操作がビューアによって処理されます。ビューアは、AEM Assets に以前に追加されたすべてのホットスポットデータを含む Web ページに、イベントを返します。
そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。
  • ショッパブルインタラクティブ画像から送出されるイベントをリッスンします。
  • ホットスポットデータに基づいてクイックビュー URL を作成します。
  • バックエンドからクイックビューを読み込み、画面上の表示用にレンダリングするプロセスを起動します。
AEM Assets によって返される埋め込みコードには、次のハイライトされたコードのように、既にすぐに使用可能なイベントハンドラーがコメントアウトされた状態で含まれています。
        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

そのため、必要な処理は、このコードのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。
クイックビュー URL の作成プロセスは、基本的に先ほど説明したホットスポットの変数を識別するためのプロセスとは逆のプロセスになります。
ホットスポットの変数の識別 を参照してください。
以前のクイックビュー URL の例を使用した場合、クイックビュー URL の各ケースでの作成方法は次の例のようになります。
単一の SKU(クエリー文字列内)
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&amp;source=100"; }, });
単一の SKU(URL パス内)
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU とカテゴリ ID(クエリー文字列内)
s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku; }, });
クイックビュー URL をトリガーしてクイックビューパネルをアクティベートするための最後の手順では、おそらく IT 部門のフロントエンド IT 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しくトリガーするための最適な方法について理解しています。
これらの手順をデモ Web サイトに適用してショッパブルインタラクティブ画像をクイックビューのコードに統合する方法を確認できます。先ほど、クイックビュー URL の構造を次のように識別しました。
/datafeed/$categoryId$-$SKU$.json

この URL を quickViewActivate ハンドラー内で再構成するために、ビューアのコードからハンドラーに渡される categoryId オブジェクト内の SKU フィールドと inData フィールドを使用できます。
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

The demo website is triggering the Quickview dialog box using a simple loadQuickView() function call. この関数は、1 つの引数(クイックビューデータの URL)のみを受け取ります。したがって、ショッパブルインタラクティブ画像を統合するために必要な最後の手順は、 quickViewActivate ハンドラーに次のコード行を追加することです。
loadQuickView(quickViewUrl);

次に、ソースコード全体を示します。
 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

インタラクティブ画像が完全に統合された最終的なデモ Web サイトは次のようになります。

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