スマートtvへの アプローチと制作
TRANSCRIPT
スマートTVへのアプローチと制作
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv
スマートTVへのアプローチと制作
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv
"I don't want a tablet."
Leo Laporte, 2010年1月
"I don’t use a laptop anymore."
Leo Laporte, 2010年4月
"I don't see people wanting tohave the internet on their TV."
Leo Laporte, 2010年5月
中国： 2010年http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
中国： 2010年http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
No-web TVWeb TV
中国： 2015年（予想）http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
中国： 2015年（予想）http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat
No-web TVWeb TV
0.4%米国： 2010年 （TV販売の加増）
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
0.4%米国： 2010年 （TV販売の加増）
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
17%世界： 2010年 （TV販売の加増）
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
17%世界： 2010年 （TV販売の加増）
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
主にBRIC
とJapan
※ BRIC： ブラジル、ロシア、インド、中国
主にBRIC
とJapan
※ BRIC： ブラジル、ロシア、インド、中国
Web on TVっていうのは…
Web on TVっていうのは…
SocialLuxurySocialLuxury
1998年～2001年1998年～2001年
2006年～2006年～
Logitech MX AirLogitech MX Air
Hillcrest Labs Loop PointerHillcrest Labs Loop Pointer
Sony / Google TVSony / Google TV
•文字入力が楽ではない•文字入力が楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
あらっ、ちょっと待った…
あらっ、ちょっと待った…
モバイルとほぼ同じじゃないか！モバイルとほぼ同じじゃないか！
さようでござる。さようでござる。
問題点は主に四つ問題点は主に四つ
A
A
問題： テレビの画面が
ちっちゃい
問題： テレビの画面が
ちっちゃい
解決：
文字を大きくする
解決：
文字を大きくする
方法： Media Queries
（メディアクエリー）を使う
方法： Media Queries
（メディアクエリー）を使う
わかった、わかった。事例を見せてよ…
わかった、わかった。事例を見せてよ…
はい、はい。はい、はい。
じゃ、ズームしたらいいんじゃない？じゃ、ズームしたらいいんじゃない？
body {-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);
}
body {-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);-ms-transform: scale(2);transform: scale(2);
}
body {font-size: 2em;
}
body {font-size: 2em;
}
body {font-size: 3em;
}
body {font-size: 3em;
}
TVの判断なら@media tv {
}
TVの判断なら@media tv {
}
ただ…ただ…
「tv」 Media Type（メディアタイプ）が
テレビに使われていない
「tv」 Media Type（メディアタイプ）が
テレビに使われていない
だからメディアクエリ
だからメディアクエリ
メディアクエリ:CSSの「if」分メディアクエリ:CSSの「if」分
ザ・パーフェクトテレビ用のメディ
アクエリ…
ザ・パーフェクトテレビ用のメディ
アクエリ…
（多分）（多分）
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
}}
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
}}
bit.ly/tvdevbit.ly/tvdev
A
問題：青 = 緑っぽい
ピンク = どっちかというと…
問題：青 = 緑っぽい
ピンク = どっちかというと…
解決：色に頼らない
解決：色に頼らない
plus...plus...
こだわらないこだわらない
問題：halo effect
問題：halo effect
解決：背景に#fffを
使わない
解決：背景に#fffを
使わない
plus...plus...
こだわらないこだわらない
A
●D-pad●トラックパッド●ポインター
●D-pad●トラックパッド●ポインター
問題：:hover, :focus
がうまくいかない
問題：:hover, :focus
がうまくいかない
スペーシャルナビゲーション
(spatialnavigation)
スペーシャルナビゲーション
(spatialnavigation)
解決：tabindex=”0”
を使いましょう
解決：tabindex=”0”
を使いましょう
bit.ly/spatnavbit.ly/spatnav
A
問題：画面のスペース
が少ない
問題：画面のスペース
が少ない
解決：不必要なものを
表示しない
解決：不必要なものを
表示しない
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
} #sidebar {display: none;
}}
@media tv,(width: 1920px) and (height: 1080px),(width: 1280px) and (height: 720px) {body {font-size: 2.5em;
} #sidebar {display: none;
}}
問題：リモコンでの
スクロールが遅い
問題：リモコンでの
スクロールが遅い
解決：長いページを
分ける
解決：長いページを
分ける
マウスの行ける所をCSSで
コントロールできる
マウスの行ける所をCSSで
コントロールできる
#image4 {nav-left: #image3;nav-right: #image5;
}
#image4 {nav-left: #image3;nav-right: #image5;
}
bit.ly/navdirbit.ly/navdir
テレビでチェックしないと
想像しにくい
テレビでチェックしないと
想像しにくい
だから
だから
Summary:本物のTVで確認*
*必須項目
Summary:本物のTVで確認*
*必須項目
Thank you!
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv
Thank you!
デイビス ダニエル@ourmaninjapanOpera Softwarebit.ly/webontv