ビューアプリセット

ビューアプリセットは、ユーザのコンピュータ画面および携帯端末上でリッチメディアアセットがどのように表示されるかを決定する設定です。管理者は、ビューアプリセットを作成できます。一連のビューア構成オプション用の設定があります。例えば、ビューアの表示サイズ、ズーム動作、カラースキーム、境界線およびフォントを変更できます。

ベストプラクティスとして、Scene7 HTML5 ビデオビューアを使用します。HTML5 ビデオビューアで使用されるプリセットは堅牢なビデオプレーヤーです。HTML5 と CSS を使用した再生コンポーネントの設計、再生の埋め込み、およびブラウザーの機能に基づくアダプティブストリーミングおよびプログレッシブストリーミングの使用ができる機能を単一のプレーヤーに統合することで、リッチメディアコンテンツをデスクトップ、タブレットおよびモバイルのユーザーに提供し、ビデオ配信の効率化を確実に行うことができます。

詳しくは、『Adobe Scene7 ビューアリファレンスガイド』の HTML5 ビューアについてを参照してください。

詳しくは、Scene7 ビューアプリセット互換表を参照してください。

詳しくは、ベストプラクティス:HTML5 ビデオビューアの使用を参照してください。

ビューアによっては、コミュニティ機能を追加できます。コミュニティ機能には、埋め込みボタン、電子メールボタン、リンクボタンおよびアクセスボタンがあります。このボタンを使用することで、ビューアを使用するユーザが他者とビューアを共有したり、Scene7 Web サイトを開いたりすることができます。

Scene7 ビューアリファレンスライブラリの例も参照してください。

レスポンシブデザインの Web ページ用ビューアのサポート

Web ページごとに異なるニーズがあります。HTML5 ビューアを個別のブラウザーウィンドウで開くリンクを表示した Web ページが必要なときもあります。また、ホスティングページに直接 HTML5 ビューアを埋め込む必要がある場合もあります。後者の場合、その Web ページは静的なレイアウトになる場合もあれば、「レスポンシブ」に処理して、デバイスごと、あるいはブラウザーウィンドウのサイズごとに異なる表示にする場合もあります。これらのニーズに対応するために、Scene7 に付属する HTML5 ビューアは静的な Web ページとレスポンシブデザインの Web ページの両方をサポートします。

Web ページにレスポンシブビューアを埋め込む方法について詳しくは、Scene7 Image Serving API ヘルプのレスポンシブな静的画像ライブラリを参照してください。

ビューアプリセットのタイプ

管理者は、次のタイプのビューアプリセットを作成およびカスタマイズできます。

eCatalog ビューア
印刷されたカタログと同じ感覚でカタログを見ることができます。ページ間の移動や、ページ上のアイテムのズームインまたはズームアウトが可能です。また、画像マップを使用して、ページ上のアイテムに関する詳細を表示できます。詳細情報を表示する情報パネルを含めたり、また画像マップ領域に有効な rollover_key 属性がある場合は画像マップ項目を含めたりすることもできます。情報パネルを含めるには、eCatalog ビューアプリセットウィンドウの情報パネルの設定パネルで、情報サーバの URL を指定します。

スウォッチセットビューア
様々な色、素材、テクスチャ、仕上げまたは布地で画像を表示できます。サムネールをクリックすると、画像のバリエーションが表示されます。

混在メディアセットビューア
異なるタイプのメディアを 1 つのビューアに表示します。スウォッチセット、スピンセット、画像およびビデオを含めることができます。異なるタイプのコンテンツを含むタブ、例えば、画像セットのタブとビデオのタブを設定できます。混在メディアセットで再生するビデオには、タイムラインとビデオコントロール(停止、一時停止、巻き戻し、再生など)がある標準のビデオビューアが使用されます。混在メディアセットビューアのプリセットを設定するときに、混在メディアセット内の各アセットタイプに使用するビューアを指定します。グリッドビューアまたはカルーセルビューアを使用して混在メディアセットを表示することもできます。

スピンセットビューア
画像の複数の表示を提供し、ユーザがアイテムを回転させ、異なる方向や角度から見られるようにします。

ビデオビューア
ソースファイルの解像度またはカスタムサイズを使用して、ビデオを表示します。Scene7 には、ビデオ再生用の定義済みビューアプリセットが多数あります。管理者は、カスタムビデオビューアプリセットを作成できます。ビデオビューア設定のための 10 種類以上の設定が用意されています。サイズ、前景色と背景色、ビデオおよびオーディオコントロール、プログレスバー、ユーザーインターフェイススキン、ソーシャル機能、ヘルプ機能を設定できます。

再編集ビデオビューア
再編集ビデオを作成するための、サンプルオーディオ、背景色、枠線、キャプション、エフェクト、グラフィック、トランジション、ビデオを提供します。このコンテンツは再編集ビデオ画面のサンプルの eVideo コンテンツパネルに表示されます。

ズームビューア
次の 3 タイプのズームビューアから選択できます。
ズームビューア
ユーザが領域をクリックすることでその領域にズームインできます。コントロールをクリックして、ズームイン、ズームアウト、画像の初期設定サイズへのリセットが可能です。

ズームビューア:フライアウト
ズームされた領域の画像を元の画像の横に表示します。使用できるコントロールはなく、ユーザは表示する範囲の選択だけが可能です。

