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

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

787

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
787
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. スマートTVへのアプローチと制作デイビス ダニエル@ourmaninjapan Opera Software bit.ly/webontv
  2. 2. "I dont want a tablet."Leo Laporte, 2010年1月
  3. 3. "I don’t use a laptop anymore." Leo Laporte, 2010年4月
  4. 4. "I dont see people wanting tohave the internet on their TV." Leo Laporte, 2010年5月
  5. 5. No-web TV Web TV 中国: 2010年http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming-- says-In-Stat
  6. 6. No-web TV Web TV 中国: 2015年(予想)http://www.eetimes.com/electronics-news/4210996/Chinese-web-TV-market-booming-- says-In-Stat
  7. 7. 0.4% 米国: 2010年 (TV販売の加増)http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
  8. 8. 17% 世界: 2010年 (TV販売の加増)http://venturebeat.com/2011/01/03/smart-tvs-sell-big-globally-not-so-much-in-the-u-s/
  9. 9. 主に BRIC と Japan※ BRIC: ブラジル、ロシア、インド、中国
  10. 10. Web on TVっていうのは…
  11. 11. SocialLuxury
  12. 12. 1998年~2001年
  13. 13. 2006年~
  14. 14. Logitech MX Air
  15. 15. Hillcrest Labs Loop Pointer
  16. 16. Sony / Google TV
  17. 17. 文字入力が楽ではない•
  18. 18. 文字入力が楽ではない•ナビゲーションが楽ではない•
  19. 19. 文字入力が楽ではない•ナビゲーションが楽ではない•テキストを読むのが楽ではない•
  20. 20. 文字入力が楽ではない•ナビゲーションが楽ではない•テキストを読むのが楽ではない•ページロードが楽ではない•
  21. 21. 文字入力が楽ではない•ナビゲーションが楽ではない•テキストを読むのが楽ではない•ページロードが楽ではない•文字入力、本当に楽ではない•
  22. 22. あらっ、ちょっと待った…
  23. 23. モバイルとほぼ同じじゃないか!
  24. 24. さようでござる。
  25. 25. 問題点は主に四つ
  26. 26. A
  27. 27. A
  28. 28. 問題:テレビの画面がちっちゃい
  29. 29. 解決:文字を大きくする
  30. 30. 方法: Media Queries(メディアクエリー) を使う
  31. 31. わかった、わかった。事例を見せてよ…
  32. 32. はい、はい。
  33. 33. じゃ、ズームしたらいいんじゃない?
  34. 34. body { -o-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2);}
  35. 35. body { font-size: 2em;}
  36. 36. body { font-size: 3em;}
  37. 37. TVの判断なら@media tv {}
  38. 38. ただ…
  39. 39. 「tv」 Media Type(メディアタイプ)が テレビに 使われていない
  40. 40. だからメディアクエリ
  41. 41. メディアクエリ:CSSの「if」分
  42. 42. ザ・パーフェクトテレビ用のメディ アクエリ…
  43. 43. (多分)
  44. 44. @media tv,(width: 1920px) and(height: 1080px),(width: 1280px) and(height: 720px) { body { font-size: 2.5em; }}
  45. 45. bit.ly/tvdev
  46. 46. A
  47. 47. 問題: 青 = 緑っぽいピンク = どっちか というと…
  48. 48. 解決:色に頼らない
  49. 49. plus...
  50. 50. こだわらない
  51. 51. 問題:halo effect
  52. 52. 解決:背景に#fffを 使わない
  53. 53. plus...
  54. 54. こだわらない
  55. 55. A
  56. 56. ●D-pad●トラックパッド●ポインター
  57. 57. 問題::hover, :focusがうまくいかない
  58. 58. スペーシャルナビゲーション (spatial navigation)
  59. 59. 解決:tabindex=”0” を使いましょう
  60. 60. bit.ly/spatnav
  61. 61. A
  62. 62. 問題:画面のスペース が少ない
  63. 63. 解決:不必要なものを 表示しない
  64. 64. @media tv,(width: 1920px) and(height: 1080px),(width: 1280px) and(height: 720px) { body { font-size: 2.5em; } #sidebar { display: none; }}
  65. 65. 問題: リモコンでのスクロールが遅い
  66. 66. 解決:長いページを 分ける
  67. 67. マウスの行ける所 をCSSでコントロールできる
  68. 68. #image4 { nav-left: #image3; nav-right: #image5;}
  69. 69. bit.ly/navdir
  70. 70. テレビでチェック しないと 想像しにくい
  71. 71. だから
  72. 72. Summary:本物のTVで確認* *必須項目
  73. 73. Thank you! デイビス ダニエル @ourmaninjapan Opera Software bit.ly/webontv
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×