Android
AndroidDay 12

Android TV入門

More than 3 years have passed since last update.

この記事はAndroid Advent Calender 2014の12日目の記事です。
まさかのAndroid TVについて語ります。

ゴール

  • Android TVが何か理解する
  • Android TVのデザイン思想について一通り理解する
  • Android TV開発に必要なライブラリやリンクについて把握する

書いてある事

  • What is Android TV
  • Android TV Design
  • Android TV Development
    • 長くなるのでLeanbackの紹介のみ
  • Link

What is Android TV

Google IO 2014にて発表されたTV向けのAndroidプラットフォームです。
TVと聞くとGoogle TVという黒歴史が頭をかすめますが,Googleの中では無かった事になっているようです。
モバイル以外のプラットフォームだとAndroid Wearの注目度が高いですが,日本でもSONYが2015年よりテレビに全面採用する事が確定しており,流通する可能性があります。
あと,Google PlayからNexus Playerを購入する事ができます。

Design

Designing for Android TV

以下のページにてAndroid TVのデザイン思想が公開されています。

Mustで満たさないといけない要件に関しては,TV App Qualityに詳細が記載されています。
また,Android TVはGoogle Play公開時にレビューが必要(最初だけ?)なのでその辺の詳細はDistributing to Android TVにまとめられています。

Home Screen

上から, 検索, レコメンデーション, アプリ一覧, 設定 へのアクセスが提供されます。

image

Search

アプリを検索に対応させる事で,ホーム画面からの検索を実行できるようになります。この検索は通常のGoogle検索含めた横断的な検索となります。

image

詳細は下記を読んでください。

Recommendations

image

レコメンデーションAndroid TVの中心機能であり,ユーザーがコンテンツに素早くアクセスする事を可能にします。
レコメンデーションの並び順はユーザーの行動や利用頻度によってソートされて表示されます。
アプリではNotificationを利用してレコメンデーションを提供することができます。詳細は下記をご覧下さい。
Recommending TV Content | Android Developers

Apps and Games

ユーザーの利用頻度を元にソートされています。
image

Settings

一番下に設定画面へのリンクがあります。
image

Creative Vision for TV

Android TVアプリを開発する上で根底を流れる思想を紹介します。

Casual Consumption

TVはPCやモバイルではありません。
ユーザーはTVの電源を入れて時にすぐコンテンツを楽しみたいはずです。1,2クリック程度でアクセスできるような設計としてください。

Cinematic Experience

ユーザーに没頭できる体験を提供しましょう。
直感的なUI,画面にできるだけ多くのコンテンツを表示させる事を意識しましょう。
画像やモーション、音を利用してください。長い文章で説明するのはやめましょう。

Simplicity

コンテンツまでの導線を可能な限り短くしてください。
テキスト入力は可能な限り避け、仕方ない場合は音声入力を利用しましょう。

UI Patterns for TV

推奨されるデザインパターンに関して紹介します。

Navigation, Focus and Selection

ユーザーは十字キー(リモコン)を利用してTVを操作します。
ListやGridを利用し上下左右の移動に対応できるデザインを組んでください。
また、スケール,影,透明度,アニメーションを利用して現在のフォーカス位置をユーザーに分かるようにしてください。

image

Icons

リソースに関しては各種寸法が決まっています。

Banners

ホームスクリーンのアプリ一覧に表示されるアイコン。

  • 320x180px xhdpi resource
  • 画像に説明するテキストも含める。多言語サポートは各言語毎に画像を用意する。

実装に関する説明はProvide a home screen bannerを読みましょう。

Recommendation Icons

image

  • 16x16 dp
  • 白色で背景透過の.png
  • センタリングされていること

アイコンは低彩度化、併せて表示されることがある

Background Images

背景は情報やブランディングの観点からとても重要です。
v17 Leanback support libraryはフォーカスが変わるタイミングで背景を更新するためのAPIを提供しています。
背景は1920x1080pxでフルカラーである必要があります。

透過不可。サイズが異なる場合は自動スケールされる。

image

Audio Feedback

TVでのサウンドはとても重要です。
ユーザーはTVにのみ集中しているわけではない(ながら見)ので,文字メッセージの代わりに音声でユーザーに通知する事を考慮すべきです。例えば,リストの終端や想定しない領域にフォーカスした場合にも音声でユーザーに知らせましょう。

Style for TV

Coolなアプリを作る為のガイドライン。

Layouts

  • TVは常に横向きなのでlandscapeレイアウトを活用してください。
  • アセットはFull HD(1920x1080px)に最適化してください。
  • ナビゲーション領域左か右に配置し上下はコンテンツ領域としてください。
  • セクションで区切られたUIを作成するためにFragmentを利用してください。
  • GridViewよりListViewを利用してください。
  • レイアウト間に十分なマージンを設けてください。

Overscan

一部のTVにはオーバースキャンと呼ばれるコンテンツが表示されない領域がある為,10%のマージンを設ける必要があります。マージンは画面上下27px、画面左右48pxとなります。

image

Color

TVのカラーレンダリングはPCモニタやモバイル端末とくらべて不正確です。

  • 画面の広い領域で純粋な白を使う事は避けましょう。
  • 彩度の高い色(赤,緑,青)を重要な箇所で利用する場合は検討を重ねてください。
  • 極端に暗い色や濁った色を使用しないようにしてください。

Typography

文字はTVを見る距離からでも視認できるようなサイズにします。
最小でも12sp、デフォルトのフォントサイズは18spであるべきです。以下は推奨されるガイドラインです。
細い書体は読みづらくなる端末がある為,なるべく避けてください。

  • Card Title: Roboto Condensed 16sp
  • Card Subtext: Roboto Condensed 12sp
  • Browse Screen Title: Roboto Regular 44sp
  • Browse Category Title: Roboto Condensed 20sp
  • Details Content Titles: Roboto Regular 34sp
  • Details Subtext: Roboto Regular 14sp

Text

ユーザーはTVから離れた場所でアプリを利用するため、テキストを多用しないでください。
以下のヒントに従ってください。

  • ユーザーが素早く視認できる粒度で分割する
  • 暗い背景に明るいテキストを利用すると読みやすい
  • sans-serifフォントやアンチエイリアスを使用する
  • フォントのサイズ指定には相対サイズを利用する

Development

長々とAndroid TVのデザイン思想について説明しました。
開発に関して書こうと思いましたが,長くなりすぎるので別記事で書きたいと思っています。

自分でやりたい人は公式ドキュメントを読みましょう。

サンプルを動かすだけであれば,Android Studioのプロジェクト作成からプロジェクトが作れるので,Android TVエミュレータに突っ込んで動かしてみましょう。

image

Leanback Library

Support Libraryにandroid.support.v17.leanbackパッケージが追加されており,TV向けのAPIを提供しています。
代表的なものを挙げると,

  • BrowseFragment - カテゴリ及びメディアアイテムの行を参照するための主要なレイアウトを作成する。

image

  • DetailsFragment - 詳細画面を作成する為のラッパーFragment。

image

  • PlaybackOverlayFragment - プレイバックコントロールや関連コンテンツを表示する。DetailsFragmentのサブクラス。
  • SearchFragment - 検索をハンドルするFragment。検索リクエストを受け取り SearchResultProviderというクラスにデリゲートする。SearchResultProviderは検索結果をSearchFragmentに返却し,RowFragmentに描画する。

インストールはGradleを用いて以下の用に実施します。

com.android.support:leanback-v17:21.0.+

Link

Android TVを開発する上で参考になりそうなリンクをまとめます。

公式

GitHub

Blog

Android TVで一発当てるぞ!