このビューアの完全な帯域幅使用量を決定する場合、メイン画像とフライアウト画像の両方がビューアに提供されます。メイン画像のサイズ(ステージの幅と高さ)とズーム率によって、フライアウト画像のサイズが決まります。フライアウト画像のサイズを大きくなり過ぎないようにするには、メイン画像のサイズとズーム率の値のバランスを保ってください。大きいサイズのメイン画像を使用する場合は、ズーム率の値を小さくします(フライアウト幅とフライアウト高さは、フライアウトウィンドウのサイズを決定しますが、ビューアに供給されるフライアウト画像のサイズは決定しません)。

例えば、350 x 350 pixel、ズーム率 3 のメイン画像の場合、表示されるフライアウト画像は 1050 x 1050 pixel になります。300 x 300 pixel、ズーム率 4 のメイン画像の場合、表示されるフライアウト画像は 1200 x 1200 pixel になります。JPEG の画質設定(推奨される設定は 80 ~ 90 です)に応じて、ファイルのサイズを大幅に小さくすることができます。メイン画像のサイズによりますが、推奨されるズーム率は 2.5 ~ 4 です。

Scene7 ビューアプリセット互換表

次の表は、現時点で使用できる Scene7 ビューアプリセットをまとめたものです。この表には、ビューアのデスクトップまたは携帯端末との互換性と、各ビューアで使用されるテクノロジも示されます。

Scene7 ビューアリファレンスライブラリの例も参照してください。

ビューアでサポートされる Web ブラウザーとオペレーティングシステムのバージョンについて詳しくは、ビューアのリリースノートに記載されています。

詳しくは、Scene7 ビューアリファレンスリリースノートを参照してください。

 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

ズームビューア

Universal_HTML5_Flyout

HTML5

X

X

X

X

X

Universal_HTML5_Zoom_inline

HTML5

X

X

X

X

X

Universal_HTML5_Zoom_dark

HTML5

X

X

X

X

X

Universal_HTML5_Zoom_light

HTML5

X

X

X

X

X

FlyoutZoom_Flash

Flash AS3

X

       

FlyoutZoom2_Flash

Flash AS3

X

       

Legacy-Zoom-Guided

Flash AS2

X

       

Zoom

Flash AS3

X

       
 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

イメージセットビューア

Universal_HTML5_Flyout

HTML5

X

X

X

X

X

Universal_HTML5_ImageSet_dark

HTML5

X

X

X

X

X

Universal_HTML5_ImageSet_light

HTML5

X

X

X

X

X

FlyoutZoom_Flash

Flash AS3

X

       

FlyoutZoom2_Flash

Flash AS3

X

       

ImageSet

Flash AS3

X

       

ImageSet_Slideshow_Flash

Flash AS3

X

       

Legacy-ImageSet-Guided

Flash AS2

X

       
 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

スウォッチセットビューア

Universal_HTML5_Flyout

HTML5

X

X

X

X

X

Universal_HTML5_SwatchSet_dark

HTML5

X

X

X

X

X

Universal_HTML5_SwatchSet_light

HTML5

X

X

X

X

X

FlyoutZoom_Flash

Flash AS3

X

       

FlyoutZoom2_Flash

Flash AS3

X

       

SwatchSet

Flash AS3

X

       

SwatchSet_Slideshow_Flash

Flash AS3

X

       
 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

eCatalog ビューア

Universal_HTML5_eCatalog_Adv

(ソーシャルメディアのサポートを含む)

HTML5

X

X

X

X

X

Universal_HTML5_eCatalog

(ソーシャルメディアのサポートを含む)

HTML5

X

X

X

X

X

eCatalog_Flash

Flash AS3

X

       

eCatalog_PopupViewers_Flash

Flash AS3

X

       

Legacy-eCatalog

Flash AS2

X

       
 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

スピンビューア

Universal_HTML5_SpinSet_dark

HTML5

X

X

X

X

X

Universal_HTML5_SpinSet_light

HTML5

X

X

X

X

X

Spin

Flash AS3

X

       

Spin_Auto_Flash

Flash AS3

X

       

Spin_eCat_Flash

Flash AS3

X

       
 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

Blackberry スマートフォン

Windows Phone

eVideo ビューア

Scene7 は、MP4 H.264 ビデオのモバイルビデオ再生をサポートします。次を参照すると、このビデオ形式をサポートする Blackberry 端末が見つかります。

Supported video formats on Blackberry(Blackberry でサポートされているビデオ形式)

次を参照すると、このビデオ形式をサポートする Windows 端末が見つかります。

Windows Phone のサポートされるメディア コーデック

Universal_HTML5_Video

(クローズドキャプションのサポートを含む)

詳しくは、ベストプラクティス:HTML5 ビデオビューアの使用を参照してください。

HTML5

X

X

X

X

X

X

X

Universal_HTML5_Video_social

(クローズドキャプションとソーシャルメディアのサポートを含む)

HTML5

X

X

X

X

X

X

X

Video

Flash AS3

X

           

Video_eCat

Flash AS3

X

           

Video_Caption

Flash AS3

X

           
 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

再編集ビデオビューア

VideoRecut

Flash AS3

X

       
 

ビューアテクノロジ

デスクトップ

Apple iPhone

Apple iPad

Android スマートフォン

Android タブレット

混在メディアセットビューア

Universal_HTML5_MixedMedia_dark

