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

最終更新日： 2025年10月3日

トピック：
{"id":"a01bfd36-4ab8-4bf8-9dc0-5b45b890552e"}

作成対象：

{"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

インタラクティブ画像ビューアは、クリック可能なホットスポットを含む、ズームできない単一の画像を表示するビューアです。このビューアの目的は、「買い物可能なバナー」エクスペリエンスを実装することです。つまり、ユーザーはバナー画像の上にホットスポットを選択し、web サイトのクイックビューまたは製品詳細ページにリダイレクトされます。デスクトップやモバイルデバイスで動作するように設計されています。

NOTE

IR （画像レンダリング）またはUGC （ユーザー生成コンテンツ）を使用する画像は、このビューアではサポートされていません。

ビューアータイプは508です。

デモ URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://landing.adobe.com/en/na/dynamic-media/ctir-2755/live-demos.html

システム要件 section-b7270cc4290043399681dc504f043609

必要システム構成を参照してください。

インタラクティブ画像ビューアの使用 section-e6c68406ecdc4de781df182bbd8088b4

Interactive Image Viewerは、メインのJavaScript ファイルと一連のヘルパーファイルを表します（1つのJavaScriptには、この特定のビューア、アセット、CSSで使用されるすべてのビューア SDK コンポーネントが含まれています）。実行時にビューアがダウンロードします。

インタラクティブ画像ビューアは埋め込みモードでのみ使用できます。このモードでは、文書化されたAPIを使用してターゲット web ページに統合されます。

設定とスキニングは、このヘルプに記載されている他のビューアと同様です。すべてのスキニングは、カスタム CSSを使用して実行できます。

すべてのビューアに共通するコマンド参照 – 構成属性およびすべてのビューアに共通するコマンド参照 – URLを参照してください

インタラクティブ画像ビューアの操作 section-642e66ca38cd4032992840ec6c0b0cd2

Video Image Viewerでサポートされているインタラクションは、デスクトップシステムでのホットスポットのアクティベーションです。このアクティベーションは、ワンタップでクリックおよびタッチデバイス上で行われます。

ビューアは完全にキーボードアクセス可能です。

キーボードのアクセシビリティとナビゲーションを参照してください。

インタラクティブ画像ビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

インタラクティブ画像ビューアは、ホスティングページに埋め込まれています。このようなweb ページは、静的なレイアウトを持つ場合もあれば、異なるデバイスや異なるブラウザーウィンドウのサイズに対して「レスポンシブ」で異なる表示を行う場合もあります。

これらのニーズに対応するために、ビューアでは、固定サイズ埋め込みとレスポンシブ埋め込みの2つの主要な操作モードをサポートしています。

固定サイズ埋め込みモードとレスポンシブデザイン埋め込みモードについて

埋め込みモードでは、ビューアが既存のweb ページに追加されます。このweb ページには、ビューアに関連しない一部の顧客コンテンツが既に含まれている可能性があります。通常、閲覧者はweb ページの不動産の一部しか占めていません。

主なユースケースは、デスクトップ PCやタブレットデバイス向けのweb ページと、デバイスの種類に応じてレイアウトを自動的に調整するレスポンシブデザインのページです。

初期読み込み後にビューアのサイズが変更されない場合は、固定サイズ埋め込みが使用されます。この方法は、静的レイアウトを持つweb ページに最適です。

レスポンシブデザイン埋め込みは、コンテナ DIVのサイズ変更に応じて、実行時にビューアのサイズを変更する必要があることを前提としています。最も一般的なユースケースは、柔軟性の高いページレイアウトを使用するweb ページにビューアを追加することです。

レスポンシブデザイン埋め込みモードでは、web ページのサイズとコンテナ DIVのサイズによって、ビューアの動作が異なります。 Web ページでコンテナ DIVの幅のみを設定し、高さを制限しない場合、ビューアは使用するアセットの縦横比に応じて自動的に高さを選択します。この機能により、側面にパディングすることなく、アセットをビューに完全に収めることができます。このユースケースは、BootstrapやFoundationなどのレスポンシブ web デザインレイアウトフレームワークを使用するweb ページで最も一般的です。

それ以外の場合、web ページでビューアのコンテナ DIVの幅と高さの両方を設定すると、ビューアはその領域だけを塗りつぶします。また、web ページレイアウトが提供するサイズにも従います。良い例は、ビューアをモーダルオーバーレイに埋め込むことです。このオーバーレイは、web ブラウザーのウィンドウサイズに応じてサイズが調整されます。

固定サイズ埋め込み

次の操作を実行して、ビューアをweb ページに追加します。

ビューアのJavaScript ファイルをweb ページに追加します。
コンテナ DIVを定義しています。
ビューアサイズの設定。
ビューアの作成と初期化。
ビューアのJavaScript ファイルをweb ページに追加します。

ビューアを作成するには、HTML ヘッドにスクリプトタグを追加する必要があります。ビューアーAPIを使用する前に、InterativeImage.jsを含めることを確認してください。 InteractiveImage.js ファイルは、標準のIS-Viewers デプロイメントのhtml5/js/ サブフォルダーにあります。

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js

ビューアがAdobe Dynamic Media Classic サーバーのいずれかにデプロイされ、同じドメインから提供される場合は、相対パスを使用できます。そうでない場合は、IS-ViewersがインストールされているAdobe Dynamic Media Classic サーバーの1つにフルパスを指定します。

相対パスは次のようになります。

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js"></script>

NOTE

ページ上のメインビューア JavaScript include ファイルのみを参照してください。実行時にビューアのロジックによってダウンロードされる可能性があるweb ページコード内の他のJavaScript ファイルを参照しないでください。特に、/s7viewers コンテキストパス（いわゆる統合SDK include）からビューアによって読み込まれたHTML5 SDK Utils.js ライブラリを直接参照しないでください。その理由は、Utils.jsまたは類似のランタイムビューアーライブラリの場所が、ビューアーのロジックによって完全に管理され、ビューアーリリース間で場所が変更されるためです。 Adobeは、古いバージョンのセカンダリビューア includesをサーバー上に保持しません。

その結果、ビューアがページ上で使用するセカンダリ JavaScript includeを直接参照すると、新しい製品バージョンがデプロイされる際に、将来的にビューア機能が破損します。

コンテナ DIVを定義しています。

ビューアを表示するページに、空のDIV要素を追加します。このIDは後でビューア APIに渡されるので、DIV要素にはIDが定義されている必要があります。 DIVのサイズはCSSで指定します。

プレースホルダーDIVは配置された要素です。position CSS プロパティがrelativeまたはabsoluteに設定されていることを意味します。

次に、定義済みのプレースホルダーDIV要素の例を示します。

code language-html
`<div id="s7viewer" style="position:relative"></div>`

ビューアサイズの設定

ビューアの静的サイズは、.s7interactiveimage トップレベル CSS クラスを絶対単位で宣言するか、stagesize修飾子を使用することで設定できます。

CSSで直接HTML ページにサイズを設定できます。または、カスタムビューア CSS ファイルにサイズを設定して、後でAdobe Experience Manager Assets オンデマンドのビューアプリセットレコードに割り当てるか、style コマンドを使用して明示的に渡すことができます。

ビューアのCSSでのスタイル設定について詳しくは、ビデオを参照してください。

次に、HTML ページで静的ビューアサイズを定義する例を示します。

code language-html
`#s7viewer.s7interactiveimage { width: 1174px; height: 500px; }`

params コレクションを使用してビューア初期化コードを使用してstagesize修飾子を明示的に渡すか、次のように「コマンドリファレンス」セクションで説明されているように、API呼び出しとして渡すことができます。

code language-html
`interactiveImage.setParam("stagesize", "1174,500");`

CSS ベースのアプローチを推奨し、この例で使用します。

ビューアの作成と初期化。

上記の手順を完了したら、s7viewers.InteractiveImage クラスのインスタンスを作成し、すべての構成情報をそのコンストラクターに渡し、ビューアーインスタンスでinit() メソッドを呼び出します。構成情報は、JSON オブジェクトとしてコンストラクターに渡されます。少なくとも、このオブジェクトには、ビューアコンテナ IDの名前を保持するcontainerId フィールドと、ビューアでサポートされている設定パラメーターを含むネストされたparams JSON オブジェクトが必要です。この場合、params オブジェクトには、少なくともserverUrl プロパティとして渡された画像サービング URLと、asset パラメーターとして最初のアセットが必要です。 JSON ベースの初期化APIを使用すると、1行のコードでビューアを作成して開始できます。

ビューアコードがIDでコンテナ要素を見つけられるように、ビューアコンテナをDOMに追加することが重要です。一部のブラウザーは、Web ページの最後までDOMの構築を遅らせます。互換性を最大限に高めるには、終了BODY タグの直前または本文onload() イベントでinit() メソッドを呼び出します。

同時に、コンテナ要素は必ずしもweb ページレイアウトの一部であってはなりません。例えば、割り当てられたdisplay:none スタイルを使用して非表示にすることができます。この場合、ビューアは、web ページがコンテナ要素をレイアウトに戻す瞬間まで初期化プロセスを遅らせます。このイベントが発生すると、ビューアの読み込みが自動的に再開されます。

次に、ビューアインスタンスを作成し、必要な最小限の設定オプションをコンストラクターに渡してinit() メソッドを呼び出す例を示します。この例では、interactiveImageがビューアインスタンスであると仮定します。s7viewerはプレースホルダーDIVの名前、http://aodmarketingna.assetsadobe.com/is/imageは画像サービング URL、/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.はアセットです。

code language-html


<script type="text/javascript">
var interactiveImage = new s7viewers.InteractiveImage ({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg",
 "serverurl":"http://aodmarketingna.assetsadobe.com/is/image"
}
}).init();
</script>

