某些 Creative Cloud 应用程序、服务和功能在中国不可用。
ビデオから直接コンバージョンを促すインタラクティブなビデオを簡単に作成できます。ビデオに対する顧客のエンゲージメントは、ビデオプレーヤーと一緒に表示されるパネルでおこなわれます。そのパネルには、ビデオで取り上げられている内容に応じて、関連するサービス、情報、製品サムネールがスクロールして表示されます。顧客は、サムネールをタップして、サービスに直接アクセスしたり、買い物かごに商品を追加してすぐに購入したり、詳細が記載されている Web ページにアクセスしたりできます。
ビデオが終了すると、コールトゥアクションを促すために、画像を使用して、すべてのサービスの概要が表示されます。顧客は、ここで欲しい商品をタップすることもできます。こうしたすぐに行動に移すことができる具体的なエクスペリエンスが顧客のエンゲージメントとコンバージョンを促します。
インタラクティブ画像も参照してください。
次のスクリーンショットをクリックして、インタラクティブビデオを全画面でご覧ください。
再生中にビデオ内で製品が使用されると、同じ製品のサムネール画像が右側に表示されます。
サムネールをクリックするとビデオが一時停止され、その製品のクイックビューが開きます。例えば、KitchenAid のサムネール画像をクリックすると、このミキサーの 360 度のスピンビューを見たり、細部を拡大表示したりすることができます。
注意：
ユーザーがサムネール画像をクリックしたときに Web ページを開くようにインタラクティブビデオを作成した場合、デバイスによっては、ポップアップ Web ページが開かないようにブロックされます。そのようなケースでは、デバイスのポップアップブロック機能の設定を変更する必要があります。例えば、Apple iPhone 6 では 設定／Safari／ポップアップブロックをタップして、コントロールをオフにスライドします。こうすると、インタラクティブビデオを再生してサムネールをクリックしたときに、ポップアップを開くかどうかを確認されます。同意すると Web ページが開きます。
インタラクティブビデオの作成方法を示す 7 分 30 秒のガイドをご覧ください。
（このビデオガイドの対象は Assets on Demand ですが、原則や手順は AEM Assets のインタラクティブビデオにも対応しています。）
「AEM Assets でのインタラクティブなビデオの使用、リンク共有および YouTube での共有」ウェビナーでは、インタラクティブなビデオなどの機能を使用して、コンバージョン誘導イベントをビデオマーケティングコンテンツと連動させる方法を解説しています。
次のワークフローの手順説明は、ダイナミックメディア内のインタラクティブなビデオをすぐに使い始めることを目的としたものです。
一部のクイックスタートタスク内には「例」という見出しがあります。ここには、次のデモ Web ページに基づいた簡単なチュートリアルが含まれています。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html
「例」では、Web サイトにインタラクティブビデオを統合する手順が説明されます。
インタラクティブビデオの手順：
- （オプション）クイックビュー変数の特定 - まず、既存のクイックビュー実装で使用される動的変数を識別します。これらの変数を使用して、インタラクティブビデオを作成するときに、製品のサムネールを対応する製品のクイックビューにマッピングします。
（オプション）クイックビュー変数の特定を参照してください。
この手順は以下に該当する場合のみ必要です。
-クイックビューをトリガーして、ビデオにインタラクティビティを追加する。
- eCommerce ソリューション（IBM Websphere Commerce、Elastic Path、hybris、Intershop など）から AEM に製品データを取り出すために、AEM の実装が eCommerce 統合フレームワークを使用していない。
AEM Assets での eCommerce の概念を参照してください。 - （Optional）インタラクティブなビデオのビューアプリセットの作成 - プレーヤーを構成する様々なコンポーネント（ビデオスクラバーやインタラクティブサムネールなど）の外観と動作をカスタマイズします。
独自のインタラクティブビデオビューアプリセットの作成は、標準提供のインタラクティブビデオビューアプリセット（Shoppable_Video_Light または Shoppable_Video_Dark）を使用する場合には必要ありません。
（オプション）新しいビューアプリセットの作成とインタラクティブなビデオのビューアプリセットの作成に関する注意事項を参照してください。
- ビデオおよび関連する画像アセットのアップロード - インタラクティブにするビデオと関連する画像をアップロードします。
ビデオおよび関連するサムネールアセットのアップロードを参照してください。 - ビデオへのインタラクティビティの追加 - ビデオに 1 つ以上の時間セグメントを追加します。次に、それらの時間セグメント内で画像サムネールを関連付けます。各画像サムネールをアクション（ハイパーリンクまたはクイックビューなど）に割り当てます。インタラクティブビデオアセットを公開して作業は完了です。公開によって埋め込みコードまたは URL が生成されます。最終的には、このコードまたは URL をコピーして、Web サイトのランディングページに適用します。
ビデオへのインタラクティビティの追加を参照してください。
詳しくは、アセットの公開を参照してください。 - AEM でのインタラクティブビデオの Web サイトへの追加
AEM Sites または AEM eCommerce（あるいは両方）を使用している場合、AEM でインタラクティブメディアコンポーネントを Web ページにドラッグすることで、インタラクティブビデオを Web ページに直接追加できます。ページへのダイナミックメディアアセットの追加
埋め込みコードまたは URL を使用して、インタラクティブビデオを Web サイトエクスペリエンスに統合します。インタラクティブビデオの Web サイトへの統合を参照してください。
サードパーティの WCM（Web Content Manager）を使用している場合は、新しいインタラクティブビデオを、Web サイトで使用されている既存のクイックビュー実装に統合する必要があります。インタラクティブビデオの既存のクイックビューへの統合を参照してください。
注意：
このタスクが必要になるのは次に該当する場合のみです。
- クイックビューをトリガーして、ビデオにインタラクティビティを追加する。
- eCommerce ソリューション（IBM Websphere Commerce、Elastic Path、hybris、Intershop など）から AEM に製品データを取り出すために、AEM の実装が eCommerce 統合フレームワークを使用していない。AEM Assets での eCommerce の概念を参照してください。
AEM の実装が eCommerce を使用している場合は、このタスクをスキップして次のタスクに進みます。
最初に、インタラクティブなビデオの作成プロセス中に製品サムネールを対応する製品クイックビューにマッピングできるように、既存のクイックビューの実装で使用している動的変数を特定します。
ビデオに時間セグメントを追加する際に、セグメントに追加する各サムネールに SKU と任意の追加の変数を割り当てます。こうした変数は、適切な製品クイックビューを表示するために後で使用されます。
製品クイックビューを一意にトリガーするために必要な変数を適切に特定することが重要です。
既存のクイックビューの実装を担当している 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」タブを使用します。
- Internet Explorer では、F12 キーを押してデバッガーツールをアクティベートします。
ブラウザーでネットワーク監視をオンにして、ページ上でクイックビューを起動します。
次に、ネットワークログでクイックビューの Ajax URL を探し、記録された URL を今後の分析用にコピーします。クイックビューを起動するとほとんどの場合、サーバーに大量のリクエストが送信されます。通常、クイックビューの Ajax URL は、そのリクエストリストの最初の方にあります。Ajax URL には複雑なクエリ文字列の一部またはパスが含まれ、応答の MIME タイプは text/html、text/xml、text/javascript のいずれかです。
このプロセスの実行中は、Web サイトの異なる領域（異なる製品カテゴリおよび製品タイプが含まれる領域）にアクセスすることが重要です。なぜなら、クイックビュー URL には、ある特定の Web サイトカテゴリに共通するが、Web サイトの異なる領域にアクセスした場合にのみ変化する部分が存在することがあるからです。
単純なケースでは、クイックビュー URL 内で変化する唯一の部分が製品 SKU となります。この場合、AEM でサムネールをインタラクティブビデオの時間セグメントに追加するのに必要なデータは製品の SKU 値のみです。
一方、複雑なケースでは、クイックビュー URL に製品 SKU 以外の様々な要素が含まれます（カテゴリ ID、カラーコードなど）。その場合は、それぞれの要素が AEM のサムネールデータ定義で個別の変数になります。
次のクイックビュー URL の例と、その結果となるサムネールの変数について見てみましょう。
| ||||||||
例
前述の方法をサンプルの Web サイトに適用すると、製品のサムネールがいくつも含まれる Web ページが生成され、「SEE MORE」ボタンが表示されます。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html
そのページのすべての製品のクイックビューをアクティベートすると、バックエンドに対して次のリストのクイックビューリクエストが作成されます。
- datafeed/candles-233396346.json
- datafeed/candles-233978050.json
- datafeed/candles-234024346.json
- datafeed/candles-234024356.json
- datafeed/candles-234024359.json
- datafeed/cushions-233939848.json
- datafeed/cushions-234019477.json
- datafeed/cushions-234019483.json
- datafeed/furniture-231747479.json
- datafeed/furniture-232625621.json
- datafeed/furniture-232625626.json
- datafeed/furniture-233939810.json
- datafeed/furniture-233939825.json
- datafeed/furniture-233939828.json
- datafeed/furniture-233939853.json
- datafeed/furniture-233940334.json
- datafeed/glassware-000064007.json
- datafeed/glassware-230722193.json
- datafeed/glassware-233916550.json
- datafeed/glassware-233916597.json
これらのサーバーコールを見ると、製品固有の情報がリクエストパスのみに含まれることがわかります。また、クエリ文字列がまったく使用されていないこと、2 つの異なるタイプのデータが含まれることもわかります。
- 最初のタイプは、candles、cushions、furniture、glassware です。これは「製品カテゴリ」と呼ばれます。
- 2 つ目のタイプは製品コード（233916597 など）です。これは「製品 SKU」と考えることができます。
この情報に基づいて、全体的なクイックビュー URL は次のようなパターンであることがわかります。
/datafeed/$categoryId$-$SKU$.json
こうした分析に基づいて、サムネールのための 2 つの変数（categoryId と SKU）を使用できるという結論が得られます。
これで、ビデオおよび関連するサムネールアセットをアップロードできます。
デフォルトの標準提供インタラクティブビデオビューアプリセットタイプ（Shoppable_Video_dark または Shoppable_Video_light）を使用する予定がある場合は、このタスクをスキップして次に進むことができます。
オーサリング環境でサムネールをクリックすると、クイックビューダイアログボックスのプレビューが表示されます。
オプションで、インタラクティブなビデオの独自のカスタムビューアプリセットを作成することもできます。特に、ビデオプレーヤーのスタイル設定、インタラクティブなサムネールおよびビデオの最後に表示されるサムネールのグリッドビューを決定できます。
インタラクティブなビデオのビューアプリセットにより、追加したビデオとすべてのタイムラインセグメントが適切にレンダリングされます。また、プレビューモードで製品のサムネールをクリックすると、デフォルトのサンプルクイックビューが使用されるので、公開前にインタラクティビティをテストできます。
ビューアプリセットを保存すると、ビューアプリセットページでそのプリセットのステータスが自動的にオンに設定されます。このステータスは、そのプリセットがダイナミックメディアコンポーネントに表示され、ビデオのプレビュー時に必ず使用されることを意味します。また、新しいビューアプリセットも忘れずに手動で公開してください。
新しいビューアプリセットの作成を参照して、独自のインタラクティブビデオのビューアプリセットを作成します。
ビデオとサムネールアセットを既にアップロードしている場合は、ビデオへのインタラクティビティの追加に進んでください。
誤ったビデオや画像をアップロードした場合、または必要でなくなったアップロード済みビデオや画像を削除したい場合は、アセットの削除を参照してください。
ビデオおよび関連するサムネールアセットをアップロードするには：
-
目的の 1 つまたは複数のフォルダーにビデオおよび関連するサムネールアセットをアップロードします。
アセットのアップロードを参照してください。
FTP ジョブスケジューリングを使用したアセットのアップロードを参照してください。
インタラクティブなビデオを作成ページで、インプレース Visual Editor を使用してビデオにタイムラインセグメントを追加します。
タイムラインセグメントを追加したら、各セグメント内にサムネール画像を追加します。追加した各サムネールに、アクションを適用します。例えば、サムネールにクイックビューを適用したり、ハイパーリンクを割り当てることができます。
ページの右上隅にある「取り消し」および「やり直し」オプションは、現在の作成／編集セッションの間で有効です。
インタラクティブなビデオを保存すると、すぐにビデオがプレビューで開きます。そこから、インタラクティブなビデオのビューアプリセットを選択し、ビデオを再生して、顧客にどのように表示されるかを確認できます。
ビデオにインタラクティブを追加するには：
-
インタラクティブなビデオを作成ページで、次のいずれかの操作をおこないます。
- 再生ボタンをタップして、ビデオの再生を開始します。取り上げる特定の製品、サービス、詳細が表示されたら、ツールバーの「セグメントの追加」をタップします。ビデオの最後に到達するまで繰り返します。
追加した各時間セグメントに 1 つまたは複数のサムネール画像を割り当てて、それらのサムネールを、顧客が購入できるクイックビュー製品ページや詳細情報が記載されている Web ページにリンクできます。
- 再生ボタンをタップして、ビデオの再生を開始します。取り上げる特定の製品、サービス、詳細が表示されたら、ツールバーの「一時停止」をタップします。「セグメントの追加」をタップします。
ビデオの最後に到達するまで、ビデオを再生し、タイムラインに沿って一時停止して、セグメントを追加するという作業を続けます。
- 再生ボタンをタップして、ビデオの再生を開始します。取り上げる特定の製品、サービス、詳細が表示されたら、ツールバーの「セグメントの追加」をタップします。ビデオの最後に到達するまで繰り返します。
-
（オプション）次のいずれかの操作をおこないます。
- セグメントの開始時刻と終了時刻を調整します。
セグメントを選択し、先頭または末尾の青い楕円形をドラッグして、開始時刻または終了時刻をそれぞれ調整します。表示されるビデオフレームは、調整に応じて、ビデオ内の対応する時刻に移動します。タイムラインセグメントの移動は、タイムライン内の隣接するセグメントに基づいて制限されます。調整できる最小セグメント時間は 1 秒です。
次のナビゲーションショートカットを使用すると、ビデオのセグメントを簡単にチェックして微調整することができます。
- セグメントの先頭に直接移動するには、先頭の青い楕円をタップします。
- セグメントの末尾に直接移動するには、末尾の青い楕円をタップします。
- セグメントの先頭からビデオを再生するには、セグメント全体をタップします。
タイムラインセグメントの末尾の再配置 - セグメントの開始時刻と終了時刻を調整します。
-
選択したタイムラインセグメントにサムネールを関連付けるには 右側のアセットセレクターパネルで画像をタップします。
タイムラインセグメントには好きなだけサムネールを追加できます。各画像を選択すると、アセットセレクターの画像上にチェックマークが表示されます。
選択したタイムラインセグメント内でサムネールを並べ替えるには 画像アセットをタイムラインセグメント内の新しい位置にドラッグします。
アセットを並べ替えると、顧客がビデオを再生したときにビデオプレーヤーに隣接する領域に表示されるアセットの表示順序が変更されます。
選択したタイムラインセグメントからサムネールを削除するには 次のいずれかの操作をおこないます。
- アセットセレクターパネルでチェックマークの付いた画像をタップすると選択が解除されます。画像アセットがタイムラインセグメントから削除されます。
- 選択したタイムラインセグメントで画像をタップし、ツールバーの「製品を削除」をタップします。
アセットセレクターパネルで画像をタップすると、選択したタイムラインセグメントにその画像が追加されます。 - アセットセレクターパネルでチェックマークの付いた画像をタップすると選択が解除されます。画像アセットがタイムラインセグメントから削除されます。
-
選択したサムネール画像をクイックビューに関連付けるには 「アクションタイプ」の下の「クイックビュー」をタップします。
AEM Sites または Ecommerce のユーザーの場合：
- 「SKU 値」テキストフィールドには、選択した製品の Stock Keeping Unit（SKU）が既に設定されていることに注意してください。SKU は、提供している製品またはサービスごとの一意の識別子です。これは、AEM Commerce で画像が製品に関連付けられると自動的に設定されます。
- 設定済みの SKU が正しくない場合は、製品ピッカーアイコン（虫眼鏡）をタップまたはクリックして製品を選択ページを開きます。使用する製品をタップまたはクリックしてから、ページの右上隅のチェックマークをタップして、インタラクティブビデオエディターに戻ります。
AEM Sites または Ecommerce のユーザーではない場合：
- ホットスポットの変数の識別を参照してください。これらの変数を定義する必要があります。
- デフォルトでは、この SKU フィールドでは画像アセットのファイル名を拡張子を付けずに使用します。SKU に基づいたファイルの名前が標準命名規則に従っている場合、特に編集する必要はありません。
- それ以外の場合は、デフォルト値を編集して、正しい SKU 値を入力します。「SKU 値」テキストフィールドに、製品の SKU を入力します。SKU は、提供している製品またはサービスごとの一意の識別子です。入力した SKU 値によってクイックビューテンプレートの変数部分が自動的に入力され、タップされた画像が特定の SKU のクイックビューに関連付けられます。
（オプション）クイックビュー内で製品をさらに識別するために必要な変数がほかにある場合は、「汎用変数を追加」をタップします。テキストフィールドに追加の変数を指定します。例えば、追加の変数として category=Womens などと指定します。
選択したサムネール画像をハイパーリンクに関連付けるには 「アクションタイプ」の下の「ハイパーリンク」をタップして、次のいずれかを実行します。
- AEM Sites のユーザーである場合は、サイトセレクターアイコン（フォルダー）をタップして Web ページに移動します。
- スタンドアロンのダイナミックメディアユーザーである場合は、「HREF」テキストフィールドに、リンクされる Web ページへの完全な URL パスを指定します。
このリンクを新しいブラウザータブで開くか現在のタブで開くかを指定してください。
既にサムネール画像に割り当てられているアクションを編集するには タイムラインセグメント内で、テキストラベルの右側にチェーンリンクが表示されているサムネール画像をタップします。チェーンリンクは、アクションが割り当てられていることを示します。「アクション」タブをタップして、変更します。 サムネール画像のテキストラベルを変更するには デフォルトでは、テキストラベルにはサムネール画像の「タイトル」メタデータフィールドが使用されます。タイトルが存在しない場合は、代わりに、サムネール画像のファイル名から拡張子を除いたものが使用されます。
サムネール画像のテキストラベルを変更するには、「アクション」タブで、表示される画像アセットのすぐ下に目的のテキストを入力します。下の図を参照してください。
新しいテキストラベルが、ビデオプレーヤー自体と、タイムラインセグメントに表示されているサムネールテキストでのみ使用されていることに注目してください。ラベルの変更は、サムネール画像の「タイトル」メタデータフィールドとファイル名には影響しません。
加えた変更を元に戻すには ページの右上隅にある「取り消し」または「元に戻す」をタップします。 
新しいテキストラベルがサムネール画像に追加されています。 -
（オプション）次のいずれかの操作をおこないます。
- セグメントを統合 ‐ 2 つの隣接したセグメントを（製品サムネールが割り当てられているものも割り当てられていないものも）1 つのセグメントに統合できます。
タイムライン上で、1 つのセグメントに統合する 2 つ以上の連続したセグメントをタップします。下の図では 2 つの選択したセグメントに青い楕円形のドラッグハンドルが表示されていなことに留意してください。
ツールバーの「セグメントを統合」をタップします。
選択した 5 秒のセグメント 2 つを 10 秒のセグメント 1 つに統合。- セグメントを分割 ‐ 1 つのセグメントを 2 つの均等な長さのセグメントに分割できます。セグメントに製品サムネールが割り当てられている場合、サムネールは左のセグメントに組み込まれます。
タイムラインで、半分に分割したいセグメントをタップまたはクリックし、ツールバーで「セグメントを分割」をタップします。
2 つ以上のセグメントを選択すると、「セグメントを分割」オプションは無効になります。
選択した 10 秒のセグメントを 5 秒ずつのセグメント 2 つに分割。 - セグメントを統合 ‐ 2 つの隣接したセグメントを（製品サムネールが割り当てられているものも割り当てられていないものも）1 つのセグメントに統合できます。
-
「保存」をタップしてから「OK」をタップして、ビデオのビューアプリセットページに戻ります。そのページで、ビデオの左側にあるビューアプリセットを選択し、ビデオを再生して結果を確認します。
インタラクティブなビデオを作成ページの右上隅付近に、現在選択されてビデオで使用されているビューアプリセットの名前が表示されます。その名前をタップして、別のビューアプリセットを選択します。例えば、Shoppable_video_light ビューアプリセットでは、ビデオが再生されるときに横に白い表示領域が現れます。この表示領域には、クリック可能なサムネール画像が再生中に表示されます。Shoppable_video_dark ビューアプリセットでは、ビデオが再生されるときに横に黒い表示領域が現れます。
インタラクティブビデオの独自のビューアプリセットを作成した場合は、そのプリセットもリストに表示されて選択できます。注意：
インタラクティブなビデオを保存すると、一緒に関連する .vtt ファイルが自動的に保存されます。.vtt ファイルは、アセットのルートにある _VTT フォルダーに保存されます。このファイルとフォルダーは、Web サイトでインタラクティブなビデオを正しく再生するために必要です。そのため、_VTT フォルダーやそのコンテンツを移動、編集または削除しないでください。
-
インタラクティブなビデオを公開します。公開すると、最終的にコピーして Web サイトに貼り付ける埋め込みコードまたは URL が作成されます。
クイックビューを使用したインタラクティビティを追加した場合は、埋め込みコードのみを使用します。一方、ハイパーリンクされた Web ページを使用したインタラクティビティを追加した場合は、公開された URL を使用することもできます。
詳しくは、アセットの公開を参照してください。
注意：
クイックビューを含むショッパブルビデオを公開するには、ビデオに関連する各画像アセットをコマース領域から個別に公開してください。
タイムラインセグメントを追加し、インタラクティブなビデオを公開したので、既存の Web サイトのランディングページにビデオを追加する準備が整いました。Web サイトへのインタラクティブなビデオの統合を参照してください。
インタラクティブビデオアセットの公開方法について詳しくは、アセットの公開を参照してください。
AEM Sites のユーザーである場合は、インタラクティブメディアコンポーネントをページにドラッグすることによりインタラクティブビデオを追加できます。ページへのダイナミックメディアアセットの追加を参照してください。
スタンドアロン AEM Assets のユーザーである場合は、この節で説明するようにインタラクティブビデオを手動で Web サイトに追加できます。
- 公開されたインタラクティブなビデオの埋め込みコードまたは URL をコピーします。
Web ページへのビデオビューアまたは画像ビューアの埋め込みを参照してください。
クイックビューを使用したインタラクティビティを追加した場合は、埋め込みコードのみを使用します。一方、ハイパーリンクされた Web ページを使用したインタラクティビティを追加した場合は、公開された URL を使用することもできます。 - ターゲットの Web ページのコードで、静的なビデオの場所を特定します。
- 静的なビデオを削除し、AEM Assets からコピーしたそのままの埋め込みコードまたは URL でコードを置き換えます。
コピーした埋め込みコードはレスポンシブ環境用に設定されているので、以前に静的なビデオが使用していた領域に自動的に収まります。
注意：
そのため、ハイパーリンクされた Web ページのみを使用したインタラクティビティを追加した場合は、これで完了です。
一方、クイックビューをトリガーするインタラクティビティを追加した場合は、インタラクティブなビデオの隣のサムネールはただ表示されているだけで、まだ既存のクイックビューと統合されていません。そのため、インタラクティブなビデオを Web サイト上の既存のクイックビューと統合する必要があります。
例
次のデモ Web サイトを例として使用します。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html
次に示すのは標準のビデオ埋め込みコードです。
<style type="text/css">
#s7video_div.s7videoviewer{
width:100%;
height:auto;
}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
var s7videoviewer = new s7viewers.VideoViewer({
"containerId" : "s7video_div",
"params" : {
"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
"contenturl" : "https://demos-pub.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Video",
"config2": "/etc/dam/presets/analytics",
"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
"posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
}).init();
</script>
統合は、ビデオ埋め込みコードを削除して、AEM のインタラクティブビデオ埋め込みコードで置き換えるだけで簡単にできます。次の URL で結果を確認できます。ページに存在するインタラクティブビデオが表示されますが、既存のクイックビューにまだ統合されていません。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-1.html
注意：
このタスクはスタンドアロン AEM Assets のユーザーのみに適用されます。
このプロセスの最後の手順は、Web サイトで使用されている既存のクイックビュー実装にインタラクティブビデオを統合することです。すべてのケースで機能する統合のソリューションはありません。すべてのクイックビュー実装は固有です。そのため、フロントエンド IT 担当者の支援を受けた特別なアプローチが必要になります。
既存のクイックビュー実装は一般的に、Web ページ上で以下の順に発生する、相互に関連するアクションの連鎖となっています。
- ユーザーは、Web サイトのユーザーインターフェイス内で、特定の要素を起動します。
- フロントエンドコードは、手順 1 で起動されたユーザーインターフェイス要素に基づいてクイックビュー URL を取得します。
- フロントエンドコードは、手順 2 で取得した URL を使用して AJAX リクエストを送信します。
- バックエンドロジックは、対応するクイックビューのデータまたはコンテンツをフロントコードに送り返します。
- フロントエンドコードは、そのクイックビューのデータまたはコンテンツを読み込みます。
- （オプション）フロントエンドコードは、読み込んだクイックビューのデータを HTML 表現に変換します。
- フロントエンドコードは、モーダルダイアログボックスまたはパネルを表示し、エンドユーザー向けに、画面上に HTML コンテンツをレンダリングします。
これらの呼び出しは、かならずしもそれぞれ独立した、Web ページのロジックから任意の手順で呼び出すことができるパブリックな API 呼び出しを表すわけではありません。むしろ、次の手順がすべて前の手順の最終フェーズ（コールバック）に潜むような連鎖的な呼び出しになっています。
インタラクティブビデオが手順 1 と（部分的に）手順 2 を置き換えます。それに加えて、ユーザーがインタラクティブビデオ内のサムネールをクリックしたときに、そのユーザー操作がビューアによって処理されます。ビューアは、AEM に以前に追加されたすべてのサムネールデータを含む Web ページに、イベントを返します。
そのようなイベントハンドラーでは、フロントエンドコードは次の処理を実行します。
- インタラクティブビデオから送出されるイベントをリッスンします。
- サムネールデータに基づいてクイックビュー URL を作成します。
- バックエンドからクイックビューを読み込み、画面上の表示用にレンダリングするプロセスを起動します。
また、インタラクティブビデオビューアでは、全画面操作モードもサポートされます。全画面表示でエンドユーザーがサムネールをクリックすると、クイックビューがトリガーされます。この機能を実現するためには、クイックビューモーダルダイアログボックスがビューアのコンテナにアタッチされるようにフロントエンドコードを変更します。ドキュメントの Body またはその他の Web ページ要素（ビューアが全画面モードになっているときに使用できない）を追加しないでください。このジョブを実行するコードは、ビューアがページに読み込まれた後で送信されるもう 1 つのビューアコールバックをリッスンする必要があります。
AEM によって返される埋め込みコードには、すぐに使用可能なイベントハンドラーが既に含まれています。次のハイライトされたコードスニペットのように、コメントアウトされています。
<style type="text/css">
#s7interactivevideo_div.s7interactivevideoviewer{
width:100%;
height:auto;
}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
"containerId" : "s7interactivevideo_div",
"params" : {
"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
"contenturl" : "https://demos-pub.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
"config2": "/etc/dam/presets/analytics",
"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
})
/* // Example of interactive video event for quick view.
s7interactivevideoviewer.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
},
"initComplete":function() {
//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
var popup = document.getElementById('quickview_div'); // get custom quick view container
popup.parentNode.removeChild(popup); // remove it from current DOM
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(popup); //Attach custom quick view container to viewer
}
});
*/
s7interactivevideoviewer.init();
</script>
そのため、必要な処理は、このハイライトされたコードスニペットのコメントアウトを解除し、ダミーのハンドラー本体を、特定の Web ページ専用のコードに置き換えることだけです。
標準の埋め込みコードには、2 つのデフォルトコールバックハンドラー、quickViewActivate と initComplete が含まれています。quickViewActivate ハンドラーがトリガーされるのは、ビューアでサムネールがクリックされるときです。これを使用して、ビューアをクイックビューのアクティベートロジックに統合します。initComplete ハンドラーは、ビューアがページに読み込まれるときに 1 回だけトリガーされます。このハンドラーは、Web ページ DOM でのクイックビューダイアログボックスの位置を調整するために使用されます。
クイックビュー URL の作成プロセスは、このトピックで既に説明したサムネールの変数を識別するためのプロセスと逆になります。前に識別したクイックビュー URL の例を使用して、クイックビュー URL の各ケースでの作成方法を確認できます。
| ||||||||
クイックビュー URL を起動してクイックビューパネルをアクティベートするための最後の手順では、おそらく IT 部門のフロントエンド IT 担当者の支援が必要になります。フロントエンド IT 担当者は、すぐに使用できるクイックビュー URL を含め、クイックビュー実装を適切な手順から正しく起動するための最適な方法について理解しています。
これらの手順をデモ Web サイトに適用してインタラクティブビデオをクイックビューのコードに統合する方法を確認できます。このトピックでは先ほど、クイックビュー URL の構造を次のように識別しました。
/datafeed/$CategoryId$-$SKU$.json
この URL は quickViewActivate ハンドラー内で簡単に再構成できます。次のように、ビューアのコードを介してハンドラーに渡される inData オブジェクト内の categoryId フィールドと sku フィールドを使用します。
var sku=inData.sku; var categoryId=inData.categoryId; var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
このデモ Web サイトは、単純な loadQuickView() 関数呼び出しを使用してクイックビューダイアログボックスを起動しています。この関数は、1 つの引数（クイックビューデータの URL）のみを受け取ります。したがって、インタラクティブビデオを統合するために必要な最後の手順は、quickViewActivate ハンドラーに次のコード行を追加することです。
loadQuickView(quickViewUrl);
最後に、クイックビューダイアログボックスがビューアのコンテナ要素にアタッチされていることを確認します。デフォルトの埋め込みコードにはこの機能を実現するためのサンプルステップが含まれています。ビューアのコンテナ要素への参照を取得するには、次のコード行を使用できます。
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
実際にモーダルダイアログボックス要素を探して前述のコンテナにアタッチする手順は、ケースごとに異なります。ここでも、必要なクイックビュー実装に詳しいフロントエンド開発者の助けを借りることをお勧めします。
サンプル Web サイトの場合、クイックビューモーダルダイアログボックスは DIV として実装され、クイックビューモーダル ID がドキュメント BODY に直接アタッチされています。このため、このダイアログをビューアのコンテナに移動するコードは、次のとおり単純です。
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));
<style type="text/css">
#s7interactivevideo_div.s7interactivevideoviewer{
width:100%;
height:auto;
}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
"containerId" : "s7interactivevideo_div",
"params" : {
"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
"contenturl" : "https://demos-pub.assetsadobe.com/",
"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
})
// Example of interactive video event for quick view.
s7interactivevideoviewer.setHandlers({
"quickViewActivate": function(inData) {
var sku=inData.sku; //SKU for product ID
var categoryId=inData.categoryId; //categoryId
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
loadQuickView(quickViewUrl);
},
"initComplete":function() {
//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));
}
});
s7interactivevideoviewer.init();
</script>
インタラクティブビデオが完全に統合された最終的なデモ Web サイトは次のようになります。
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-3.html
クイックビューを使用したカスタムポップアップの作成を参照してください。