HTML5

X

X

X

X

X

Universal_HTML5_MixedMedia_light

HTML5

X

X

X

X

X

MixedMedia_AutoSpin_Flash

Flash AS3

X

       

Mixed_Media

Flash AS3

X

       

サポートされているモバイルビューアのジェスチャに関する表

次の表に、iOS、Android 2.x および Android 3.x でサポートされているモバイルビューアのジェスチャを示します。

ジェスチャ

フライアウトズーム

ズーム

eCatalog

スピン

ドラッグ

パン

パン

パン

パン

タップ

フライアウトウィンドウの表示

ユーザインターフェイスの表示/非表示

ユーザインターフェイスの表示/非表示

ユーザインターフェイスの表示/非表示

ダブルタップ

該当なし

ズームインまたはリセット

ズームインまたはリセット

ズームインまたはリセット

ピンチアウト

該当なし

ズームイン(iOS と Android 3x のみ)

ズームイン(iOS と Android 3x のみ)

ズームイン(iOS と Android 3x のみ)

ピンチイン

該当なし

ズームアウト(iOS と Android 3x のみ)

ズームアウト(iOS と Android 3x のみ)

ズームアウト(iOS と Android 3x のみ)

スワイプ

スウォッチバーのスクロール

画像のスクロール

ページのスクロール

スピン

フリック

スウォッチバーのスクロール

画像のスクロール

ページのスクロール

スピン

ビューアプリセット画面について

ビューアプリセット画面で、ビューアプリセットを作成して管理します。この画面を開くには、設定ビューアプリセットをクリックします。

ビューアプリセット画面には、次のタスクを実行するためのツールがあります。

プリセットの追加
追加」をクリックし、ビューアプリセットを追加ダイアログボックスで選択を行います。

詳しくは、ビューアプリセットの追加と編集を参照してください。

プリセットの編集
プリセットを選択し、「編集」をクリックします。

詳しくは、ビューアプリセットの追加と編集を参照してください。

プリセットの削除
プリセットを選択し、「削除」をクリックします。

プリセットへのローカリゼーションサポートの追加
公開設定の下の Image Server にロケールマップ文字列の値を追加します。次に、Flash AS3 ビューアプリセットを編集し、ローカライズされたツールヒントのテキストを追加します。

詳しくは、Flash AS3 ビューアプリセットへのローカリゼーションサポートの追加を参照してください。

プリセットの書き出し
HTML5 または Flash AS3 ビューアプリセットを選択し、「書き出し」をクリックしてビューアスキンをダウンロードすると、新しいビューアプリセットを作成および追加する際の基本として使用できるようになります。

詳しくは、HTML5 または Flash AS3 ビューアプリセットの書き出しを参照してください。

ビューアプリセットリストのフィルタリング
次のツールを使用して、リストをフィルタリングします。
  • 「アクティブ」または「非アクティブ」ドロップダウンリストを開き、オプションを選択して、アクティブプリセット、非アクティブプリセットまたはすべてのプリセットを表示します。

  • プラットフォーム」ドロップダウンリストを開き、Flash AS3 プラットフォームのビューアのみの表示を選択します。

  • ビューア」ドロップダウンリストを開いてオプションを選択し、特定の種類のビューアのみを表示します。「すべてのビューア」を選択して、すべてのビューアを表示します。

プリセットの並べ替え
列見出し(「アクティブ」、「ユニバーサル」、「種類」、「プリセット」または「プラットフォーム」)をクリックして、列のリストを並べ替えます。列見出しをもう一度クリックすると、リストが降順(または昇順)に並べ替えられます。

詳しくは、ユニバーサルビューアについてを参照してください。

プリセットのアクティブ化/非アクティブ化
プリセットを選択して「アクティブ」オプションをクリックし、アクティブ化または非アクティブ化します。

詳しくは、ビューアプリセットのアクティブ化または非アクティブ化を参照してください。

ビューアプリセット画面の右側の「プレビュー」をクリックすると、選択したビューアプリセットでアセットがどのように表示されるかが示されます。別のアセットを表示するには、ビューアプリセット画面の「参照」をクリックして、プレビューするアセットを選択ダイアログボックスで別のアセットを選択します。

ビューアプリセットの追加と編集

ユーザインターフェイスの「追加」を使用してビューアプリセットを追加できるほか、「書き出し」を使用してビューアプリセットを追加することもできます。Flash AS3 または HTML5 用の既存のビューアプリセットを書き出し、それを新しいプリセットの基本として使用します。

詳しくは、HTML5 または Flash AS3 ビューアプリセットの書き出しを参照してください。