次のコードは、ビデオイメージビューアを固定サイズで埋め込む面倒なweb ページの完全な例です。

code language-html


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js"></script>
<style type="text/css">
#s7viewer.s7interactiveimage {
 width: 1174px;
 height: 500px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var interactiveImage = new s7viewers.InteractiveImage({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg",
 "serverurl":"http://aodmarketingna.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

高さの制限のないレスポンシブデザイン埋め込み

レスポンシブデザインの埋め込みでは、通常、web ページには、ビューアのコンテナ DIVのランタイムサイズを決定する、ある種の柔軟なレイアウトが配置されています。次の例では、web ページでビューアのコンテナ DIVがweb ブラウザーのウィンドウサイズの40%を使用できるようになったと仮定します。そして、その高さは無制限に残されています。 Web ページのHTML コードは次のようになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

このようなページにビューアを追加することは、固定サイズ埋め込みの手順と似ています。唯一の違いは、ビューアサイズを明示的に定義する必要がないことです。

ビューアのJavaScript ファイルをweb ページに追加します。
コンテナ DIVを定義しています。
ビューアの作成と初期化。

上記のすべての手順は、固定サイズの埋め込みと同じです。コンテナ DIVを既存の"holder" DIVに追加します。次のコードは、完全な例です。ブラウザーのサイズを変更するとビューアのサイズが変わり、ビューアの縦横比がアセットとどのように一致するかを確認します。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveImage = new s7viewers.InteractiveImage({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg",
 "serverurl":"http://aodmarketingna.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

幅と高さが定義された柔軟なサイズ埋め込み

幅と高さが定義された柔軟なサイズの埋め込みがある場合、web ページのスタイルが異なります。 "holder" DIVに両方のサイズを提供し、ブラウザーウィンドウの中央に配置します。また、web ページでは、HTML要素とBODY要素のサイズが100%に設定されています。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

残りの埋め込み手順は、高さの制限のないレスポンシブ埋め込みに使用する手順と同じです。結果として得られる例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveImage = new s7viewers.InteractiveImage({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg",
 "serverurl":"http://aodmarketingna.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

Setter ベースのAPIを使用した埋め込み

JSON ベースの初期化を使用する代わりに、セッターベースのAPIとno-args コンストラクターを使用できます。このAPI コンストラクターを使用すると、パラメーターは受け取られず、設定パラメーターはsetContainerId()、setParam()、setAsset()のAPI メソッドを使用して指定され、別々のJavaScript呼び出しが行われます。

次の例は、セッターベースのAPIで固定サイズの埋め込みを使用する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js"></script>
<style type="text/css">
#s7viewer.s7interactiveimage {
 width: 1174px;
 height: 500px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var interactiveImage = new s7viewers.InteractiveImage();
interactiveImage.setContainerId("s7viewer");
interactiveImage.setParam("serverurl", "http://aodmarketingna.assetsadobe.com/is/image");
interactiveImage.setAsset("/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg");
interactiveImage.init();
</script>
</body>
</html>

recommendation-more-help

dynamic-media-developer-resources-help-aem-viewers-ref