- このマニュアルについて
- Cisco Vision Dynamic Signage Director でのコンテンツのサポートの概要
- Cisco Vision Dynamic Signage Director におけるコンテンツの導入の概要
- Cisco Vision Dynamic Signage Director におけるビデオ ウォールの計画
- Cisco Vision Dynamic Signage Director の画面テンプレートの仕様
- Cisco Vision Dynamic Signage Director のコンテンツのガイドラインと仕様
- Cisco Vision Dynamic Signage Director での HTML コンテンツ作成のガイドライン
Cisco Vision コンテンツ計画および仕様ガイド：Dynamic Signage Director リリース 6.2
偏向のない言語
この製品のマニュアルセットは、偏向のない言語を使用するように配慮されています。このマニュアルセットでの偏向のない言語とは、年齢、障害、性別、人種的アイデンティティ、民族的アイデンティティ、性的指向、社会経済的地位、およびインターセクショナリティに基づく差別を意味しない言語として定義されています。製品ソフトウェアのユーザーインターフェイスにハードコードされている言語、RFP のドキュメントに基づいて使用されている言語、または参照されているサードパーティ製品で使用されている言語によりドキュメントに例外が存在する場合があります。シスコのインクルーシブランゲージに対する取り組みの詳細は、こちらをご覧ください。
翻訳について
このドキュメントは、米国シスコ発行ドキュメントの参考和訳です。リンク情報につきましては、日本語版掲載時点で、英語版にアップデートがあり、リンク先のページが移動/変更されている場合がありますことをご了承ください。あくまでも参考和訳となりますので、正式な内容については米国サイトのドキュメントを参照ください。
- Updated:
- 2019年9月11日
章のタイトル： Cisco Vision Dynamic Signage Director での HTML コンテンツ作成のガイドライン
Cisco Vision Dynamic Signage Director での HTML コンテンツ作成のガイドライン
このモジュールでは、HTML5 コンテンツを作成して Cisco Vision Dynamic Signage Director のメディア プレーヤーで再生するための一般的なガイドラインについていくつか説明します。
注： ここで説明するガイドラインは、通常は Cisco Vision Dynamic Signage Director のメディア プレイヤーに有効です。ただし、要素によっては期待どおりに表示されない場合があります。本番環境に導入する前に、すべての HTML コンテンツをテストしてください。詳細については、「Cisco Vision Dynamic Signage Director での HTML コンテンツの検証」を参照してください。
■
ハードウェアアクセラレーションを使用する HTML 機能のベスト プラクティス
■Cisco Vision Dynamic Signage Director での HTML コンテンツの検証
ハードウェアアクセラレーションを使用する HTML 機能のベスト プラクティス
注： このセクションでは、メディア プレーヤーで一般的に動作するためのハードウェア アクセラレーションの機能およびガイドラインの一部を説明します。ここに記載されていない制限事項を伴う場合があります。
次の機能とエフェクトはハードウェア アクセラレーションされるため使用をお勧めします。
■CSS トランスフォームと組み合わせた SVG グラフィック
■ -webkit-transform （推奨）または transform を使用するエフェクト
■ -webkit-animation-* および -webkit-keyframes を使用するアニメーション
■すべての CSS トランジション（ -webkit-transition など）
注： 「 -webkit- 」プレフィックスは必ずしも使用する必要はありませんが、ベスト プラクティスとして使用をお勧めします。
次の機能はハードウェア アクセラレーションされないため使用を避けるべきです。
■ -ms-transform 、 -moz-transform 、または -o-transform
注： -ms-、-moz-、および -o- で始まる他の未サポートのクロム機能についても使用を避けてください。
■Javascript ベースのアニメーションおよびエフェクト
■ビデオ（ hwz 属性でタグ付けされていない場合、または hwz 属性が OFF に設定されている場合にのみ）。
■すべてのコンテンツを 1 つの非常に大きな HTML ページにロードするようなサイトをロードしたり参照することは避けてください。そうしたサイトでは大量の物理メモリまたは仮想メモリが必要になります。
注： デフォルトでは、ビデオ要素は hwz 属性でタグ付けしない限りハードウェア アクセラレーションされないため、推奨またはサポートされません。使用している DMP モデルに応じて、最大 2 つのビデオ リージョンを同時に画面に表示できます。これには、Cisco Vision Dynamic Signage Director からの他のライブ ビデオ リージョンやローカル ビデオ リージョンが含まれます。
HTML5 のコンテンツの制限事項
HTML5 ページに関連するコンテンツの制限事項を次に示します。
■HTML5 コンテンツを汎用の Web ブラウザとして使用しないでください。メディア プレーヤーは、Web 閲覧ツールではなく、インタラクティブ機能を持った HTML5 プレーヤーです。
■メディア プレーヤーは Flash コンテンツをサポートしないため、Flash コンテンツが埋め込まれている HTML5 ページを正しく表示することはできません。Adobe Creative Suite などのほとんどの Flash 作成アプリケーションは、Flash コンテンツを HTML5 としてエクスポートできるツールを備えています。
■メディア プレーヤーは Media Source Extension（MSE）をサポートしていません。
■ビデオ ストリーミング サイトによっては、サポートされていないコーデックを使用している場合があります。
表 1に、いくつかのタイプのストリーミングとそれらのコーデックのリストを示します。
UDP/RTP エンコーダ：Exterity e3535 および Comm-Tec ProTUNE III 注： ビデオ ストリームが RTSP を使用してエンドポイント間の接続を制御している場合、ビデオは MPEG2-TS を使用してカプセル化する必要があります。 |
|
■HTML5 ページのイメージ サイズは 1920X1080X32 bpp に制限されます。メディア プレーヤーは、この制限より大きなイメージを含むページの表示には失敗します。
■UHD ビデオを使用している場合でも、HTML キャンバスのサイズは 1920 X 1080 です。この制約事項は、すべての DMP モデルに適用されます。
■一部の新しいコンテンツを表示する際には歪みのあるアニメーションを使用しないでください。
■Web DB/インデックス DB/ローカル ストレージの設定は、CV-HD2 では無視されます。
HTML5 ページの作成に関するガイドライン
HTML5 ページの作成時には次の注意事項に従ってください。
■HTML5 ページがサイネージ表示と同じ縦横比であることを確認してください。
画面より小さなウィジェットに HTML5 コンテンツを表示したい場合、そのウィジェットと同じアスペクト比になるようにページを合わせます。
■HTML ページを構築するときはマスター Div を使用し 0,0 に合わせて配置します。これにより正しい配置が可能になります。
■ページ更新の動作に注意を払ってください。ページが更新されるたびに、プレーヤーはすべてのページ要素を（キャッシュ処理せずに）再取得します。ページがリモート サーバ上にホストされている場合、ページ要素は接続を介して到着した時にロードされます。このため頻繁に更新されるページでは見た目の問題が発生します。
ページの更新頻度が高くなると予想される場合は、JavaScript や Ajax その他のコードを含めて、ページ更新時にページ上の動的な要素のみがリロードされるようにします。
■デジタル サイネージに Web ページを使用する場合は、スクロール バーの非表示化を検討してください。
スクロールバーを非表示にするには、次のスニペットを CSS コードに追加します。
レンダリングされたバージョンとサポート
表 2に、各ファームウェア バージョンで使用される Web レンダリング エンジンを示します。
注意： 外部 Web コンテンツについてはパフォーマンスが保証されない、またはテストされていないことに留意してください。外部 Web コンテンツは DMP の動作に悪影響をおよぼす場合があります。外部 web コンテンツをテストしてください。
タッチスクリーンの HTML5
HTML5 ページでのタッチスクリーン操作が適切となるように、タッチスクリーン デバイスがヒューマン インターフェイス デバイス（HID）に準拠していて、標準の HID ドライバを使用していることを確認してください。
注： 製造元によっては、HID のサポートを謳っていながらカスタム ドライバを使用している場合があります。標準の HID ドライバを使用していることを確認してください。
アニメーションおよびアドオン ライブラリ
このセクションでは、メディア プレーヤーの WebKit エンジンまたは Chromium エンジンに対するアニメーションとアドオン ライブラリのサポートに関する一般的なルールをいくつか説明します。
ベクター アニメーション
ビットマップ アニメーション
ビットマップ アニメーションは 1080p HTML キャンバスの 1/3 以下の場合にスムーズに表示されます。キャンバスのサイズを 720p に設定すると、より大きい高品質のアニメーションで画面を占めることができます。
CSS トランスフォーム
すべての CSS トランスフォームは WebKit トランスフォームとして指定する必要があります。 <div> またはグラフィック要素のトランスフォームを実行するときに、トランスフォームをインラインで指定することは推奨されません。
「top」および「left」プロパティを使用するアニメーションは CPU を使用して描画されます。よりスムーズなアニメーションにするために、作業を GPU にオフロードする代わりに、 translate() および translate3d() メソッドを使用することを推奨します。
次のコードは、有効な CSS トランスフォームの例を示します。
アドオン ライブラリ
jQuery および Prototype ライブラリは、メディア プレーヤーでサポートされます。一般的なルールとして、WebKit ベースのトランスフォーメーションを使用すると、アニメーションのどのアドオン ライブラリも機能します。特定のライブラリに互換性があるかどうかを判断するには、ライブラリの非縮小（non-minified）バージョンを調べて、WebKit ベースのトランスフォームを使用しているかどうかを確認してください。
ネットワーク遅延の回避策
メディア プレーヤーが URL から HTML コンテンツをロードする際に、ネットワークのレイテンシに基づく遅延が生じることがあります。この問題を軽減するには、事前にロードされたイメージを追加してください。
Cisco Vision Dynamic Signage Director での HTML コンテンツの検証
ベスト プラクティス：常に Cisco Vision Dynamic Signage Director と DMP でコンテンツをテストしてください。
■HTML コンテンツのテストを Cisco Vision Dynamic Signage Director システムから独立して行うことも選択できますが、パフォーマンスはブラウザによって異なります。
■ラップトップでの独自のテストから得られる結果が、Cisco Vision Dynamic Signage Director 内で期待どおり得られる保証はありません。
ご使用のコンピュータには DMP の容量を超える仮想メモリや物理メモリがあり、グラフィックの処理にも違いがあります。
HTML の基本的な機能を試すことのみを目的として表示の大まかななテストを行う場合は、次のガイドラインを考慮してください。
■ご使用のリリース用の DMP ファームウェアに一致するバージョンの Chromium ブラウザ ソフトウェアをラップトップにインストールします。
■Chromium のバージョンは DMP ファームウェアのリリースによって異なります。
Cisco Vision Dynamic Signage Director リリース 6.2 用 DMP ファームウェアは、Chromium バージョン 65 を使用しています。
UHD での回転出力
■CV-UHD2 および CV-UHD の DMP は、60p で縦方向の HD ビデオ（1080 X 1920）を出力できます。複数の縦方向のビデオ ウィンドウがサポートされています（ソース ファイルと出力の両方で最大 60p）。ただし、すべてのビデオ ウィンドウの合計領域は 1080 X 1920 を超えないようにする必要があります。
■UHD 出力モードの使用時に、HTML ページを表示してビデオを回転させるとビデオがちらつきます。この現象は、ビデオが HTML ページの一部ではない場合でも発生します。
HD での回転出力
■CV-HD2 および CV-HD DMP は、60p で縦方向の HD ビデオ（1080 X 1920）を出力できます。ソース ビデオのフレーム レートは 30p を超えないようにする必要があります。
JavaScript での時刻のローカリゼーション
JavaScript の toLocaleTimeString() コールは、ローカライズされた時刻形式を取得しません（12 時間ではなく 24 時間のクロックを取得します）。代わりに、時間と分のクロックはデフォルトでメディア プレイヤーの 24 時間に設定されます。Javascript で 12 時間のクロックを使用して時間を表示するには、回避策として次のコードを使用してください。
2. 必要に応じて、秒情報を表示しないようにするには、前述の「return」の行を次に置き換えます。
フィードバック