Spin spin

最終更新日： 2025年10月3日

トピック：
{"id":"a01bfd36-4ab8-4bf8-9dc0-5b45b890552e"}

作成対象：

{"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

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

NOTE

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

ビューアータイプ 503。

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

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://landing.adobe.com/en/na/dynamic-media/ctir-2755/live-demos.html

Spin Viewerの使用 section-e6c68406ecdc4de781df182bbd8088b4

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

Spin Viewerは、IS-Viewersを備えた実稼動対応のHTML ページを使用するポップアップモードと、文書化されたAPIを使用してターゲット web ページに統合する埋め込みモードの両方で使用できます。

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

すべてのビューアに共通するコマンド参照 – 構成属性およびすべてのビューアに共通するコマンド参照 – URLを参照してください

Spin Viewerの操作 section-642e66ca38cd4032992840ec6c0b0cd2

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

ジェスチャ

説明

ダブルタップ

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

ピンチ

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

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

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

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

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

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

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

NOTE

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

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

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

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

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

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

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

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

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

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

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

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

固定サイズ埋め込み

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

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

ビューアのJavaScript ファイルをweb ページに追加します。

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

<s7viewers_root>/html5/js/SpinViewer.js

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

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

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

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

コンテナ DIVの定義。

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

プレースホルダーDIVは配置された要素です。position CSS プロパティがrelativeまたはabsoluteに設定されていることを意味します。

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

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

ビューアサイズの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

次のコードは、Spin Viewerを固定サイズで埋め込む面倒なweb ページの完全な例です。

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>

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

レスポンシブデザインの埋め込みでは、通常、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を既存の「ホルダー」 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

dynamic-media-developer-resources-help-aem-viewers-ref