1. 次世代テレビを知る
ハイブリッドキャスト HTML5
正田 聖@hijiriworld

2. その他

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

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

5. 検索ワードはテレビの話題が常に上位
テレビのアニメ映画の話題で世界歴代最高瞬間風速を記録
バ
バ
バ
バルス
バルス
バルス
バ
バルス
バルス
バ
バ
バルス
バ
バルス
バ
バ
ババ バルス
バ
バルス
バルス
バルス
バ
バルス
バルス
バ
バルス
バ
バルス
秒間14万3199ツイート

6. 視聴者、読者
＋
制作者、参加者
ユーザー
従来型の楽しみ方
＋ 拡張した新しい楽しみ方
＋
サービス提供側
ハイブリッドキャスト

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

8. 放送と通信の融合
スマートTV
放送
ハイブリッドキャスト
通信
放送
個別利用
＋ 安心・安全
＋ 新しいビジネスモデル
通信
同期利用

9. ハイブリッドキャストの技術仕様
放送
高品質・高信頼・同期性
放送局
放送番組
提示ポリシー
HTML5実行環境
アプリケーション
起動情報
放送に連動したサービス
番組関連の
メタデータ
ハイブリッドキャスト受信機
アプリケーション
コンテンツ
サービス事業者
インターネット
通信
ユーザーの要求に応える
モバイル端末連携

10. アプリケーションの種類
連動アプリケーション
放送と連動するアプリケーション
放送番組をより深く、より楽しく視聴するためのサービスを実現できる。
編成チャンネルを視聴中だけ起動され、編成チャンネルを変更すると終了する。
非連動アプリケーション
放送とは無関係に動作するアプリケーション
受信機のメニュー操作によりアプリケーションの選択、起動を行い、
終了は視聴者が手動で行う。

11. 受信機が備えるハイブリッドキャスト拡張API
ハイブリッド対応テレビ（受信機）
HTML5
ハイブリッドキャスト
＋
拡張API

12. ハイブリッドキャスト拡張APIのサンプルコード
コンパニオンデバイスへURLを送信

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

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

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

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

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

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

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

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

21. ハイパフォーマンスJavaScript
ハイブリッドキャストアプリケーションを開発する上では非常に重要
・JavScriptファイルの読み込みはbody要素の最下部に配置する。
・DOM操作時はローカル変数にキャッシュしてアクセスを減らす。
・再描画と再配置を極力減らす、など

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

23. 実装・検証デモ

24. 1. テレビ映像領域の移動検証
残像的なものは発生しなかったが、やはり動きは重い。
放送側の提示ポリシーの制約があるため、実運用はたぶん無理。

25. 2. オーバーレイ検証
放送領域はobject要素なので、その上にcanvasを重ねることができる。
PCとTVで動きに差が出ているのは受信機の性能依存となる。

26. 3. アニメーションの実装方法による動作比較検証
CSS3 keyframeで、座標、translate、tanslate3dによる実装方法をいくつか検証
いずれも動作に差はなかった

27. 4. お絵描きアプリの開発検証
受信機とモバイル端末の連携は、Webサーバを用意してNode.jsなどで実装するのが通常。
本検証では、拡張APIを用いて、同一無線LAN上のデバイス間通信にて実装。
受信機の実装依存になるため、やや動きが重い。

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