基本ズーム basic-zoom

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

作成対象：

Developer
User

基本ズームビューアは、単一のズーム可能な画像を表示する画像ビューアです。ズームツール、フルスクリーンサポート、オプションの閉じるボタンがあります。このビューアは最も軽量です。デスクトップやモバイルデバイスで動作するように設計されています。

NOTE

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

ビューアータイプ 501。

必要システム構成と前提条件を参照してください。

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

基本的なズームビューアの使用 section-e6c68406ecdc4de781df182bbd8088b4

Basic Zoom Viewerは、実行時にビューアがダウンロードするJavaScript ファイルと一連のヘルパーファイルを表します。基本的には、この特定のビューア、アセット、CSSで使用されるすべてのビューアSDK コンポーネントを含む単一のJavaScriptです。

ポップアップモードでは、IS-Viewersを備えた実稼動対応のHTML ページを使用するか、ドキュメント化されたAPIを使用してターゲット web ページに統合する埋め込みモードで使用して、基本的なZoom Viewerを使用できます。

設定とスキニングは、他のビューアと同様です。すべてのスキニングは、カスタム CSSを使用して実行できます。

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

基本的なズームビューアの操作 section-642e66ca38cd4032992840ec6c0b0cd2

基本的なZoom Viewerは、他のモバイルアプリケーションで一般的な次のタッチジェスチャーをサポートしています。

ビューアがユーザーのスワイプジェスチャーを処理できない場合、ネイティブページスクロールを実行するためにイベントをweb ブラウザーに転送します。この機能により、ビューアがデバイスの画面領域のほとんどを占めている場合でも、ユーザーはページを移動できます。

ジェスチャ

説明

シングルタップ

ユーザーインターフェイスの要素を表示または非表示にします。

ダブルタップ

最大の倍率に達するまで1 レベルでズームします。次のダブルタップジェスチャーは、ビューアを初期表示状態にリセットします。

ピンチ

ズームインまたはズームアウト

スワイプ

画像がリセット状態の場合、ジェスチャーはネイティブページスクロールを実行します。

画像をズームインすると、画像が移動します。画像がビューエッジに移動され、その方向にスワイプが実行された場合、ジェスチャーはネイティブページスクロールを実行します。

ビューアは、タッチスクリーンとマウスを備えたWindows デバイスでのタッチ入力とマウス入力の両方をサポートしています。ただし、このサポートは、Chrome、Internet Explorer 11、およびEdgeのweb ブラウザーのみに限定されます。

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

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

基本的なズームビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

web ページごとに、閲覧者の行動に対するニーズは異なります。 Web ページでリンクが提供される場合があります。このリンクを選択すると、別のブラウザーウィンドウでビューアが開きます。それ以外の場合は、ビューアをホスティングページに直接埋め込む必要があります。後者の場合、web ページは静的なページレイアウトを使用するか、異なるデバイスまたは異なるブラウザーウィンドウのサイズに対して異なる表示を行うレスポンシブデザインを使用します。これらのニーズに対応するために、ビューアでは、ポップアップ、固定サイズの埋め込み、レスポンシブデザインの埋め込みという3つの主要な操作モードをサポートしています。

ポップアップモードについて

ポップアップモードでは、ビューアは別のweb ブラウザーウィンドウまたはタブで開きます。ブラウザーのウィンドウ領域全体を使用し、ブラウザーのサイズが変更されたり、デバイスの向きが変更されたりした場合に備えて調整します。

ポップアップモードは、モバイルデバイスで最も一般的です。 Web ページは、window.open() JavaScript呼び出し、A HTML要素の適切な設定、またはその他の適切なメソッドを使用してビューアを読み込みます。

ポップアップ操作モードには、標準のHTML ページを使用することをお勧めします。この場合はBasicZoomViewer.htmlと呼ばれ、標準のIS-Viewers デプロイメントのhtml5/ サブフォルダー内にあります。

<s7viewers_root>/html5/BasicZoomViewer.html

カスタム CSSを適用すると、視覚的なカスタマイズを実現できます。

次に、新しいウィンドウでビューアを開くHTML コードの例を示します。

<a href="http://s7d1.scene7.com/s7viewers/html5/BasicZoomViewer.html?asset=Scene7SharedAssets/Backpack_B" target="_blank">Open popup viewer</a>

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

埋め込みモードでは、ビューアが既存の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を使用する前に、BasicZoomViewer.jsを含めることを確認してください。 BasicZoomViewer.js ファイルは、標準のIS-Viewers デプロイメントのhtml5/js/ サブフォルダーにあります。

<s7viewers_root>/html5/js/BasicZoomViewer.js

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

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

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/BasicZoomViewer.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>`

ビューアサイズの設定

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

CSSで直接HTML ページまたはカスタムビューア CSS ファイルにサイズを設定します。その後、Dynamic Media Classicのビューアプリセットレコードに割り当てられるか、スタイルコマンドを使用して明示的に渡されます。

CSSを使用したビューアのスタイル設定について詳しくは、基本ズームビューアのカスタマイズを参照してください。

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

code language-html
`#s7viewer.s7basiczoomviewer { width: 640px; height: 480px; }`

Dynamic Media Classicのビューアプリセットレコードでstagesize修飾子を設定できます。または、params コレクションを持つビューアの初期化コードを使用して明示的に渡すことも、「コマンドリファレンス」セクションで説明されているように、API呼び出しとして次のように渡すこともできます。

code language-html
`basicZoomViewer.setParam("stagesize", "640,480");`

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

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

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

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

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

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

code language-html


<script type="text/javascript">
var basicZoomViewer = new s7viewers.BasicZoomViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Backpack_B",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>

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

code language-html


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/BasicZoomViewer.js"></script>
<style type="text/css">
#s7viewer.s7basiczoomviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var basicZoomViewer = new s7viewers.BasicZoomViewer({
 "containerId":"s7viewer",
 "params":{
  "asset":"Scene7SharedAssets/Backpack_B",
  "serverurl":"http://s7d1.scene7.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://s7d1.scene7.com/s7viewers/html5/js/BasicZoomViewer.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 basicZoomViewer = new s7viewers.BasicZoomViewer({
 "containerId":"s7viewer",
 "params":{
  "asset":"Scene7SharedAssets/Backpack_B",
  "serverurl":"http://s7d1.scene7.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://s7d1.scene7.com/s7viewers/html5/js/BasicZoomViewer.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 basicZoomViewer = new s7viewers.BasicZoomViewer({
 "containerId":"s7viewer",
 "params":{
  "asset":"Scene7SharedAssets/Backpack_B",
  "serverurl":"http://s7d1.scene7.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://s7d1.scene7.com/s7viewers/html5/js/BasicZoomViewer.js"></script>
<style type="text/css">
#s7viewer.s7basiczoomviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var basicZoomViewer = new s7viewers.BasicZoomViewer();
basicZoomViewer.setContainerId("s7viewer");
basicZoomViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
basicZoomViewer.setAsset("Scene7SharedAssets/Backpack_B");
basicZoomViewer.init();
</script>
</body>
</html>

recommendation-more-help

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