最終更新日： 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"}

フライアウトビューアは画像ビューアです。ユーザーがアクティベートするフライアウトビューに表示されるズームされたバージョンを含む静止画像が表示されます。このビューアは画像セットで機能し、ナビゲーションはスウォッチを使用して行われます。デスクトップやモバイルデバイスで動作するように設計されています。

NOTE

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

ビューアータイプは504です。

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

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

フライアウトビューアの使用 section-f21ac23d3f6449ad9765588d69584772

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

Flyout Viewerは埋め込み使用のみを目的としているため、文書化されたAPIを使用してweb ページに統合されます。フライアウトビューアで使用できる実稼動対応のweb ページはありません。

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

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

Flyout Viewerは、他のモバイルアプリケーションで一般的なシングルタッチおよびマルチタッチジェスチャーをサポートしています。

ジェスチャ

説明

シングルタップ

プライマリとセカンダリのズームレベル間のフライアウトビューまたは変更をアクティブにします。

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

スウォッチバーのスウォッチのリストをスクロールします。

縦方向スワイプ

ジェスチャーがスウォッチ領域内で行われた場合、ネイティブページスクロールが実行されます。

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

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

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

フライアウトビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

web ページごとに、閲覧者の行動に対するニーズは異なります。 Web ページには、静的なページレイアウトがある場合や、異なるデバイスで異なる表示を行うレスポンシブデザインを使用する場合、または異なるブラウザーウィンドウのサイズを使用する場合があります。これらのニーズに対応するために、ビューアでは、固定サイズの埋め込みとレスポンシブデザインの埋め込みという2つの主要な操作モードをサポートしています。

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

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

フライアウトビューアでレスポンシブデザイン埋め込みモードを使用する場合は、imagereload パラメーターを使用して、メインビュー画像に明示的なブレークポイントを指定してください。理想的には、Web ページ CSSで指定されているビューアの幅のブレークポイントとブレークポイントを一致させます。

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

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

固定サイズ埋め込み

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

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

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

<s7viewers_root>/html5/js/FlyoutViewer.js

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

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

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/FlyoutViewer.js"></script>

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要素に適切なz-indexを指定するのは、web ページの責任です。これにより、ビューアのフライアウト部分が他のweb ページ要素の上に表示されます。

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

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

ビューアサイズの設定。

このビューアは、複数の項目セットを操作する際にサムネールを表示します。デスクトップシステムでは、サムネールはメインビューの下に配置されます。同時に、ビューアでは、setAsset() APIを使用して、ランタイム中にメインアセットを入れ替えることができます。開発者は、新しいアセットが1つのアイテムしか持たない場合に、ビューアが下部エリアのサムネール領域をどのように管理するかを制御できます。外のビューアのサイズを維持し、メインビューの高さを上げてサムネール領域を占有させることができます。または、メインビューサイズを静的にして外側のビューア領域を折りたたみ、web ページのコンテンツを上に移動させ、サムネールから残った無料ページの不動産を使用することもできます。

外部ビューアの境界を維持するには、.s7flyoutviewer トップレベル CSS クラスのサイズを絶対単位で定義します。 CSSでのサイズ変更は、HTML ページに配置するか、カスタムビューア CSS ファイルに配置し、後でDynamic Media Classicのビューアプリセットレコードに割り当てるか、スタイルコマンドを使用して明示的に渡すことができます。

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

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

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

メインビューのディメンションを静的にするには、.s7flyoutviewer .s7container CSS セレクターを使用して、内部Container SDK コンポーネントのビューアーサイズを絶対単位で定義します。さらに、デフォルトのビューア CSSの.s7flyoutviewerの最上位CSS クラスに定義されている固定サイズをautoに設定して上書きする必要があります。

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

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

また、デフォルトのビューア CSSでは、標準装備の外部領域の固定サイズが提供されます。

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

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

code language-html


<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>

次のコードは、フライアウトビューアを固定サイズで埋め込む面倒なweb ページの完全な例です。

code language-html


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
#s7viewer.s7flyoutviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;z-index:1;"></div>
<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

無制限の高さを持つレスポンシブデザイン埋め込み section-056cb574713c4d07be6d07cf3c598839

レスポンシブデザインの埋め込みでは、通常、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>

このようなページにビューアを追加することは、固定サイズ埋め込みの手順と似ています。唯一の違いは、デフォルトのビューア CSSの固定サイズを、相対単位で設定したサイズで上書きする必要があることです。

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

上記のすべての手順は、次の3つの例外を除いて、固定サイズの埋め込みと同じです。

コンテナ DIVを既存の「所有者」 DIVに追加します。
明示的なブレークポイントを含むimagereload パラメーターを追加しました。
絶対単位を使用して固定のビューアサイズを設定する代わりに、次のようにビューアの幅と高さを100%に設定するCSSを使用します。

#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}

次のコードは、完全な例です。ブラウザーのサイズを変更するとビューアのサイズが変わり、ビューアの縦横比がアセットとどのように一致するかを確認します。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).init();
</script>
</body>
</html>

次のサンプルページでは、高さの制限のないレスポンシブデザイン埋め込みをより実際に使用する方法を示します。

ライブデモ

幅と高さが定義された柔軟なサイズ埋め込み section-0a329016f9414d199039776645c693de

幅と高さが定義された柔軟なサイズの埋め込みがある場合、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/FlyoutViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).init();
</script>
</body>
</html>

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

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/FlyoutViewer.js"></script>
<style type="text/css">
#s7viewer.s7flyoutviewer {
 width: 640px;
 height: 480px;
}
</style>
</head><body>
<div id="s7viewer" style="position:relative;z-index:1;"></div>
<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer();
flyoutViewer.setContainerId("s7viewer");
flyoutViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
flyoutViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample");
flyoutViewer.init();
</script>
</body>
</html>

recommendation-more-help

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

フライアウト flyout