スマートtvへの アプローチと制作

スマート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