ビューアプリセットを追加および編集するには

  1. Scene7 Publishing System の右上隅近くにある設定ビューアプリセットをクリックします。

    プリセットのリストをフィルタリングすることができます。例えば、ビデオビューアのプリセットのみを表示するには、表の真上にある「ビューア」ドロップダウンメニューから「ビデオビューア」を選択します。

  2. ビューアプリセット画面で、ビューアプリセットを追加または編集します。

    追加
    ツールバーで「追加」をクリックします。ビューアプリセットを追加ダイアログボックスで、プラットフォームを選択し、リッチメディアアセットタイプを選択します。

    ビューアプリセットの作成が完了したら、「名前を付けて保存」をクリックします。

    既存のビューアプリセットから開始して追加
    表でビデオビューアプリセットを選択して、ツールバーの「編集」をクリックします。

    ビデオビューアを再設定したら、「名前を付けて保存」をクリックし、「プリセット名」テキストフィールドに別の名前を指定して、プリセットを保存します。

    編集
    既存のビューアプリセットを選択し、「編集」をクリックします。

  3. ビューアを設定画面の「プリセット名」フィールドにプリセット名を入力するか、既存の名前を編集します。

  4. 必要に応じてその他のオプションを設定します。

    注意: 「ソースと同じ」を選択して、エンコードされたビデオ自体の解像度サイズにビデオビューアのサイズを自動的に調整します。このオプションを選択した場合は、「ステージの幅」と「ステージの高さ」を入力できません。その代わり、これらのオプションはビデオ自体から取得されます。「ソースと同じ」を選択した場合は、「マージンサイズ」オプションを設定して、ビデオ再生領域外のスキン寸法を反映します。このマージンサイズは、ビデオコントロールのピクセル単位の高さと幅です。次の図を参考に、使用するマージンサイズを決定してください。
    フルサイズのグラフィックを表示
    ビデオビューアのステージの高さと幅およびマージンの高さと幅
  5. 次のいずれかの操作を行います。

    • 既存のプリセットから開始してビューアプリセットを追加した場合は、「名前を付けて保存」をクリックします。

    • ビューアプリセットを追加または編集した場合は、「保存」をクリックします。

Flash AS3 ビューアプリセットへのローカリゼーションサポートの追加

ローカライズされたツールヒントテキストを Flash AS3 ビューアに追加できます。

この機能を実現するには、まず Image Server でロケールマップ文字列を定義します。次に、Flash AS3 ビューアプリセットのツールヒントテキストを編集します。

アセットのローカリゼーションを設定する場合の考慮事項を参照してください。

Scene7 Publishing System には、日本語、中国語、韓国語などの東アジア言語のフォントは含まれていないことに注意してください。通常、これらの言語には UTF-8 または別の文字セットが必要です。したがって、ツールヒントテキストでこれらの言語を使用するには、そのロケールから Scene7 にログオンし、必要なツールヒントの値を入力します。また、ツールヒントテキストを UTF-8 として、つまり、目的の東アジア言語を使用しているワードプロセッサからテキストをカットしてペーストします。

下記の手順に従ってビューアでローカライズされたツールヒントを使用する方法に加え、代替方法を使用することもできます。ビューア SDK では、ローカライズされたツールヒントばかりでなくローカライズされたグラフィックを追加できます。詳しくは、Adobe Scene7 Viewer SDK for Adobe Flash PDF ガイドのローカリゼーションの章を参照してください。このガイドは、Adobe Developer Connection から Adobe Scene7 ビューア SDK ダウンロードの一部として入手できます。

注意: 「ローカリゼーションサポート」オプションの設定については、Adobe Scene7 テクニカルサポートにお問い合わせいただくか、s7support@adobe.com まで電子メールをお送りください。
Flash AS3 ビューアプリセットにローカリゼーションサポートを追加するには
  1. 設定アプリケーション設定公開設定Image Server をクリックします。

  2. Image Server による公開パネルで、ローカリゼーションサポートセクションまで下にスクロールします。

    注意: 「ローカリゼーションサポート」オプションの設定については、Adobe Scene7 テクニカルサポートにお問い合わせいただくか、s7support@adobe.com まで電子メールをお送りください。
  3. 「ロケールマップ文字列」テキストフィールドで、サポートしたい言語を指定します。

    例えば、ビューアで英語、スペイン語、日本語をサポートしたい場合、マップ文字列の正しい構文は en,en,|es,es,|ja,ja, です。パラメータは LocaleStrMap です。

    2 文字の言語のペアごとに、最初の 2 文字のコードは言語の名前を表しています。2 文字のコードを使用する代わりに、言語の名前を省略しないで入力することもできます(English, en, など)。使用する方法に関係なく、ここで指定した言語のリストは、ビューアプリセットを編集するときにロケールドロップダウンリストに表示される言語リストにも表示されます。これは、ビューアの URL で viewerURL&locale=en を使用してローカライズされたビューアを要求するときにも使用されます。

  4. 「保存」をクリックし、次に「OK」をクリックします。

  5. 設定画面の左側のパネルの「アプリケーション設定」の下で、ビューアビューアプリセットをクリックします。

  6. 設定ツールバーのすべてのプラットフォームドロップダウンリストで、「Flash AS3」を選択します。

  7. アクティブなビューアプリセットを選択し、設定ツールバーで、「編集」をクリックします。

  8. ビューアを設定画面のロケールドロップダウンリストで、ローカライズしてビューアに表示したいツールヒントの言語を選択します。

  9. ビューアを設定画面の左側で、一時停止/再生ボタンやフルスクリーンボタンなど、コンポーネント名をクリックします。

  10. コンポーネントのツールヒントテキストフィールドで、選択した言語の値を入力します。

  11. ビューアプリセットを構成する様々なコンポーネントのツールヒントの値を入力したら、ビューアを設定画面の右下隅にある「名前を付けて保存」をクリックします。

  12. 追加の言語をサポートする場合は、手順 8~9 を繰り返します。

  13. 新規プリセットに名前を付けて保存ダイアログボックスで、ビューアプリセットの名前を入力し、「保存」をクリックします。

