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

インタラクティブ画像 interactive-images

「ショッパブル」なホットスポットを画像にドラッグ&ドロップすることで、静止画像をリッチで魅力的なエクスペリエンスにすることができます。 商品購入ホットスポットは、商品やサービスに関する追加情報と、直接購入できる「カートに追加」機能や「購入」機能を組み合わせたものです。 顧客は、商品やサービスに直接リンクしたり、ショッピングカートに追加したり、web ページにリンクするホットスポットを選択できます。 こうしたダイレクトなエクスペリエンスによって顧客のエンゲージメントが向上し、Web サイトでのコンバージョン率が向上します。

次に、クイックビューポップアップウィンドウを含むショッパブルバナーを示します。 モデルの上の円（「ホットスポット」）をタップすると、クイックビューがアクティブになります。

ページの​ インタラクティブ画像を参照してください。

インタラクティブ画像バナーの作成方法 watch-how-interactive-image-banners-are-created

インタラクティブ画像バナーの作成方法に関する説明を視聴します（10 分 33 秒）。 このガイドでは、インタラクティブ画像バナーのプレビュー、編集、配信方法も説明します。

クイックスタート：インタラクティブ画像 quick-start-interactive-images

次の手順を踏んだワークフローの説明は、Adobe Experience Manager Assetsでインタラクティブ画像をすばやく使用できるように設計されています。

一部のクイックスタートタスク内には「例」という見出しがあります。 これには、まだインタラクティブ画像が追加されていないサンプル Web ページに基づいた簡単なチュートリアルが含まれています。

このチュートリアルでは、web サイトにインタラクティブ画像を統合する手順が説明されています。

インタラクティブ画像の手順：

（オプション）ホットスポットの変数の識別 optional-identifying-hotspot-variables

まず、既存のクイックビュー実装で動的変数を特定して、ホットスポットデータを入力し、インタラクティブ画像を作成します。

Experience Manager Assets のバナー画像にホットスポットを追加する場合は、SKU（Stock Keeping Unit）を割り当てます。 SKU は、提供する製品またはサービスごとの一意の ID です。 また、各ホットスポットにオプションの変数を追加します。 そのようなホットスポットの変数は、後でホットスポットとクイックビューコンテンツを対応付けるために使用されます。

ホットスポットデータに関連付ける変数の数とタイプを決定することが重要です。 バナー画像に追加された各ホットスポットには、既存のバックエンドシステムで製品を明確に識別するのに十分な情報が含まれている必要があります。

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

多くの場合、既存のクイックビューの実装を担当するIT チームに連絡するだけで十分です。 このようなチームメンバーは、システム内でクイックビューを識別するために必要な最小限のデータセットを把握しています。 ただし、フロントエンドコードの既存の動作を分析することは可能です。

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

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

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

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

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

このプロセスの実行中は、製品カテゴリや製品タイプが異なる、Web サイトの様々な領域にアクセスすることが重要です。 クイックビュー URL には、特定の web サイトカテゴリに共通する部分を含めることができるからです。 ただし、変更されるのは、Web サイトの別の領域を訪問した場合のみです。

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

ただし、複雑なケースでは、クイックビューのURLにはSKU以外の様々な要素があります。 例えば、カテゴリ ID、カラーコード、サイズコードなどの要素は様々です。 この場合、Experience Manager Assetsのショッパブルインタラクティブ画像機能のホットスポットデータ定義では、各要素が個別の変数になります。

次のクイックビュー URL と、その結果のホットスポット変数の例を考えてみます。

例

上記の3つの例で使用されているのと同じアプローチを、​ デモ web ページ ​に適用できます。

デモ web ページには複数の製品サムネールがあり、それぞれに「詳細を見る」というラベルの付いたクイックビューボタンがあります。 Web ブラウザーのデバッグツールをアクティブにしたまま各ボタンを選択し、記録されたクイックビュー URL に注目してください。 そのページの 4 つの製品クイックビューをすべてアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。

これらのサーバーコールを見ると、製品固有の情報はリクエストパスにしか存在しないことがわかります。 また、クエリ文字列がまったく使用されていないこと、2 つの異なるタイプのデータが含まれることもわかります。

この情報に基づいて、全体的なクイックビュー URL は次のようなパターンであることがわかります。

/datafeed/$categoryId$-$SKU$.json

このような分析に基づいて、ホットスポットにはcategoryIdとSKUを使用します。

これで、画像バナーをアップロードし、Experience Manager Assets のショッパブルインタラクティブ画像機能を使用して画像バナーにホットスポットを追加する準備ができました。

（オプション）インタラクティブ画像ビューアプリセットの作成 optional-creating-an-interactive-image-viewer-preset

