ズーム

2024年7月22日

トピック：

作成対象：

開発者
ユーザー

ズームビューアは、ズーム可能な画像を表示する画像ビューアです。このビューアは画像セットを操作し、スウォッチを使用してナビゲーションを行います。ズームツール、フルスクリーンサポート、スウォッチ、オプションの「閉じる」ボタンがあります。デスクトップおよびモバイルデバイスで動作するように設計されています。

NOTE

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

ビューアのタイプは 502 です。

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

デモ URL

https://s7d9.scene7.com/s7viewers/html5/ZoomViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample

ズームビューアの使用

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

ズームビューアは、IS-Viewers に付属の実稼動用HTMLページを使用したポップアップモードか、埋め込みモードで使用できます。この場合、ドキュメント化された API を使用して対象の web ページに統合されます。

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

すべてのビューアに共通のコマンドリファレンス – 設定属性およびすべてのビューアに共通のコマンドリファレンス - URL を参照してください

ズームビューアの操作

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

ジェスチャ	説明
シングルタップ	スウォッチの新しいサムネールを選択します。メインビューでは、ユーザーインターフェイス要素が表示または非表示になります。
ダブルタップ	最大の倍率に達するまで 1 レベルでズームします。次にダブルタップのジェスチャーを行うと、ビューアは最初の表示状態にリセットされます。
ピンチ	ズームインまたはズームアウトします。
水平スワイプまたはフリック	スウォッチバーのスウォッチのリストをスクロールします。画像がリセット状態で、 frametransition パラメーターがスライドに設定されている場合、アセットはスライドアニメーションと共に変更されます。他のフレーム遷移モードの場合、ジェスチャはネイティブのページスクロールを実行します。画像がズームインされると、画像は水平方向に移動します。画像がビューの端に移動され、同じ方向にスワイプが実行されると、ジェスチャはネイティブページのスクロールを実行します。
垂直スワイプ	画像がリセット状態の場合、ジェスチャーはネイティブページのスクロールを実行します。画像がズームインされると、画像が垂直方向に移動します。画像がビューの端に移動され、同じ方向にスワイプが実行されると、ジェスチャはネイティブページスクロールを実行します。スウォッチ領域内でジェスチャーを行うと、ネイティブページのスクロールが実行されます。

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

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

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

ズームビューアの埋め込み

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

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

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

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

ポップアップ操作モードには、標準のHTMLページを使用することをお勧めします。標準提供のHTMLページは ZoomViewer.html と呼ばれ、標準の IS-Viewers デプロイメントの html5/ サブフォルダーに次のように配置されています。

<s7viewers_root>/html5/ZoomViewer.html

カスタム CSS を適用して、ページの外観をカスタマイズします。

以下は、新しいウィンドウでビューアを開くHTMLコードの例です。

 <a href="http://s7d1.scene7.com/s7viewers/html5/ZoomViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample"
target="_blank">Open popup viewer</a>

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

埋め込みモードでは、ビューアが既存の web ページに追加されます。これには、ビューアに関連しない顧客コンテンツが既に含まれている場合があります。閲覧者は通常、Web ページの領域の一部のみを占有します。

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

固定サイズの埋め込みは、初回読み込み後にビューアのサイズが変更されない場合に使用されます。このオプションは、静的なレイアウトの web ページに最適です。

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

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

Web ページでビューアのコンテナ DIV の幅と高さの両方が設定されている場合、ビューアはその領域を埋め、web ページが提供するサイズに従います。例えば、ビューアをモーダルオーバーレイに埋め込む場合、オーバーレイは web ブラウザーのウィンドウサイズに応じてサイズが変更されます。

固定サイズの埋め込み

Web ページにビューアを追加するには、次の手順を実行します。

Web ページへのビューアJavaScript ファイルの追加
コンテナ DIV の定義。
ビューアサイズの設定。
ビューアの作成と初期化。
Web ページへのビューアJavaScript ファイルの追加

ビューアを作成するには、HTMLの先頭にスクリプトタグを付ける必要があります。ビューア API を使用する前に、必ず ZoomViewer.js を含めてください。 ZoomViewer.js ファイルは、標準の IS-Viewers デプロイメントの html5/js/ サブフォルダーにあります。

<s7viewers_root>/html5/js/ZoomViewer.js

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

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

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/ZoomViewer.js"></script>

NOTE

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

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

コンテナ DIV の定義。

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

プレースホルダー DIV が配置済み要素です（つまり、position CSS プロパティが relative または absolute に設定されています）。

定義されたプレースホルダー DIV 要素の例を以下に示します。
<div id="s7viewer" style="position:relative"></div>
ビューアサイズの設定。

