Spin spin

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

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

NOTE

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

ビューアのタイプは 503 です。

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

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

スピンビューアの使用 section-e6c68406ecdc4de781df182bbd8088b4

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

スピンビューアは、IS-Viewers に付属の実稼動用HTMLーページを使用したポップアップモードと、ドキュメント化された API を使用して対象の web ページに統合する埋め込みモードの両方で使用できます。

設定とスキニングは、他のビューアと同様です。すべてのスキニングは、カスタム CSS を使用して行うことができます。

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

スピンビューアの操作 section-642e66ca38cd4032992840ec6c0b0cd2

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

ジェスチャ

説明

ダブルタップ

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

ピンチ

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

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

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

画像がズームインされると、画像は水平方向に移動します。画像がビューの端に移動されても、その方向にスワイプが行われる場合、ジェスチャーはネイティブページのスクロールを実行します。

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

画像がリセット状態の場合、多次元スピンセットを使用すると垂直視野角が変更されます。 1 次元スピンセットでは、ジェスチャーはネイティブページのスクロールを実行します。または、多次元スピンセットが最後の軸または最初の軸にあり、垂直スワイプによって垂直ビューの角度が変更されないようにする場合、このジェスチャはネイティブページのスクロールも実行します。

画像がズームインされると、画像が垂直方向に移動します。画像がビューの端に移動されても、その方向にスワイプが行われる場合、ジェスチャーはネイティブページのスクロールを実行します。

NOTE

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

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

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

スピンビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

Web ページによって、ビューアの動作に対するニーズは異なります。選択するとビューアが別のブラウザーウィンドウで開くリンクが、web ページに表示される場合があります。それ以外の場合は、ホスティングページにビューアを直接埋め込む必要があります。後者の場合、web ページが静的なページレイアウトになっている可能性や、異なるデバイスや異なるブラウザーウィンドウサイズに異なる表示を行うレスポンシブデザインが使用されている可能性があります。これらのニーズに対応するために、ビューアでは 3 つの主要な操作モード（ポップアップ、固定サイズの埋め込み、レスポンシブデザインの埋め込み）をサポートしています。

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

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

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

標準提供のHTMLページをポップアップ表示に使用することをお勧めします。この場合、SpinViewer.html という名前で、標準の IS-Viewers デプロイメントの html5/ サブフォルダー内に配置されます。

<s7viewers_root>/html5/SpinViewer.html

カスタム CSS を適用すると、視覚的にカスタマイズできます。

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

<a href="https://s7d1.scene7.com/s7viewers/html5/SpinViewer.html?asset=Scene7SharedAssets/SpinSet_Sample&stagesize=500,400"
target="_blank">Open popup viewer</a>

固定サイズ埋め込みモードとレスポンシブデザイン埋め込みモードについて

埋め込みモードでは、ビューアが既存の web ページに追加されます。これには、ビューアに関連しない顧客コンテンツが既に含まれている場合があります。閲覧者は通常、Web ページの不動産の一部のみを占有します。

主なユースケースは、デスクトップやタブレットデバイス向けの web ページと、デバイスタイプに応じて自動的にレイアウトを調整するレスポンシブデザインページです。

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

レスポンシブデザインの埋め込みは、コンテナコンポー DIV ントのサイズ変更に応じて、実行時にビューアのサイズを変更する必要があることを前提としています。最も一般的なユースケースは、柔軟なページレイアウトを使用する web ページにビューアを追加する場合です。

レスポンシブデザインの埋め込みモードでは、web ページのコンテナコンポー DIV ントのサイズがどのように調整されるかに応じて、ビューアの動作が異なります。 Web ページでコンテナ DIV の幅のみが設定され、高さが制限されない場合、ビューアは、使用されるアセットの縦横比に応じて自動的に高さを選択します。この機能により、アセットが側面にパディングを入れずに、ビューに完全に収まります。このユースケースは、Bootstrapや基盤などのレスポンシブデザインレイアウトフレームワークを使用する web ページで最も一般的です。

そうでない場合、web ページでビューアのコンテナ DIV の幅と高さの両方が設定されていると、ビューアはその領域だけを埋め、web ページレイアウトが提供するサイズに従います。良い例としては、ビューアをモーダルオーバーレイに埋め込む場合があります。この場合、オーバーレイは web ブラウザーのウィンドウサイズに応じてサイズが調整されます。

固定サイズ埋め込み

Web ページにスピンビューアを追加するには、次の操作を行います。

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

Web ページへのビューアJavaScript ファイルの追加

ビューアを作成するには、HTMLの先頭にスクリプトタグを付ける必要があります。ビューア API を使用する前に、必ず SpinViewer.js を含めてください。 SpinViewer.js れは、標準の IS-Viewers デプロイメントの html5/js/ サブフォルダーにあります。

<s7viewers_root>/html5/js/SpinViewer.js

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

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

code language-html
`<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/SpinViewer.js"></script>`

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

コンテナ DIV の定義。

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

プレースホルダー DIV が配置済み要素です（つまり、position CSS プロパティが relative または absolute に設定されています）。

定義されたプレースホルダー DIV 要素の例を以下に示します。

code language-html
`<div id="s7viewer" style="position:relative"></div>`

ビューアサイズの設定

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

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

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

HTMLページで静的ビューアのサイズを定義する例を以下に示します。

code language-html
`#s7viewer.s7spinviewer { width: 640px; height: 480px; }`

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

code language-html
`spinViewer.setParam("stagesize", "640,480");`

この例では、CSS ベースのアプローチをお勧めします。

ビューアの作成と初期化。

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

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

同時に、コンテナ要素は、まだ web ページレイアウトの一部である必要はありません。例えば、割り当てられた display:none スタイルを使用して非表示にすることができます。この場合、ビューアは、web ページがコンテナ要素をレイアウトに戻す瞬間まで、初期化プロセスを遅延します。このアクションが発生すると、ビューアの読み込みが自動的に再開されます。

以下に、ビューアインスタンスを作成し、必要な最小限の設定オプションをコンストラクターに渡して、init() メソッドを呼び出す例を示します。この例では、spinViewer がビューアインスタンス、s7viewer がプレースホルダー DIV の名前、http://s7d1.scene7.com/is/image/ が画像サービング URL、Scene7SharedAssets/SpinSet_Sample がアセットであることを前提としています。

code language-html

code language-html
`<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>`

<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 ページの完全な例です。

code language-html

code language-html
<!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>

<!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>

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

Web ページへのビューアJavaScript ファイルの追加
コンテナ DIV の定義。
ビューアの作成と初期化。

上記の手順はすべて、固定サイズの埋め込みと同じです。コンテナ DIV を既存の「holder」 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 ページのスタイル設定は異なります。つまり、「ホルダー」 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>

Setter ベースの API を使用した埋め込み

JSON ベースの初期化を使用する代わりに、設定ベースの API および no-args コンストラクターを使用することができます。この API コンストラクターはパラメーターを取らず、setContainerId()、setParam()、setAsset() の API メソッドを使用して、個別のJavaScript呼び出しで設定パラメーターを指定します。

次の例は、setter ベースの 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>

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8