基本ズーム

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

メモ

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

ビューアタイプ501

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

デモURL

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

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

基本ズームビューアは、メインのJavaScriptファイルと、ビューアによって実行時にダウンロードされるヘルパーファイルのセット（このビューアで使用されるすべてのViewer SDKコンポーネントを含む1つの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ページ、また、デバイスの種類に従ってレイアウトを自動調整するレスポンシブデザインページです。

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

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

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

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

固定サイズ埋め込み

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

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

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

<s7viewers_root>/html5/js/BasicZoomViewer.js

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

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

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

メモ

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

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

コンテナDIVを定義する。

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

プレースホルダDIVは位置固定要素です。つまり、position CSSプロパティはrelativeまたはabsoluteに設定されます。

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

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

サイズ調整は、CSS内で直接HTMLページまたはカスタムビューアのCSSファイルに配置できます。このCSSファイルは、後でSPSでビューアプリセットレコードに割り当てるか、styleコマンドを使用して明示的に渡します。

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

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

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

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

同時に、コンテナ要素がまだ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>

adobe.com 上のリソース

Style System Cms Cloud Targeted Content Customer Communications Dynamic Forms Headless Cms

このページ

次を表示：

プライバシー（更新済み）

利用規約