HTML5 Conference 2013 HybridCast

次世代テレビを知る ハイブリッドキャスト×HTML5

正田 聖@hijiriworld

その他

拡張していくテレビとユーザー

ユーザーのインターネット利用時間は増加し テレビの視聴時間は減少 「テレビ離れ」？

でも実際は

検索ワードはテレビの話題が常に上位

秒間14万3199ツイート

テレビのアニメ映画の話題で世界歴代最高瞬間風速を記録

ババルスババルス

ババルスババルスババルス ババルス

ババルス

ババルス ババルス

ババルス

ババルス

ババルスババルス ババルス

ババルス

視聴者、読者 制作者、参加者

従来型の楽しみ方

ハイブリッドキャスト

＋

拡張した新しい楽しみ方＋

ユーザー

サービス提供側＋

ハイブリッドキャストの技術仕様

放送と通信の融合

＋ 安心・安全 ＋ 新しいビジネスモデル

放送 通信 放送 通信

スマートTV ハイブリッドキャスト

個別利用 同期利用

ハイブリッドキャストの技術仕様

放送局HTML5実行環境

サービス事業者

モバイル端末連携

ハイブリッドキャスト受信機

アプリケーション コンテンツ インターネット

放送に連動したサービス

放送 高品質・高信頼・同期性

アプリケーション 起動情報

番組関連の メタデータ

提示ポリシー

通信 ユーザーの要求に応える

放送番組

アプリケーションの種類

連動アプリケーション

非連動アプリケーション

放送と連動するアプリケーション 放送番組をより深く、より楽しく視聴するためのサービスを実現できる。 編成チャンネルを視聴中だけ起動され、編成チャンネルを変更すると終了する。

放送とは無関係に動作するアプリケーション 受信機のメニュー操作によりアプリケーションの選択、起動を行い、 終了は視聴者が手動で行う。

ハイブリッドキャスト 拡張API

HTML5

ハイブリッド対応テレビ（受信機）

受信機が備えるハイブリッドキャスト拡張API

＋

コンパニオンデバイスへURLを送信

ハイブリッドキャスト拡張APIのサンプルコード

コンパニオンデバイスからデータを送信

コンパニオンデバイスからデータを受信

アプリケーション開発における検討事項

受信機と搭載ブラウザ

実機検証が必須。 受信機の性能は、現時点ではスマホより劣る。 搭載ブラウザは一般のブラウザとは仕様が若干異なる。 ユーザーエージェントなども今後の実装依存。

ユーザー操作

ポインティングデバイスの利用は基本的に想定しない。 操作はすべてリモコンの、 【決定】【戻る】【十字ボタン】【4色ボタン】で行われる事を想定すること。

ボタン操作時のサンプルコード

Media Queries

Media Queriesではメディアタイプとして「tv」が定義されているが、 これにマッチするか否かは実装依存となる。 デバイスの描画領域のサイズでスタイルを切り替える方が望ましい。

デバッグ方法

ブラウザのデベロッパーツールなどが使えないので、 以下のようにログを出力する方法などが考えられる。

ハイパフォーマンスJavaScript

・JavScriptファイルの読み込みはbody要素の最下部に配置する。 ・DOM操作時はローカル変数にキャッシュしてアクセスを減らす。 ・再描画と再配置を極力減らす、など

ハイブリッドキャストアプリケーションを開発する上では非常に重要

canvasの描画を一度に行うサンプルコード

実装・検証デモ

1. テレビ映像領域の移動検証

残像的なものは発生しなかったが、やはり動きは重い。 放送側の提示ポリシーの制約があるため、実運用はたぶん無理。

2. オーバーレイ検証

放送領域はobject要素なので、その上にcanvasを重ねることができる。 PCとTVで動きに差が出ているのは受信機の性能依存となる。

3. アニメーションの実装方法による動作比較検証

CSS3 keyframeで、座標、translate、tanslate3dによる実装方法をいくつか検証 いずれも動作に差はなかった

4. お絵描きアプリの開発検証

受信機とモバイル端末の連携は、Webサーバを用意してNode.jsなどで実装するのが通常。 本検証では、拡張APIを用いて、同一無線LAN上のデバイス間通信にて実装。

受信機の実装依存になるため、やや動きが重い。

ハイブリッドキャストの展望