HTML5 または Flash AS3 ビューアプリセットの書き出し

既存の HTML5 または Flash AS3 ビューアプリセットを書き出して、新しい HTML5 または Flash AS3 ビューアプリセットを作成するための基本として使用できます。この書き出しオプションが便利なのは、ビューアプリセットをゼロから作成する必要がなくなる点にあります。代わりに、外観や動作が希望に近いプリセットを書き出すことで、それをデザインを調整するための出発点として使用できます。

HTML5 ビューアプリセットを書き出す場合は、HTML5 ビューア SDK がインストールされており、書き出した CSS と関連 JavaScript を編集できるようになっていることを確認してください。同様に、Flash AS3 ビューアプリセットを書き出す場合は、Flash ビューア SDK が Adobe Flash Professional にインストールされており、書き出した FLA ファイルを編集できるようになっていることを確認してください。

詳しくは、開発者向けリソースを参照してください。

HTML5 または Flash AS3 ビューアプリセットを書き出すには

  1. 設定ビューアプリセットをクリックします。

  2. ビューアプリセットツールバーの左から 2 番目のドロップダウンリストで、「HTML5」または「Flash AS3」を選択します。

  3. 左から 3 番目のドロップダウンリストで「すべてのビューア」を選択します。

  4. 新しい HTML5 または Flash AS3 ビューアプリセットの基本として使用するビューアプリセットを選択します。

  5. ツールバーで「書き出し」をクリックします。

  6. 選択したアセットを書き出しダイアログボックスで、「書き出しを送信」をクリックします。

    書き出しが完了すると、Flash AS3 ビューアを書き出した場合は、Zip された FLA ファイルが生成されます。HTML5 ビューアを書き出した場合は、CSS ファイルが生成されます。そのファイルをダウンロードして展開します。

  7. 書き出したビューアプリセットに応じて、次のいずれかの操作を行います。

    • FLA ファイルを Adobe Flash Professional で開き、変更を行います。ファイルを編集する前に、Scene7 ビューア Flash SDK がインストールされていることを確認してください。

      FLA をムービーファイルとして書き出し、生成された SWF ファイルを保存します。

    • CSS ファイルを CSS エディタで開き、変更を行い、ファイルを保存します。

  8. SWF ファイルまたは CSS ファイルを Scene7 Publishing System にアップロードします。

    詳しくは、ファイルのアップロードを参照してください。

  9. SWF ファイルまたは CSS ファイルを Scene7 Image Server に公開します。

    詳しくは、公開ファイルを参照してください。

  10. 新しいビューアプリセットを通常どおりに追加します。書き出したビューアに応じて、アップロードしたビューア SWF ファイルまたはビューア CSS ファイルを選択します。

    詳しくは、ビューアプリセットの追加と編集を参照してください。

ビューアプリセットのアクティブ化または非アクティブ化

アセットを表示する URL を作成するには、プレビューダイアログボックスで「プリセット」ドロップダウンリストを開き、ビューアプリセットを選択して、「URL をコピー」をクリックします(ビューアプリセットの URL のコピーを参照してください)。このプリセットリストには、管理者がビューアプリセット画面で追加して管理するビューアプリセットが表示されます。例えば、ユーザが eCatalog をプレビューすると、すべてのアクティブな eCatalog ビューアプリセットがプレビューダイアログボックスの「プリセット」ドロップダウンリストに表示されます。

ビューアプリセット画面でビューアプリセットを非アクティブ化しないと、プレビューダイアログボックスの「プリセット」ドロップダウンリストの件数が増加します。

ビューアプリセットをアクティブ化または非アクティブ化するには

  1. 設定/ビューアプリセットを選択し、ビューアプリセット画面を開きます。

  2. 「アクティブ」オプションを選択または選択解除して、ビューアプリセットをアクティブ化または非アクティブ化します。

ビューアプリセットの URL のコピー

アセットを公開した後に、ビューアプリセットの設定でアセットを表示するための URL をコピーすることができます。

URL がクリップボードにコピーされます。Web ページ、携帯端末またはアプリケーションの HTML コードで必要に応じてこの URL を使用することができます。

ビューアプリセットの URL をコピーするには

  1. 参照パネルからアセットを選択します。

  2. アセットの参照パネルの上のツールバーの右側で、次のいずれかの操作を行います。
    • 「グリッドビュー」をクリックします。アセットの参照パネルで、1 つのアセットをダブルクリックし、アセットを詳細ビューで開きます。右側の URL および埋め込みコードパネルで、必要なビューアの右側の「URL をコピー」をクリックします。

    • 「グリッドビュー」をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の下にあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列にある「URL をコピー」をクリックします。

    • 「リスト表示」をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の右側にあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列にある「URL をコピー」をクリックします。

    • 「グリッドビュー」「リストビュー」、または「詳細ビュー」をクリックします。同じツールバーにあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列にある「URL をコピー」をクリックします。

ビューアプリセットの埋め込みコードのコピー

埋め込みコード機能を使用すると、選択したビューアプリセットのビューアコードをレビューすることができます。コードをクリップボードにコピーして、ビューアを配信する Web ページにペーストすることもできます。

埋め込みコードダイアログボックスでは、コードを編集することはできません。

