ズーム

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

メモ

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

ビューアタイプ502

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

デモURL

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

ズームビューアの使用

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

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

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

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

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

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

固定サイズ埋め込み

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

  1. ビューアのJavaScriptファイルをWebページに追加する。

  2. コンテナDIVを定義する。

  3. ビューアのサイズを設定する。

  4. ビューアを作成し、初期化する。

  5. ビューアのJavaScriptファイルをWebページに追加する。

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

<s7viewers_root>/html5/js/ZoomViewer.js

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

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

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

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

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

  1. コンテナDIVを定義する。

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

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

    プレースホルダDIV要素の定義例を次に示します。

    <div id="s7viewer" style="position:relative"></div>

  2. ビューアのサイズを設定する。

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

    ビューアの外側の境界をそのまま残すには、.s7zoomviewer最上位CSSクラスのサイズを絶対単位で定義します。 CSS内のサイズ調整は、HTMLページまたはカスタムビューアのCSSファイルに配置できます。このCSSファイルは、後でScene7パブリッシングシステムでビューアプリセットレコードに割り当てるか、styleコマンドを使用して明示的に渡します。

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

    以下は、HTMLページでビューアの外側の静的なサイズを定義する例です。

    #s7viewer.s7zoomviewer { 
 width: 640px; 
 height: 480px; 
}

    次の例では、ビューアの外側のサイズを固定した場合の動作を確認できます。 セットを切り替えても、ビューアの外側のサイズは変わりません。

    https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/ZoomViewer-fixed-outer-area.html

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

    次の例では、アセットを切り替えてもメイン表示領域のサイズが変更されないように、内部のContainer SDKコンポーネントのビューアサイズを定義します。

    #s7viewer.s7zoomviewer .s7container { 
 width: 640px; 
 height: 480px; 
}

    次のデモページは、メイン表示のサイズを固定した場合のビューアの動作を示しています。 セットを切り替えてもメイン表示は静的なままで、Webページのコンテンツは垂直方向に移動します。

    https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/ZoomViewer-fixed-main-view.html

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

     zoomViewer.setParam("stagesize", 
"640,480");

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

  3. ビューアを作成し、初期化する。

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

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

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

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

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

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

上記の手順はすべて、固定サイズ埋め込みの場合と同じです。 コンテナ追加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>

このページ