SlideShare a Scribd company logo
次世代テレビを知る

ハイブリッドキャスト HTML5

正田 聖@hijiriworld
その他
拡張していくテレビとユーザー
ユーザーのインターネット利用時間は増加し
テレビの視聴時間は減少
「テレビ離れ」?

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

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

バ

バ
バルス

バルス

バルス

バ

バルス
バルス

バ

バ

バルス

バ

バルス

バ

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

バ

バルス

バルス

バ

バルス

バ

バルス

秒間14万3199ツイート
視聴者、読者

+

制作者、参加者

ユーザー

従来型の楽しみ方

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

+
サービス提供側

ハイブリッドキャスト
ハイブリッドキャストの技術仕様
放送と通信の融合
スマートTV
放送

ハイブリッドキャスト

通信

放送

個別利用

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

通信

同期利用
ハイブリッドキャストの技術仕様
放送
高品質・高信頼・同期性

放送局

放送番組

提示ポリシー

HTML5実行環境

アプリケーション
起動情報
放送に連動したサービス
番組関連の
メタデータ

ハイブリッドキャスト受信機
アプリケーション
コンテンツ

サービス事業者

インターネット

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

モバイル端末連携
アプリケーションの種類

連動アプリケーション

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

非連動アプリケーション
放送とは無関係に動作するアプリケーション
受信機のメニュー操作によりアプリケーションの選択、起動を行い、
終了は視聴者が手動で行う。
受信機が備えるハイブリッドキャスト拡張API

ハイブリッド対応テレビ(受信機)

HTML5

ハイブリッドキャスト

+

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

コンパニオンデバイスへURLを送信
コンパニオンデバイスからデータを送信
コンパニオンデバイスからデータを受信
アプリケーション開発における検討事項
受信機と搭載ブラウザ

実機検証が必須。
受信機の性能は、現時点ではスマホより劣る。
搭載ブラウザは一般のブラウザとは仕様が若干異なる。
ユーザーエージェントなども今後の実装依存。
ユーザー操作
ポインティングデバイスの利用は基本的に想定しない。
操作はすべてリモコンの、
【決定】【戻る】【十字ボタン】【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上のデバイス間通信にて実装。
受信機の実装依存になるため、やや動きが重い。
ハイブリッドキャストの展望
HTML5 Conference 2013 HybridCast

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

HTML5 Conference 2013 HybridCast