ビューアプリセットの埋め込みコードをコピーするには

  1. アセットの参照パネルでアセットを選択します。

  2. アセットの参照パネルの上のツールバーの右側で、次のいずれかの操作を行います。
    • 「グリッドビュー」をクリックします。アセットの参照パネルで、1 つのアセットをダブルクリックし、アセットを詳細ビューで開きます。右側の URL パネルで、「埋め込みコード」をクリックします。

    • 「グリッドビュー」をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の下にあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列にある「埋め込みコード」をクリックします。

    • 「リスト表示」をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の右側にあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列にある「埋め込みコード」をクリックします。

    • 「グリッドビュー」「リストビュー」、または「詳細ビュー」をクリックします。同じツールバーにあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列にある「埋め込みコード」をクリックします。

  3. 埋め込みコードダイアログボックスで、「クリップボードにコピー」をクリックします。

  4. 「閉じる」をクリックします。

ユニバーサルビューアについて

注意: ユニバーサルビューアの使用はベストプラクティスではなく、お勧めしません。従来の使用法のみが想定されています。ベストプラクティスとして、Scene7 Publishing System に付属する HTML5 ビューアを使用します。

詳しくは、ベストプラクティス:HTML5 ビデオビューアの使用を参照してください。

Scene7 ビューアプリセット互換表も参照してください。

ユニバーサルビューアを使用すると、1 つの URL から、デスクトップ、スマートフォン、タブレットなどの複数の画面に、ビデオや画像を公開できます。

これまでは、プラットフォームが違うとサポートテクノロジも Flash や HTML5 などと違っていたため、独自のビューアを作成しなければなりませんでした。そのうえ、異なるエクスペリエンス間で切り替えられるように独自のデバイス検出を作成しなければなりませんでした。こうしたことから、プロセス全体で必要とされる開発作業が非常に多くなり、複数の URL の管理も必要となっていました。

ユニバーサルビューアを設定すると、Scene7 が Web サイト、モバイルサイト、モバイルアプリに配信および統合できる単一の URL を提供します。加えて、Scene7 Publishing System がデバイス検出を自動的に行い、お客様に適切なコンテンツを適切なビューアで適切なデバイスに送信します。

ユニバーサルビューアの具体的な設定はアプリケーション設定で行います。設定可能なビューアタイプにはズーム、画像セット、スウォッチセット、スピン、eCatalog、ビデオがあります。

また、既存のユニバーサルビューアプリセットを、独自の名前のユニバーサルビューアプロファイルを作成するための基本として使用することもできます。例えば、ローカライズ用、同じ会社内の異なる事業部用、製品カテゴリ用、各季節用(春の eCatalog ユニバーサルビューアと夏の eCatalog ユニバーサルビューアなど)に同じタイプの異なるビューアを作成することができます。

ズームなどのビューアタイプごとに、対象となるプラットフォームと、HTML ベースのビューアや Flash テクノロジに基づくビューアなどの関連ビューアが表示されます。各種プラットフォームごとに、スマートフォン、タブレット、デスクトップなどの各デバイスで使用するビューアをドラッグアンドドロップします。

ハンドヘルドスマートフォン用には、Android ベースと Apple ベースのスマートフォンがサポートされています。タブレット用には、Android ベースと Apple ベースのタブレットがサポートされています。デスクトップ用には、Flash Player がサポートされています。

ユニバーサルビューアの設定を後で編集する場合は、ジョブを Scene7 Image Server に公開して、変更内容が反映されるようにしてください。

Scene7 ビューアライブラリの例も参照してください。

ユニバーサルビューアの設定

注意: ユニバーサルビューアの使用はベストプラクティスではなく、お勧めしません。従来の使用法のみが想定されています。ベストプラクティスとして、Scene7 Publishing System に付属する HTML5 ビューアを使用します。

詳しくは、ベストプラクティス:HTML5 ビデオビューアの使用を参照してください。

Scene7 ビューアプリセット互換表も参照してください。

ユニバーサルビューアで設定に使用できるビューアは、Scene7 に付属のすべての事前定義済みビューアプリセットの組み合わせと、ユーザが追加したカスタムビューアです。実装が済んでいてもまだ Scene7 Publishing System にアップロードされていないカスタムビューアは除外されます。

どのビューアがユニバーサルビューアに公開されて選択可能になっているかは、ビューアプリセットにどのビューアがリストされているかを見て確認できます。

詳しくは、ビューアプリセットを参照してください。

既存のユニバーサルビューアの設定を編集している場合は、ジョブを Scene7 Image Server に公開して、変更内容が反映されるようにしてください。

