読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

Web on TV: 失敗しない作戦

第4回 HTML5など勉強会

Operaのひと

Opera TV Store (日本未対応)

  1. 既存のページをどうやって簡単にテレビ化できるか
  2. そのページをどうやって簡単にテストするか
  3. テレビに最適なwebコンテンツは何であるか

問題: 字が読めない (字がすごく小さい)
3M離れていると、もうほとんど読めない
解決策: font-size: 2.5em
transform: scale(2.5)はよくない(テレビのメモリが足りない)
テレビのズームは1.5倍が関の山

問題2: 字が大きくてデザインがきつそう
解決策: 不要なものを取る(テレビ用のデザインを考える)
注意点: 完全に削除するとユーザが困る (非表示がベター)

問題3: ナビゲーションがしにくい(赤外線の誤差とかでスクロールがすごくストレスフル)
解決策: タブインデックスを使う クリック

注意点: ページ内のリンクが多ければスクロールが難しくなる
フォーカスを忘れない (マウスがどこにあるのかを分かってもらうよ
うにする a: hover, a:focus {...})

問題4: 文字入力がすごく大変 (リモコン入力とかすごくしんどそう)
解決策: ない
注意点: ボタン[0-9][OK][戻る]しかないようにする
変なボタンを使えるようにしない (国によってボタンの意味が違ったりするから)

問題5: どうやってテレビだと分かるのか?
user-agentを使ってユーザーをサーチするのはNG (初回ユーザーのuser-agent
は基本非公開だから)
解決: CSSメディアクエリ (bit.ly/tvdev)
嘘の場合がある
tvのメディアタイプが存在しない

画面のサイズで判定する

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

パソコンから離れる

キーボードやキーパッドを使ってみる
Opera:[Shift]+[↑↓←→]

エミュを使う
opera.com/developers/tools
OperaTVエミュレータ
Operaモバイルエミュレータ

TVに最適なウェブコンテンツは何であるか?

リビングの特等席にあるから見られやすい
老若男女だれでも使える
数人が同時に楽しめる

たぶんニュースサイトは使われない (テレビ見ようよ)

  1. ビデオやオーディオプレイヤー (大画面かつ高画質、下手をすると高音質だから)
  2. スライドショー、写真ビューワ
  3. インタラクティブレッスン (楽器やエクササイズなど)
  4. ソリティア
  5. マルチスクリーンのアプリ

websocketのハードルを越えることが今後の課題

webrtcはまだ分からない
webrealtimecommunication(P2Pでコミュニケーションを取る)
webブラウザのなかでskypeが出来るようになるみたいな夢の技術

PS3とかwiiとかは、規格が違うから信頼性はない