フライアウト

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

メモ

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

ビューアタイプ504

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

デモURL

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

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

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

フライアウトビューアは、埋め込みでの使用のみが想定されています。つまり、ドキュメントに記述のある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にスクリプトタグを追加する必要があります。 ビューアのAPIを使用するには、FlyoutViewer.jsを必ず含めます。 FlyoutViewer.js は、標準のIS-Viewersデプロイメントの次の html5/js/ サブフォルダーにあります。

<s7viewers_root>/html5/js/FlyoutViewer.js

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

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

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

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

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

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

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

    プレースホルダDIVは位置固定要素です。つまり、position CSSプロパティは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ファイルは、後でScene7パブリッシングシステムでビューアプリセットレコードに割り当てるか、styleコマンドを使用して明示的に渡します。

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

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

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

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

    https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/FlyoutViewer-fixed-outer-area.html

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

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

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

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

    https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/FlyoutViewer-fixed-main-view.html

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

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

    上記の手順を完了したら、s7viewers.FlyoutViewerクラスのインスタンスを作成し、すべての設定情報をコンストラクターに渡して、ビューアインスタンスで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()メソッドを呼び出します。 この例では、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>

このページ