ユニバーサルビューアを設定するには

  1. 設定メニューで「アプリケーション設定」をクリックします。

  2. 左側のパネルの「アプリケーション設定」ツリーで、ビューアユニバーサルビューアをクリックします。

  3. ユニバーサルビューアページの左上近くにあるビューアタイプタブをクリックするか、「新規プロファイル」タブをクリックして、次のいずれかの操作を行います。

    クリックしたビューアタイプタブ

    次の操作を行います。

    ズーム、画像セット、スウォッチセット、スピン、eCatalog

    「HTML ベースのビューア」グループボックスまたは「Adobe Flash 用ビューア」グループボックスで、使用するビューアをドラッグし、デバイスの画面にドロップします。

    ポインタをビューアに合わせると、そのビューアに対応しているデバイス画面はユーザインターフェイスでハイライト表示され、対応していないデバイス画面はグレー表示(使用不可)になります。

    ビデオ

    ビデオでユニバーサル URL を使用するには、各種ビットレートでエンコードされたビデオを 1 つのアダプティブビデオセットにグループ化する必要があります。これは、1 つのビデオを異なる種類の画面での再生に使用しない方が望ましいからです。例えば、携帯端末は一般に低ビットレートのビデオを必要とする一方、デスクトップの画面は高ビットレートに対応できます。

    • 「ビデオビューア」グループボックスで、使用するビューアをドラッグし、デスクトップの画面にドロップします。

      デスクトップコンピューターでアダプティブストリーミングをサポートする場合は、AS3 の「ビデオ」ビューアを使用します。

    • 「スマートフォン」テキストフィールドまたは「タブレット」テキストフィールドに、各デバイスでの再生に使用する目標ビットレートを入力します。これらのフィールドが適用されるのは、アダプティブストリーミングがない場合のみです。アダプティブストリーミングは、eVideo ストリーミングライセンスをお持ちのお客様向けに Apple iOS デバイスでのみサポートされます。この場合、ビデオビットレートは、検出された帯域幅に基づいて自動的に選択されます。それ以外の場合、特に確認は行われず、ターゲットに最も近いビットレートを持つビデオがアダプティブビデオセットから選択され、プログレッシブダウンロードを使用して再生されます。携帯端末にはネイティブの埋め込みビデオプレーヤーが存在するため、ビューアはありません。

    ビットレートはビデオ画質の尺度になります。言い換えると、ビットレートが高いほど、ビデオ画質が向上します。逆に、ビットレートが低いと、ビデオ画質が低下します。例えば、スマートフォンの接続では帯域幅が狭いことが多いので、スマートフォン向けの目標 Kbps を低めに設定することが考えられます。一方、タブレットユーザーは Wi-Fi 接続を使用している可能性が高いことから、接続の帯域幅が広いことを想定して高めのビットレートを設定することが考えられます。「スマートフォン」カテゴリには「500」の目標ビットレートを、「タブレット」カテゴリには「1000」の目標ビットレートを設定することをお勧めします。

    詳しくは、ビデオのエンコーディングのベストプラクティスを参照してください。

    新規プロファイル

    • 「新規プロファイル」タブのドロップダウンリストで、新しいユニバーサルビューアのベースとするビューアプリセットを選択します。

    • 「HTML ベースのビューア」グループボックスまたは「Adobe Flash 用ビューア」グループボックスで、使用するビューアをドラッグし、デバイスの画面にドロップします。

      ポインタをビューアに合わせると、そのビューアに対応しているデバイス画面はユーザインターフェイスでハイライト表示され、対応していないデバイス画面はグレー表示(使用不可)になります。

    • 新規プロファイル」タブをダブルクリックして、テキストフィールドに新しいユニバーサルビューアの名前を入力します。

  4. (オプション)「画像プリセットのフォールバックを選択」ドロップダウンリストで、使用する画像プリセットの名前を選択します。

    Scene7 がサポートしていないデバイスまたは画面が検出された場合は、ドロップダウンリストで選択したプリセットを使用して静的な画像が表示されます。このリストは、Scene7 Publishing System で作成および追加された画像プリセットに基づいています。

    詳しくは、画像プリセットの作成と編集を参照してください。

  5. ユニバーサルビューアページの右下にある「保存」をクリックします。

  6. 閉じる」をクリックして参照ページに戻ります。

ユニバーサルビューアのプレビュー

注意: ユニバーサルビューアの使用はベストプラクティスではなく、お勧めしません。従来の使用法のみが想定されています。ベストプラクティスとして、Scene7 Publishing System に付属する HTML5 ビューアを使用します。

詳しくは、ベストプラクティス:HTML5 ビデオビューアの使用を参照してください。

Scene7 ビューアプリセット互換表も参照してください。

設定したユニバーサルビューアをプレビューして、適切なデバイス向けに適切なビューアを選択したことを確認できます。

ユニバーサルビューアの設定を変更する必要がある場合は、ジョブを Scene7 Image Server に公開して、変更内容が反映されるようにしてください。

Scene7 ビューアリファレンスライブラリの例も参照してください。

ユニバーサルビューアをプレビューするには

  1. 左側のアセットライブラリパネルで、ビューアでプレビューするアセットを含むアセットフォルダに移動します。

  2. アセットの参照パネルの上のツールバーの右側で、「グリッドビュー」「リストビュー」、または「詳細ビュー」をクリックします。

  3. 使用しているビューに応じて、次のいずれかの操作を行います。

    • グリッドビューまたはリストビューのアセットの参照パネルで、1 つのアセットを選択します。サムネール画像の近くにあるプレビュードロップダウンリストで、「ビューアリスト」を選択します。

    • グリッドビュー、リストビュー、または詳細ビューのアセットウィンドウよりも上にあるツールバーのプレビュードロップダウンリストで、「ビューアリスト」をクリックします。

  4. 次のいずれかの操作を行います。

    • ビューアリストの表で、列見出し「プラットフォームタイプ」をクリックして、列を昇順または降順で並べ替えます。

      プラットフォームタイプ列で、プラットフォームタイプが「ユニバーサル」であるビューアの名前を見つけ、表示しようとするビューアの行にある「プレビュー」をクリックします。

    • ビューアリストの表の右上隅近くにある「プラットフォーム」ドロップダウンリストで、「ユニバーサル」を選択し、ユニバーサルプラットフォームタイプを使用して表をフィルタリングします。

      表示しようとするユニバーサルビューアの行にある「プレビュー」をクリックします。

  5. ブラウザのポップアップウィンドウに表示されたビューアを閉じて、ビューアリスト画面に戻ります。

  6. 画面の右下隅にある「閉じる」をクリックして、アセットウィンドウに戻ります。

