基本ズーム

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

メモ

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

ビューアタイプ501

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

デモURL

https://s7d9.scene7.com/s7viewers/html5/BasicZoomViewer.html?asset=Scene7SharedAssets/Backpack_B

基本ズームビューアの使用

基本ズームビューアは、メインのJavaScriptファイルと、ビューアによって実行時にダウンロードされるヘルパーファイルのセット（この特定のビューア、アセット、CSSで使用されるすべてのビューアSDKコンポーネントを含む単一のJavaScriptインクルード）です。

基本ズームビューアは、ISビューアに付属する実稼動用のHTMLページを使用するか、埋め込みモードで使用して、ドキュメントに記述されたAPIを使用してターゲットWebページに統合し、ポップアップモードで使用できます。

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

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

基本ズームビューアの操作

基本ズームビューアは、他のモバイルアプリケーションで一般的な以下のタッチジェスチャに対応しています。

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

ジェスチャ	説明
シングルタップ	ユーザーインターフェイス要素を表示または非表示にします。
ダブルタップ	最大の拡大率に達するまで、1レベルズームインします。次のダブルタップジェスチャを実行すると、ビューアが初期の表示状態にリセットされます。
ピンチ	ズームインまたはズームアウトします。
スワイプ	画像がリセット状態の場合にこのジェスチャを行うと、ネイティブページスクロールが実行されます。画像がズームインされると、画像が移動します。画像を表示の端まで移動し、その方向でスワイプを実行すると、ネイティブページスクロールが実行されます。

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

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

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

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

ビューアの動作に対するニーズは、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ページ、また、デバイスの種類に応じてレイアウトを自動的に調整するレスポンシブデザインページです。

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

レスポンシブデザイン埋め込みは、コンテナDIVのサイズ変更に対応して実行時にビューアのサイズを変更する可能性がある場合を想定しています。最も一般的な使用例は、柔軟なページレイアウトを使用するWebページにビューアを追加する場合です。

レスポンシブデザイン埋め込みモードでは、WebページによるコンテナDIVのサイズ変更の方法によって、ビューアの動作が異なります。 WebページでコンテナDIVの幅のみが設定され、高さは無制限のままの場合、ビューアでは、使用するアセットの縦横比に従って高さが自動的に選択されます。この機能により、側面のパディングなしで、アセットが表示にぴったりと収まります。この使用例は、Bootstrap、FoundationなどのレスポンシブWebデザインレイアウトフレームワークを使用するWebページで最も一般的です。

それ以外の場合は、WebページでビューアのコンテナDIVの幅と高さの両方が設定されている場合、ビューアはその領域を占め、Webページのレイアウトで指定されているサイズに従います。良い例として、ビューアをモーダルオーバーレイに埋め込み、オーバーレイがWebブラウザーのウィンドウサイズに従ってサイズ設定される場合があります。

固定サイズ埋め込み

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

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

ビューアを作成するには、HTMLのheadにscriptタグを追加する必要があります。ビューアのAPIを使用するには、必ずBasicZoomViewer.jsを含めてください。 BasicZoomViewer.jsファイルは、次に示すように、IS-Viewersの標準のデプロイ先のhtml5/js/サブフォルダーにあります。

<s7viewers_root>/html5/js/BasicZoomViewer.js

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

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

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

メモ

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

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

コンテナDIVを定義する。

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

プレースホルダーDIVは配置を指定する要素で、CSSのpositionプロパティをrelativeまたはabsoluteに設定します。

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

ビューアの静的サイズを設定するには、.s7basiczoomviewer最上位CSSクラスに対して絶対単位で宣言するか、stagesize修飾子を使用します。

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

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

以下は、HTMLページで静的ビューアサイズを定義する例です。
```
#s7viewer.s7basiczoomviewer { 
 width: 640px; 
 height: 480px; 
}
```
stagesize修飾子は、Dynamic Media Classicのビューアプリセットレコードで設定することも、paramsコレクションを使用してビューア初期化コードで明示的に渡すことも、次のように、コマンドリファレンスの節で説明するAPI呼び出しで渡すこともできます。
```
basicZoomViewer.setParam("stagesize", "640,480");
```
CSSベースのアプローチを推奨し、この例で使用します。
ビューアを作成し、初期化する。

上記の手順を完了したら、s7viewers.BasicZoomViewerクラスのインスタンスを作成し、すべての設定情報をコンストラクターに渡して、ビューアインスタンスでinit()メソッドを呼び出します。設定情報は、JSONオブジェクトとしてコンストラクターに渡されます。最低でも、このオブジェクトにはcontainerIdフィールドが存在し、ビューアの名前container IDと、ビューアでサポートされている設定パラメーターを持つネストされたparams JSONオブジェクトが含まれている必要があります。この場合、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はアセットです。
```
<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ページの例です。
```
<!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>

セッターベースの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>