Web on TV: 失敗しない作戦

デイビス ダニエル、 W3C

Web on TV:
失敗しない作戦

bit.ly/webtvsuccess

image/svg+xml

プログラムガイド

  1. テレビブラウザの使い方
  2. 既存のページをどうやって簡単にテレビ化できるか
  3. そのページをどうやって簡単にテストできるか
  4. テレビに最適なウェブコンテンツは何であるか

テレビブラウザの使い方

昔々

Wiimote

未だ未だいいじゃん!

Wii menu

その他

Logitech remote Alternative remote

普通

Common remote controls

既存ページをどうやって簡単にTV化できるか

問題:字が読めへん!

問題:字が読めへん!

解決1: font-size: 2.5em;

注意点:

  • transform: scale(2.5); が良くない
  • テレビのズームが足りない

問題2:字が大きくてデザインがキツそう!

問題2:字が大きくてデザインがキツそう!

解決:不必要な物を取る

注意点:

  • 完全に削除するとユーザが困る

問題3:ナビゲーションがしにくい!

問題3:ナビゲーションがしにくい!

解決: <div tabindex="0">クリック</div>

daniemon.com/tech/utils/spatial.html

注意点:

  • ページ内のリンクが多ければスクロールが難しくなる
  • フォーカスを忘れないでね:a:hover, a:focus { ... }

問題4:文字入力がチョウ大変!

問題4:文字入力がチョウ大変!

解決:諦める。っていうか、必要ないようにする

注意点:

  • ボタンは [0-9]、[OK]、[戻る] しかない

問題5:どうやってテレビだと分かるのか?!

問題5:どうやってテレビだと分かるのか?!

解決その1:メディアクエリ: daniemon.com/tech/utils/webtv.html

解決その2:ユーザに聞きましょう

注意点:

  • 「tv」のCSSメディアタイプが利用されていない

問題6:テレビが遅い

問題6:テレビが遅い

解決:JavaScriptよりCSSがおすすめ。しかもコードを少なめに。

注意点:

  • サイズのアニメーションより「top」や「left」の方が軽い
  • パフォーマンスはPCと全然違う。テレビでテストする

※ 必須項目

ページをどうやって簡単にテストできるか

パソコンから離れる

Using your hand to visualise a TV screen

キーボードやキーパッドを使ってみる

  • 殆どのブラウザ:[Tab] 、 [↑ ↓ ← →] 、 [Enter]
  • Opera < 12.16: [Shift] + [↑ ↓ ← →] 、 [Enter]

エミュレータを使う

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

まず、テレビの利点

  • 殆どの家のリビング・ルームの中央という特等席に置かれる
  • 大きくて明るい画面と高品質のスピーカーを持つ
  • 老いも若も誰でも使い方は知っている
  • 数人が同時に楽しめる

アイディア1:ビデオやオーディオプレイヤー

Vimeo TV app

アイディア2:スライドショー、写真ビューワ

Flickr TV app

アイディア3:スクリーンセーバー

Fireplace screensaver

アイディア4:インテラクティブレッスン

Person doing yoga

アイディア5:急がなくて良いゲーム

Solitaire TV game

アイディア6:マルチスクリーンのアプリ

Simple multiscreen game

おまけ

テレビ用のテンプレート

Web on TV でした。
Thank you!

bit.ly/webtvsuccess

image/svg+xml