HTML5 Conference 2013 HybridCast
-
Upload
satoshi-shoda -
Category
Documents
-
view
4.361 -
download
5
Transcript of HTML5 Conference 2013 HybridCast
![Page 1: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/1.jpg)
次世代テレビを知る ハイブリッドキャスト×HTML5
正田 聖@hijiriworld
![Page 2: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/2.jpg)
その他
![Page 3: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/3.jpg)
拡張していくテレビとユーザー
![Page 4: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/4.jpg)
ユーザーのインターネット利用時間は増加し テレビの視聴時間は減少 「テレビ離れ」?
でも実際は
![Page 5: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/5.jpg)
検索ワードはテレビの話題が常に上位
秒間14万3199ツイート
テレビのアニメ映画の話題で世界歴代最高瞬間風速を記録
ババルスババルス
ババルスババルスババルス ババルス
ババルス
ババルス ババルス
ババルス
ババルス
ババルスババルス ババルス
ババルス
![Page 6: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/6.jpg)
視聴者、読者 制作者、参加者
従来型の楽しみ方
ハイブリッドキャスト
+
拡張した新しい楽しみ方+
ユーザー
サービス提供側+
![Page 7: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/7.jpg)
ハイブリッドキャストの技術仕様
![Page 8: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/8.jpg)
放送と通信の融合
+ 安心・安全 + 新しいビジネスモデル
放送 通信 放送 通信
スマートTV ハイブリッドキャスト
個別利用 同期利用
![Page 9: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/9.jpg)
ハイブリッドキャストの技術仕様
放送局HTML5実行環境
サービス事業者
モバイル端末連携
ハイブリッドキャスト受信機
アプリケーション コンテンツ インターネット
放送に連動したサービス
放送 高品質・高信頼・同期性
アプリケーション 起動情報
番組関連の メタデータ
提示ポリシー
通信 ユーザーの要求に応える
放送番組
![Page 10: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/10.jpg)
アプリケーションの種類
連動アプリケーション
非連動アプリケーション
放送と連動するアプリケーション 放送番組をより深く、より楽しく視聴するためのサービスを実現できる。 編成チャンネルを視聴中だけ起動され、編成チャンネルを変更すると終了する。
放送とは無関係に動作するアプリケーション 受信機のメニュー操作によりアプリケーションの選択、起動を行い、 終了は視聴者が手動で行う。
![Page 11: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/11.jpg)
ハイブリッドキャスト 拡張API
HTML5
ハイブリッド対応テレビ(受信機)
受信機が備えるハイブリッドキャスト拡張API
+
![Page 12: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/12.jpg)
コンパニオンデバイスへURLを送信
ハイブリッドキャスト拡張APIのサンプルコード
![Page 13: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/13.jpg)
コンパニオンデバイスからデータを送信
![Page 14: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/14.jpg)
コンパニオンデバイスからデータを受信
![Page 15: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/15.jpg)
アプリケーション開発における検討事項
![Page 16: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/16.jpg)
受信機と搭載ブラウザ
実機検証が必須。 受信機の性能は、現時点ではスマホより劣る。 搭載ブラウザは一般のブラウザとは仕様が若干異なる。 ユーザーエージェントなども今後の実装依存。
![Page 17: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/17.jpg)
ユーザー操作
ポインティングデバイスの利用は基本的に想定しない。 操作はすべてリモコンの、 【決定】【戻る】【十字ボタン】【4色ボタン】で行われる事を想定すること。
![Page 18: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/18.jpg)
ボタン操作時のサンプルコード
![Page 19: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/19.jpg)
Media Queries
Media Queriesではメディアタイプとして「tv」が定義されているが、 これにマッチするか否かは実装依存となる。 デバイスの描画領域のサイズでスタイルを切り替える方が望ましい。
![Page 20: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/20.jpg)
デバッグ方法
ブラウザのデベロッパーツールなどが使えないので、 以下のようにログを出力する方法などが考えられる。
![Page 21: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/21.jpg)
ハイパフォーマンスJavaScript
・JavScriptファイルの読み込みはbody要素の最下部に配置する。 ・DOM操作時はローカル変数にキャッシュしてアクセスを減らす。 ・再描画と再配置を極力減らす、など
ハイブリッドキャストアプリケーションを開発する上では非常に重要
![Page 22: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/22.jpg)
canvasの描画を一度に行うサンプルコード
![Page 23: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/23.jpg)
実装・検証デモ
![Page 24: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/24.jpg)
1. テレビ映像領域の移動検証
残像的なものは発生しなかったが、やはり動きは重い。 放送側の提示ポリシーの制約があるため、実運用はたぶん無理。
![Page 25: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/25.jpg)
2. オーバーレイ検証
放送領域はobject要素なので、その上にcanvasを重ねることができる。 PCとTVで動きに差が出ているのは受信機の性能依存となる。
![Page 26: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/26.jpg)
3. アニメーションの実装方法による動作比較検証
CSS3 keyframeで、座標、translate、tanslate3dによる実装方法をいくつか検証 いずれも動作に差はなかった
![Page 27: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/27.jpg)
4. お絵描きアプリの開発検証
受信機とモバイル端末の連携は、Webサーバを用意してNode.jsなどで実装するのが通常。 本検証では、拡張APIを用いて、同一無線LAN上のデバイス間通信にて実装。
受信機の実装依存になるため、やや動きが重い。
![Page 28: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/28.jpg)
ハイブリッドキャストの展望
![Page 29: HTML5 Conference 2013 HybridCast](https://reader031.fdocument.pub/reader031/viewer/2022020207/55a05fc81a28ab412e8b46cc/html5/thumbnails/29.jpg)