1. スマートTVへの
アプローチと制作
デイビス ダニエル
@ourmaninjapan
Opera Software
bit.ly/webontv

2. "I don't want a tablet."
Leo Laporte, 2010年1月

3. "I don’t use a laptop anymore."
Leo Laporte, 2010年4月

4. "I don't see people wanting to
have the internet on their TV."
Leo Laporte, 2010年5月

5. No-web TV
Web TV
中国： 2010年
http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat

6. No-web TV
Web TV
中国： 2015年（予想）
http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming--
says-In-Stat

7. 0.4%
米国： 2010年 （TV販売の加増）
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/

8. 17%
世界： 2010年 （TV販売の加増）
http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/

9. 主に
BRIC
と
Japan
※ BRIC： ブラジル、ロシア、インド、中国

10. Web on TV
っていうのは…

11. Social
Luxury

12. 1998年～2001年

13. 2006年～

15. Logitech MX Air

16. Hillcrest Labs Loop Pointer

17. Sony / Google TV

19. 文字入力が楽ではない
•

20. 文字入力が楽ではない
•
ナビゲーションが楽ではない
•

21. 文字入力が楽ではない
•
ナビゲーションが楽ではない
•
テキストを読むのが楽ではない
•

22. 文字入力が楽ではない
•
ナビゲーションが楽ではない
•
テキストを読むのが楽ではない
•
ページロードが楽ではない
•

23. 文字入力が楽ではない
•
ナビゲーションが楽ではない
•
テキストを読むのが楽ではない
•
ページロードが楽ではない
•
文字入力、本当に楽ではない
•

24. あらっ、
ちょっと待った…

25. モバイルとほぼ
同じじゃないか！

26. さようでござる。

27. 問題点は主に四つ

28. A

29. A

30. 問題：
テレビの画面が
ちっちゃい

32. 解決：
文字を大きくする

33. 方法：
Media Queries
（メディアクエリー）
を使う

34. わかった、わかった。
事例を見せてよ…

35. はい、はい。

37. じゃ、ズームしたら
いいんじゃない？

39. body {
-o-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}

41. body {
font-size: 2em;
}

43. body {
font-size: 3em;
}

45. TVの判断なら
@media tv {
}

46. ただ…

47. 「tv」 Media Type
（メディアタイプ）が
テレビに
使われていない

48. だから
メディアクエリ

49. メディアクエリ:
CSSの「if」分

50. ザ・パーフェクト
テレビ用のメディ
アクエリ…

51. （多分）

52. @media tv,
(width: 1920px) and
(height: 1080px),
(width: 1280px) and
(height: 720px) {
body {
font-size: 2.5em;
}
}

53. bit.ly/tvdev

54. A

55. 問題：
青 = 緑っぽい
ピンク = どっちか
というと…

57. 解決：
色に頼らない

58. plus...

59. こだわらない

60. 問題：
halo effect

62. 解決：
背景に#fffを
使わない

63. plus...

64. こだわらない

65. A

66. ●D-pad
●トラックパッド
●ポインター

67. 問題：
:hover, :focus
がうまくいかない

68. スペーシャル
ナビゲーション
(spatial
navigation)

69. 解決：
tabindex=”0”
を使いましょう

70. bit.ly/spatnav

71. A

72. 問題：
画面のスペース
が少ない

73. 解決：
不必要なものを
表示しない

74. @media tv,
(width: 1920px) and
(height: 1080px),
(width: 1280px) and
(height: 720px) {
body {
font-size: 2.5em;
}
#sidebar {
display: none;
}
}

75. 問題：
リモコンでの
スクロールが遅い

76. 解決：
長いページを
分ける

77. マウスの行ける所
をCSSで
コントロールできる

78. #image4 {
nav-left: #image3;
nav-right: #image5;
}

79. bit.ly/navdir

80. テレビでチェック
しないと
想像しにくい

81. だ
か
ら

82. Summary:
本物のTVで確認*
*必須項目

83. Thank you!
デイビス ダニエル
@ourmaninjapan
Opera Software
bit.ly/webontv