ユニバーサルビューアの URL のコピー

注意: ユニバーサルビューアの使用はベストプラクティスではなく、お勧めしません。従来の使用法のみが想定されています。ベストプラクティスとして、Scene7 Publishing System に付属する HTML5 ビューアを使用します。

詳しくは、ベストプラクティス:HTML5 ビデオビューアの使用を参照してください。

Scene7 ビューアプリセット互換表も参照してください。

ユニバーサル URL はビューアリストウィンドウ内または詳細ビューウィンドウ内からコピーできます。

ユニバーサルビューアの URL をコピーするには

  1. 左側のアセットライブラリパネルで、コピーする URL を持つアセットを含むアセットフォルダに移動します。

  2. 次の操作を行います。

  3. ユニバーサル URL のコピーに使用

    次のいずれかの操作を行います。

    ビューアリスト

    • アセットウィンドウの上のツールバーの右側にある「グリッドビュー」をクリックします。アセットウィンドウのアセットのサムネール画像の下にあるプレビュービューアリストをクリックします。

    • アセットウィンドウの上のツールバーの右側にある「リストビュー」をクリックします。アセットウィンドウでアセットを選択し、サムネール画像の右側にあるプレビュービューアリストをクリックします。

    • アセットウィンドウの上のツールバーの右側にある「詳細ビュー」をクリックします。同じツールバーにあるプレビュービューアリストをクリックします。

    詳細ビュー

    • アセットウィンドウの上のツールバーの右側にある「グリッドビュー」をクリックします。アセットウィンドウで、単一アセットのサムネールイメージをダブルクリックして、詳細ビューで開きます。

  4. (この手順は、グリッドビューまたはリストビューではオプションです。詳細ビューでは該当しません)。ビューアリストウィンドウの左下隅近くにある、URL をコピー生成で使用する URL エンコーディングドロップダウンリストで、アセットの URL がコピーされるときにアセットの URL に適用する URL エンコーディングを選択します。

  5. 次のいずれかの操作を行います。
    • ビューアリストウィンドウでアクセスする場合は、プラットフォームタイプがユニバーサルの行の「URL をコピー」をクリックします。

    • 詳細ビューでアクセスする場合は、URL パネルの見出し「ユニバーサルプリセット」にある「URL をコピー」をクリックします。

ユニバーサルビューアの埋め込みコードのコピー

注意: ユニバーサルビューアの使用はベストプラクティスではなく、お勧めしません。従来の使用法のみが想定されています。ベストプラクティスとして、Scene7 Publishing System に付属する HTML5 ビューアを使用します。

詳しくは、ベストプラクティス:HTML5 ビデオビューアの使用を参照してください。

Scene7 ビューアプリセット互換表も参照してください。

埋め込みコード機能を使用すると、選択したユニバーサルビューアのビューアコードをレビューすることができます。コードをクリップボードにコピーして、ビューアを配信する Web ページにペーストすることもできます。埋め込みコードダイアログボックスでは、コードを編集することはできません。

ユニバーサルビューアの埋め込みコードをコピーするには

  1. 左側のアセットライブラリパネルで、コピーするユニバーサルビューアの埋め込みコードを含むアセットフォルダに移動します。

  2. アセットの参照パネルの上のツールバーの右側で、次のいずれかの操作を行います。
    • 「グリッドビュー」をクリックします。アセットの参照パネルで、1 つのアセットをダブルクリックし、アセットを詳細ビューで開きます。右側の URL および埋め込みコードパネルのユニバーサルプリセットの下で、必要なビューアの右側の「埋め込みコード」をクリックします。

    • 「グリッドビュー」をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の下にあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列の下で、プラットフォームタイプがユニバーサルであるビューアの右側にある「埋め込みコード」をクリックします。

    • 「リスト表示」をクリックします。アセットの参照パネルで 1 つのアセットを選択して、サムネール画像の右側にあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列の下で、プラットフォームタイプがユニバーサルであるビューアの右側にある「埋め込みコード」をクリックします。

    • 「グリッドビュー」「リストビュー」、または「詳細ビュー」をクリックします。同じツールバーにあるプレビュービューアリストをクリックします。

      ビューアリストページの表の「アクション」列の下で、プラットフォームタイプがユニバーサルであるビューアの右側にある「埋め込みコード」をクリックします。

  3. 埋め込みコードダイアログボックスのテキストフィールドで、ユニバーサルビューアの埋め込みコードのターゲット DIV レイヤー名を指定します。

    任意の名前を指定できます。この名前は DIV レイヤーの整理に役立ち、埋め込みコードの setTargetDiv タグで使用されます。

  4. 「埋め込みコードの取得」をクリックします。

    埋め込みコードダイアログボックスでは、コードを編集することはできません。

  5. 「クリップボードにコピー」をクリックします。

  6. 「閉じる」をクリックします。