ズーム

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

メモ

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

ビューアタイプ502

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

デモURL

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

ズームビューアの使用

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

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

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

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

ズームビューアの操作

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

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

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

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

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

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

ビューアの動作に対するニーズは、Webページごとに異なります。 Webページにリンクが表示され、このリンクをクリックすると別のブラウザーウィンドウでビューアが開く場合があります。ホスティングページに直接ビューアを埋め込む必要がある場合もあります。後者の場合は、Webページが静的レイアウトである場合や、デバイスごと、ブラウザーウィンドウのサイズごとに表示方法が変わるレスポンシブデザインを使用する場合があります。これらのニーズに対応するために、ビューアでは次の3つの主要な操作モードがサポートされています。ポップアップ、固定サイズ埋め込み、レスポンシブデザイン埋め込み。

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

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

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

ポップアップ操作モードには、標準搭載された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、Foundationなどのレスポンシブレイアウトフレームワークを使用するWebページで最も一般的です。

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

固定サイズ埋め込み

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

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

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

<s7viewers_root>/html5/js/ZoomViewer.js

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

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

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/ZoomViewer.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のpositionプロパティをrelativeまたはabsoluteに設定します。

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

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

ビューアの外側の境界をそのまま残すには、最上位CSSクラス.s7zoomviewerのサイズを絶対単位で定義します。 CSSのサイズ設定は、HTMLページまたはカスタムビューアのCSSファイルに適用できます。この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?lang=ja

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

次の例では、アセットを切り替えてもメインビュー領域のサイズが変わらないように、内部の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?lang=ja

stagesize修飾子は、Dynamic Media Classicのビューアプリセットレコードで設定することも、次に示すように、 paramsコレクションを使用してビューア初期化コードを明示的に、またはこのヘルプの「コマンドリファレンス」の節で説明するAPI呼び出しで渡すこともできます。
```
 zoomViewer.setParam("stagesize", 
"640,480");
```
CSSベースのアプローチを推奨し、この例で使用します。
ビューアを作成し、初期化する。

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

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

ビューアのコードがIDでコンテナ要素を見つけられるように、ビューアのコンテナをDOMに追加することが重要です。一部のブラウザーは、Webページの終わりまでDOMの構築を遅らせます。互換性を最大にするには、 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>

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

ビューアのJavaScriptファイルをWebページに追加する。
コンテナ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ベースの初期化を使用する代わりに、セッターベースの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/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>

adobe.com 上のリソース

Content Intelligence Mobile Forms Version History Web Content Management Dynamic Forms Digital Rights Management

ズーム

デモURL

ズームビューアの使用

ズームビューアの操作

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

固定サイズ埋め込み

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

幅と高さが定義されたフレキシブルサイズ埋め込み

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

adobe.com 上のリソース

このページ

次を表示：

トレーニング

ドキュメント

コミュニティ

サポート

リソース

アドビアカウント

Adobe