フライアウト

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

メモ

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

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

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

デモURL

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

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

フライアウトビューアは、メインのJavaScriptファイルと、ヘルパーファイルのセット(この特定のビューア、アセット、CSSで使用されるすべてのビューアSDKコンポーネントを含む単一のJavaScriptインクルード)です

フライアウトビューアは、埋め込みでの使用のみが想定されています。つまり、ドキュメントに記載されているAPIを使用してWebページに統合されます。 フライアウトビューアには、実稼動に対応したWebページはありません。

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

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

フライアウトビューアの操作

フライアウトビューアは、他のモバイルアプリケーションで一般的なシングルタッチとマルチタッチのジェスチャに対応しています。

ジェスチャ

説明

シングルタップ

フライアウトビューをアクティブにするか、プライマリズームレベルとセカンダリズームレベルを切り替えます。

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

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

垂直方向のスワイプ

スウォッチ領域内でこのジェスチャを実行すると、ネイティブページスクロールが実行されます。

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

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

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

フライアウトビューアの埋め込み

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

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

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

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

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

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

固定サイズ埋め込み

ビューアをWebページに追加するには、次の手順を実行します。

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

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

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

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

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

    ビューアを作成するには、HTMLのheadにscriptタグを追加する必要があります。 ビューアのAPIを使用するには、必ずFlyoutViewer.jsを含めてください。 FlyoutViewer.js は、標準のIS-Viewersデプロイ html5/js/ メントの次のサブフォルダーにあります。

<s7viewers_root>/html5/js/FlyoutViewer.js

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

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

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

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

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

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

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

    プレースホルダーDIVは配置を指定する要素で、CSSのpositionプロパティをrelativeまたはabsoluteに設定します。

    プレースホルダDIV要素に適切なz-indexを指定するのはWebページの責任です。 これにより、ビューアのフライアウト部分が、他のWebページ要素の上に表示されます。

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

    <div id="s7viewer" style="position:relative;z-index:1"></div> 
    
  2. ビューアのサイズを設定する。

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

    ビューアの外側の境界をそのまま残すには、最上位CSSクラス.s7flyoutviewerのサイズを絶対単位で定義します。 CSSのサイズ設定は、HTMLページやカスタムビューアのCSSファイルに適用できます。このCSSファイルは、後でDynamic Media Classicのビューアプリセットレコードに割り当てられるか、styleコマンドを使用して明示的に渡されます。

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

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

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

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

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/flyout/FlyoutViewer-fixed-outer-area.html?lang=ja?lang=ja

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

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

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

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

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/flyout/FlyoutViewer-fixed-main-view.html?lang=ja?lang=ja

    また、初期設定のビューアCSSでは、そのすぐに使用できる外側領域の固定サイズが提供されています。

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

    上記の手順を完了したら、s7viewers.FlyoutViewerクラスのインスタンスを作成し、すべての設定情報をコンストラクターに渡して、ビューアインスタンスでinit()メソッドを呼び出します。 設定情報は、JSONオブジェクトとしてコンストラクターに渡されます。 最低でも、このオブジェクトにはcontainerIdフィールドが必要です。このフィールドには、ビューアのコンテナIDの名前と、ビューアがサポートする設定パラメーターを含むネストされた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はアセットです。

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

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

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

レスポンシブデザイン埋め込みでは、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の固定サイズを、相対単位で設定されたサイズで上書きする必要がある点です。

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

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

  • コンテナDIVを既存の"holder" 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>

以下のサンプルページでは、高さ無制限のレスポンシブデザイン埋め込みの、より実用的な使用例を示します。

ライブデモ

代替のデモの場所

幅と高さが定義されたフレキシブルサイズ埋め込み

幅と高さが定義されたフレキシブルサイズ埋め込みの場合、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>

セッターベースの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/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>

このページ