このビューアにはサムネールが表示されます。複数の項目セットを操作する場合、デスクトップシステムではサムネールがメインビューの下に配置されます。同時に、ビューアでは API を使用して、実行時にメインアセットを入れ替え setAsset() ことができます。開発者は、新しいアセットに項目が 1 つしかない場合に、ビューアが下部のサムネール領域を管理する方法を制御できます。外側のビューアのサイズはそのままにして、メインビューの高さを上げてサムネール領域を占有することができます。または、メインビューのサイズを静的に保ち、外側のビューア領域を折りたたんで、web ページコンテンツを上に移動したり、サムネールから残った無料の画面領域を使用したりできます。

外側のビューアの境界をそのままにするには、.s7zoomviewer の最上位レベル CSS クラスのサイズを絶対単位で定義します。 CSS でのサイズ設定は、HTMLページに直接配置できます。または、カスタムビューア CSS ファイルに入れて、後でDynamic Media Classicのビューアプリセットレコードに割り当てたり、style コマンドを使用して明示的に渡したりできます。

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

以下に、HTMLページで静的な外部ビューアのサイズを定義する例を示します。
#s7viewer.s7zoomviewer { width: 640px; height: 480px; }
次の例では、固定の外部ビューアで動作を確認できます。セットを切り替えても、外側のビューアのサイズは変わりません。

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/zoom/ZoomViewer-fixed-outer-area.html?lang=ja

メインビューのサイズを静的にするには、.s7zoomviewer .s7container CSS セレクターを使用するか、修飾子を使用して、内部の Container SDK コンポーネントのビューアサイズを絶対単位で定義 stagesize ます。

次に、アセットを切り替えるときにメイン表示領域のサイズが変更されないように、内部の Container SDK コンポーネントのビューアサイズを定義する例を示します。
#s7viewer.s7zoomviewer .s7container { width: 640px; height: 480px; }
次のデモページは、固定されたメインビューサイズでのビューアの動作を示しています。セットを切り替えると、メインビューは静的なままになり、web ページコンテンツは垂直方向に移動します。

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/zoom/ZoomViewer-fixed-main-view.html?lang=ja

stagesize 修飾子は、Dynamic Media Classicのビューアプリセットレコードで設定できます。または、以下に示すように、params コレクションを使用して、または API 呼び出しとして、ビューア初期化コードを使用して明示的に渡すこともできます。
zoomViewer.setParam("stagesize", "640,480");
この例では、CSS ベースのアプローチをお勧めします。
ビューアの作成と初期化。

上記の手順を完了したら、クラスのインスタンスを作成し、すべての設定情報 s7viewers.ZoomViewer そのコンストラクターに渡して、ビューアインスタンスのメソッド init() 呼び出します。

設定情報は、JSON オブジェクトとしてコンストラクターに渡されます。少なくとも、このオブジェクトには containerId ビューアコンテナ ID の名前を保持するフィールドと、ビューアがサポートする設定パラメーター params 含むネストされた JSON オブジェクトが必要です。この場合、params オブジェクトには、少なくとも画像サービング URL がプロパティとして渡され、初期アセットがパラメーター serverUrl して渡されてい asset 必要があります。 JSON ベースの初期化 API を使用すると、1 行のコードでビューアを作成して開始できます。

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

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

以下に、ビューアインスタンスを作成し、必要な最小限の設定オプションをコンストラクターに渡して、init() メソッドを呼び出す例を示します。この例では、zoomViewer がビューアインスタンス、s7viewer がプレースホルダー DIV の名前、http://s7d1.scene7.com/is/image/ は画像サービング URL、Scene7SharedAssets/ImageSet-Views-Sample はアセットであると想定しています。
<script type="text/javascript"> var zoomViewer = new s7viewers.ZoomViewer({ "containerId":"s7viewer", "params":{ "asset":"Scene7SharedAssets/ImageSet-Views-Sample", "serverurl":"http://s7d1.scene7.com/is/image/" } }).init(); </script>
次のコードは、ビデオビューアを固定サイズで埋め込む単純な web ページの完全な例です。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/ZoomViewer.js"></script> <style type="text/css"> #s7viewer.s7zoomviewer { width: 640px; height: 480px; } </style> </head> <body> <div id="s7viewer" style="position:relative"></div> <script type="text/javascript"> var zoomViewer = new s7viewers.ZoomViewer({ "containerId":"s7viewer", "params":{ "asset":"Scene7SharedAssets/ImageSet-Views-Sample", "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>

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

Web ページへのビューアJavaScript ファイルの追加
コンテナ DIV の定義。
ビューアの作成と初期化。

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

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/ZoomViewer.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 zoomViewer = new s7viewers.ZoomViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "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/ZoomViewer.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 zoomViewer = new s7viewers.ZoomViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

セッターベースの API を使用した埋め込み

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

次の例は、setter ベースの API を使用した固定サイズの埋め込みの使用を示しています。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/ZoomViewer.js"></script>
<style type="text/css">
#s7viewer.s7zoomviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var zoomViewer = new s7viewers.ZoomViewer();
zoomViewer.setContainerId("s7viewer");
zoomViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
zoomViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample");
zoomViewer.init();
</script>
</body>
</html>

recommendation-more-help