スピン

スピンビューアは、360°の画像を提供する表示ビューアです。または、適切なスピンセットが使用されている場合は、多次元の表示を提供します。 このビューアには、ズームツール、スピンツール、フルスクリーンのサポート、およびオプションの閉じるボタンがあります。 デスクトップおよびモバイルデバイスで動作するように設計されています。

メモ

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

ビューアタイプ503

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

デモURL

https://s7d9.scene7.com/s7viewers/html5/SpinViewer.html?asset=Scene7SharedAssets/SpinSet_Sample&stagesize=500,400

スピンビューアの使用

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

スピンビューアは、ISビューアに付属の運用に対応しているHTMLページを使用するポップアップモードでも、ドキュメントに記述のあるAPIを使用してターゲットのWebページに統合される埋め込みモードでも、両方で使用できます。

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

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

スピンビューアの操作

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

ジェスチャ

説明

重複タップ

最大の倍率に達するまで、1レベルズームインします。 次の重複タップジェスチャを行うと、ビューアが初期の表示状態にリセットされます。

ピンチ

画像をズームインまたはズームアウトします。

水平スワイプまたはフリック

画像がリセット状態の場合、セットを水平方向にスピンします。

画像がズームインされると、画像は水平方向に移動されます。 画像を表示の端まで移動して、その方向で引き続きスワイプを実行すると、ネイティブページスクロールが実行されます。

垂直方向のスワイプまたはフリック

多次元のスピンセットが使用されている場合、画像がリセット状態のときに垂直方向の表示角度を変更します。 1次元スピンセットの場合、または多次元スピンセットが最後または最初の軸にある場合に、垂直方向のスワイプによって垂直方向の表示角度が変わらないように、ネイティブページスクロールが実行されます。

画像がズームインされると、画像は垂直方向に移動されます。 画像を表示の端まで移動して、その方向で引き続きスワイプを実行すると、ネイティブページスクロールが実行されます。

メモ

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

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

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

スピンビューアの埋め込み

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

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

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

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

ポップアップ操作モードには、標準搭載されたHTMLページを使用することをお勧めします。 この場合、このページはSpinViewer.htmlという名前で、標準のIS-Viewersデプロイメントのhtml5/サブフォルダー内にあります。

<s7viewers_root>/html5/SpinViewer.html

カスタムCSSを適用すると、視覚的なカスタマイズを行うことができます。

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

<a 
href="http://s7d1.scene7.com/s7viewers/html5/SpinViewer.html?asset=Scene7SharedAssets/SpinSet_Sample&stagesize=500,400" 
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を使用する前に、SpinViewer.jsを必ず含めてください。 SpinViewer.js は、次に示すように、ISビューアの標準のデプロイ先の html5/js/ サブフォルダーにあります。

    <s7viewers_root>/html5/js/SpinViewer.js

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

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

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

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

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

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

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

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

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

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

  7. ビューアのサイズの設定

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

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

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

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

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

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

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

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

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

    上記の手順を完了したら、s7viewers.SpinViewerクラスのインスタンスを作成し、すべての設定情報をコンストラクターに渡して、ビューアインスタンスで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()メソッドを呼び出します。 この例では、spinViewerをビューアインスタンス、s7viewerをプレースホルダーDIVの名前、http://s7d1.scene7.com/is/image/を画像サービングURL、Scene7SharedAssets/SpinSet_Sampleをアセットと仮定しています。

    <script type="text/javascript"> 
var spinViewer = new s7viewers.SpinViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/SpinSet_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/SpinViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7spinviewer { 
 width: 640px; 
 height: 480px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative"></div> 
<script type="text/javascript"> 
var spinViewer = new s7viewers.SpinViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/SpinSet_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. ビューアを作成し、初期化する。

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

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SpinViewer.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 spinViewer = new s7viewers.SpinViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/SpinSet_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/SpinViewer.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 spinViewer = new s7viewers.SpinViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/SpinSet_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/SpinViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7spinviewer { 
 width: 640px; 
 height: 480px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative"></div> 
<script type="text/javascript"> 
var spinViewer = new s7viewers.SpinViewer(); 
spinViewer.setContainerId("s7viewer"); 
spinViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/"); 
spinViewer.setAsset("Scene7SharedAssets/SpinSet_Sample"); 
spinViewer.init(); 
</script> 
</body> 
</html>

このページ