Experience Manager Assetsに付属するデフォルトのインタラクティブ画像ビューアプリセット（Shoppable_Banner）を使用できます。 または、インタラクティブ画像で使用するために独自のカスタムビューアプリセットを作成できます。

カスタムインタラクティブ画像ビューアプリセットを作成する場合は、画像バナーのホットスポットの外観を決定できます。 ビューアプリセットの作成中に、事前定義済みの画像ギャラリーからホットスポットのグラフィックを選択して使用できます。

ビューアプリセットを保存すると、Experience Manager Assets のビューアプリセットリストページで自動的にアクティベートされます（有効になります）。 つまり、そのビューアプリセットは、インタラクティブメディアコンポーネントで、アセットを表示するときに常に表示されます。 ただし、このビューアプリセットが設定されているインタラクティブバナーを​ 配信 ​するには、ビューアプリセットも​ 公開 ​します。 このルールは、カスタムビューアプリセットまたはデフォルトのビューアプリセットに対して適用されます。

インタラクティブ画像ビューアプリセットを作成するには：:

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

使用する画像を既にアップロードしている場合は、次の手順（画像バナーへのホットスポットの追加）に進んでください。

画像バナーをアップロードするには：:

画像バナーへのホットスポットの追加 adding-hotspots-to-an-image-banner

ホットスポット管理ページのエディターを使用して、画像バナーにホットスポットを追加できます。

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

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

ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成／編集セッションの間で有効です。

インタラクティブ画像の作成が完了したら、プレビューを使用して、インタラクティブ画像が顧客にどのように表示されるかを確認できます。

（オプション）インタラクティブ画像のプレビューを参照してください。

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

（オプション）インタラクティブ画像のプレビュー optional-previewing-interactive-images

プレビューを使用すると、インタラクティブ画像がユーザーに対してどのように表示されるかを確認できます。 Previewでは、画像のホットスポットをテストすることもできます。 これにより、期待通りに動作することを保証します。

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

インタラクティブ画像をプレビューするには：:

インタラクティブ画像アセットの公開 publishing-interactive-image-assets

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

インタラクティブ画像の Web サイトへの統合 integrating-an-interactive-image-with-your-website

バナー画像をアップロードし、ホットスポットを画像に追加してインタラクティブ画像を公開したら、次に Web サイトページにその画像を追加できます。

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

スタンドアロンの Adobe Experience Manager Assets のユーザーは、この節で説明するようにインタラクティブ画像を手動で Web サイトに追加できます。

例

​ デモ web サイトを例として使用すると、3人の人物の画像が静的なIMG タグであることに注意してください。

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

統合は、IMG タグを削除して Experience Manager Assets からコピーした埋め込みコードに置き換えるだけで簡単にできます。 結果は、3つの円のホットスポット ​を持つページ上のショッパブルなインタラクティブ画像を示します。

レスポンシブ環境用のショッパブルインタラクティブ画像に「crop（切り抜き）」を適用するには、パスにインタラクティブ画像設定属性 ZoomView.iscommand を含めます。 この場合、ZoomView コンポーネントが呼び出され、iscommand は適用する「crop」画像提供コマンドです。

ZoomView.iscommand 設定属性を参照してください。

crop 画像サービングコマンドを参照してください。

これで、インタラクティブ画像を web サイト上の既存のクイックビューに統合できるようになりました。

インタラクティブ画像の既存のクイックビューへの統合 integrating-an-interactive-image-with-an-existing-quickview

このプロセスの最後の手順は、インタラクティブ画像を web サイトの既存のクイックビュー実装に統合することです。 すべてのケースで機能する統合のソリューションはありません。 クイックビューの実装はそれぞれがユニークで、特定のアプローチが必要となります。 そのため、フロントエンドのIT担当者に相談するのが有効です。

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

これらの呼び出しは、web ページロジックが任意のステップから呼び出す独立したパブリック API呼び出しを必ずしも表すものではありません。 代わりに、前のステップの最後のフェーズ（コールバック）で次の各ステップが含まれる連鎖呼び出しです。

ショッパブルインタラクティブ画像によって手順 1 と、手順 2 の一部が置き換えられる場合、ユーザーはショッパブル画像内のホットスポットをタップします。 ビューアは、このようなユーザーによる操作を処理します。 ビューアは、Adobe Experience Manager Assets に以前に追加されたすべてのホットスポットデータを含むイベントを web ページに返します。

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

Experience Manager 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, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

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

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

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

前述のクイックビューURLの例を使用すると、以下の例で、それぞれの場合にクイックビューURLがどのように構築されるかを確認できます。

クイックビューのURLをトリガーしてクイックビューパネルをアクティブ化する最後の手順では、フロントエンドの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";

このデモ Web サイトは、単純な loadQuickView() 関数呼び出しを使用してクイックビューダイアログボックスを起動しています。 この関数は、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 サイトです。

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

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