Google Developers Summit Tokyo Android TV で実現するリビングルームでのアプリ体験

1. EGAWA Takashi 江川 崇
Google Developer Expert
Android TV で実現する
リビングルームでのアプリ体験
1

2. Android TV とは
Android TV とは何か
— Android TV プラットフォーム
— リファレンスデバイス：Nexus Player
2

3. ● Android 5.0, 5.1 (Lollipop）
○ 開発ツールや SDK は既存のものと共通
○ Android 5.0 の API は 基本すべて利用可
○ Google Castデバイスとして利用可能
● 非搭載の Google 製アプリ
○ Web ブラウザ (Chrome)
○ Google Maps, メール (Gmail), Google+, Hangout...
○ ただし (Chromium) WebView や Google Maps
Android API v2 は利用可（Google Maps Android
API v1 は廃止）
● Platform TV features
○ ホーム画面、音声によるコンテンツ検索機能など
● 製品メーカーによる機能追加
○ テレビ放送受信、映像音声信号外部入力機能
○ ホーム画面のカスタマイズ
○ Web ブラウザ (任意)
○ リモコンなどの操作機器
Android TV =
Android 5.0
– A few Google apps
+ Platform TV features
+ OEM Customization
Cast 受信機能も
内蔵
3
Android TV プラットフォーム概要

4. 4
Nexus Player :
Android TV プラットフォームの参照機種
Remote Controller Device (back)
Powerful Nexus OTT Device
● Intel 1.8GHz processor
● 1GB RAM + 8 GB storage
● USB 2.0
● Wifi
● Included remote for direct interaction
● Optional familiar gaming controller
Streamlined Android
● Android 5.1
● Voice search enabled
日本でも購入可能
HDMI 入力対応テレビ
+ Wi-Fi 環境で利用

5. TV のクリエイティブビジョン
スマホやタブレット向けアプリと比較して、
TV向けアプリに求められること
— Casual
— Cinematic
— Simple
5

7. Casual

8. 01 / 23
8
TVのクリエイティブビジョン
Casual
— Leanback : リビング・ソファ
— 気軽に楽しむ
— 家族や仲間と空間を共有する

10. Cinematic

11. 01 / 23
11
TVのクリエイティブビジョン
Cinematic
— 体験への没入
— コンテンツ重視（全面・中央）
— 不要な情報（UI）の排除

13. Simple

14. 01 / 23
14
TVのクリエイティブビジョン
Simple
— ユーザーは約3 - 4m離れている
タッチしない（できない）
細かな文字を読まない（読めない）
— 最小のステップでの操作
— テキストの代わりに音声や絵

15. TV のユーザーインターフェース
TV向けアプリが考慮すべき、TV 対応 UIの特徴
— 基本
— ナビゲーション・フォーカス・選択
— ホームスクリーンバナー
15
— おすすめ行
— 色彩・書体
— 音声入力・検索

16. 16
TVのユーザーインターフェース
TV 向け UIの基本
● ランドスケープ固定
○ 操作部は左右に置き上下は節約する。
ActionBarは不要。
● フルHD（1920 x 1080 ピクセル）想定
○ 現状、xhdpi想定
● オーバースキャン
○ TVによっては外周に描画しない領域がある。周
囲に5%程度の余白を設ける。
● リモコン操作
○ D-Pad または ゲームコントローラ
○ ViewPager禁止

17. 17
TVのユーザーインターフェース
ナビゲーション, フォーカス, 選択
● D-Pad/ゲームコントローラーでのキー入力操
作
○ 上下左右の四方向に移動が限定
○ 縦横二次元のナビゲーション経路が理
解しやすいように
● フォーカス
○ 常に1つのオブジェクトにフォーカスする
（ユーザーが今どこを操作しているか理
解できるように）

18. 18
TVのユーザーインターフェース
音声入力・検索
● 音声入力の活用
○ 極力文字を入力させない
● 検索インタフェースの提供
○ コンテンツを探す手間を省く
○ アプリ内コンテンツを検索対象に

19. 19
TVのユーザーインターフェース
ホームスクリーンバナー
● アプリとゲームは、いずれもホームスクリー
ン上に専用の領域が設けられ、利用頻度
等で並べ替えられる
○ サイズ: 320 x 180 ピクセル
○ xhdpi リソース
○ アプリ名を含むこと
○ 国際化必須

20. 20
TVのユーザーインターフェース
おすすめ行
● ホームスクリーンの先頭行にはおすすめコンテンツを
示すカードが表示される。
● おすすめするコンテンツの情報をアプリから提供でき
る。
1. 大きなアイコン
2. コンテンツのタイトル
3. テキスト
4. 小さなアイコン
● フォーカスを得ているカードは対応する背景画像を表
示できる。
○ 寸法 2016 x 1134 ピクセル (動きを考慮して
1920 x 1080 に 5% の余裕を持たせたもの)

21. 21
TVのユーザーインターフェース
色彩・書体
書体
● 離れた場所からも読みやすく。細いフォントは
避ける
サイズの最小推奨値は12sp、標準値は18sp
● カードのタイトル: Roboto 長体 16sp
● カードのサブテキスト : Roboto 長体 12sp
● スクリーンのタイトル: Roboto 標準 44sp
● カテゴリーのタイトル : Roboto 長体 20sp
● 詳細なコンテンツのタイトル : Roboto 標準 34sp
● 詳細のサブテキスト: Roboto 標準 14sp
色彩
● 白背景は読みにくく疲れやすい。背景は
ダークに。
● コントラストが過剰に強調されることがある。
○ 微妙な色の違いは消えてしまう。
○ グラデーションなどは避ける。確認して
から使う。
○ 高彩度の色（特に赤、緑、青）は確認し
てから使う。

22. TV 向けアプリ開発
TV向けアプリの開発に必要な基礎知識
— Leanbackライブラリ
— 検索インターフェースの提供
— 方向ナビゲーションの処理
— 動作デバイスのチェック
— ハードウェア機能のチェック
22
— ゲーム
— 再生中カード・MediaSession
— おすすめ行の提供
— メディアの処理
— ライブ TV

23. 23
TV 向けアプリ開発
はじめに
● 基本的にはスマホ・タブレット向けアプリと同じSDK,
IDE (Android Studio) で開発できる。
○ 従来の開発ノウハウが流用できる。
● UI は TV 用に構築し直すべき
○ TV 向けアプリの公開時にはGoogle による事前
の品質審査（主にUI面）が必要
○ 品質審査を通過していないアプリはGoogle
Play には表示されない
○ 別アプリにしてもよいし、既存のアプリを拡張して
もよい。 TV 向け審査が通っていなくとも、従来の
プラットフォーム向けには配信される。
Distributing to Android TV
http://goo.gl/ArPxPx
非公式日本語訳
http://goo.gl/CBbNWb

24. 24
TV向けアプリ開発
Leanbackライブラリ
● TV 向けユーザー体験の実装を支援するサポートライ
ブラリ
○ 従来の v4 サポートライブラリや、v7
RecycleViewを利用した拡張ライブラリ
○ 必須ではないが、利用することでTV 向けUIの実
装が楽に行える
○ メディアスキャン領域の考慮不要
● Leanbackテーマ
○ TV用標準テーマ
<activity
android:name="com.example.android.TvActivity"
android:label="@string/app_name"
android:theme="@style/Theme.Leanback">

25. 25
TV向けアプリ開発
BrowseFragment
● メディアを閲覧可能なUI を提供する基本的なFragment
● RowsFragment : 行要素 / HeadersFragment : ヘッダー要
素を内包する。

26. 26
TV向けアプリ開発
DetailsFragment
● １つのメディアコンテンツの詳細情報を表示するUIを提供する
Fragment

27. 27
TV向けアプリ開発
SearchFragment
● アプリ内検索インタフェースを提供するFragment

28. 28
TV向けアプリ開発
検索インターフェース
● ホームスクリーンへの提供
○ スマホやタブレットと同様の方法
○ （ContentProvider と検索用Activity）
● アプリ内検索機能の提供
○ BrowseFragment クラスを利用している
場合は、この UI の標準部品として検索イン
タフェースを利用可能（レイアウト内に検索
インタフェースのアイコンが表示できる）
○ SearchFragment で検索入力を処理し、
検索結果を表示する
mBrowseFragment = (BrowseFragment)
getFragmentManager().findFragmentById(R.id.browse_fragment);
mBrowseFragment.setOnSearchClickedListener(new View.
OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(BrowseActivity.this, SearchActivity.
class);
startActivity(intent);
}
});
mBrowseFragment.setAdapter(buildAdapter());

29. 29
TV向けアプリ開発
方向ナビゲーションの処理
<TextView android:id="@+id/Category1"
android:focusable="true"
android:nextFocusDown="@+id/Category2"
android:nextFocusUp="@+id/Category3"
android:nextFocusRight="@+id/Category4"
android:nextFocusLeft="@+id/Category5">
Items Status
KEYCODE_DPAD_UP 上ボタン フォーカスを上に移動
KEYCODE_DPAD_DOWN 下ボタン フォーカスを下に移動
KEYCODE_DPAD_LEFT 左ボタン フォーカスを左に移動
KEYCODE_DPAD_RIGHT 右ボタン フォーカスを右に移動
KEYCODE_DPAD_CENTER 中央ボタン 決定、確定
KEYCODE_BUTTON_A A ボタン 決定、確定
KEYCODE_BUTTON_B B ボタン キャンセル、戻る
KEYCODE_BACK BACK ボタン キャンセル、戻る
KEYCODE_HOME HOME ボタン Android TV ホーム画面に戻る
Items Focus
nextFocusDown 下操作時
nextFocusUp 上操作時
nextFocusRight 右操作時
nextFocusLeft 左操作時

30. 30
TV向けアプリ開発
動作デバイスのチェック
● UiModeManagerを使い、TV デバイスで動作しているかをチェックする
UiModeManager uiModeManager = (UiModeManager) getSystemService(UI_MODE_SERVICE);
if (uiModeManager.getCurrentModeType() == Configuration.UI_MODE_TYPE_TELEVISION) {
Log.d(TAG, "Running on a TV Device")
} else {
Log.d(TAG, "Running on a non-TV Device")
}

31. 31
TV向けアプリ開発
ハードウェア機能のチェック
● TVでは標準サポートされな
い機能
● 無いことを前提に作る
● 共通アプリの場合は、機能
を必須としない旨を宣言
し、実行時に機能の有無を
チェックする
機能 機能ディスクリプタ
タッチスクリーン android.hardware.touchscreen
タッチスクリーンエミュレータ android.hardware.faketouch
通話 android.hardware.telephony
カメラ android.hardware.camera
Bluetooth android.hardware.bluetooth
Near Field Communications (NFC) android.hardware.nfc
GPS android.hardware.location.gps
マイク
※コントローラーのマイクはサポート
android.hardware.microphone
センサー android.hardware.sensor
<uses-feature android:name="android.hardware.
telephony"
android:required="false"/>
// 電話機能が利用可能かをチェックする
if (getPackageManager().hasSystemFeature("android.hardware.telephony")) {
Log.d("HardwareFeatureTest", "Device can make phone calls");

32. 32
TV向けアプリ開発
ゲーム
● ホームスクリーンは、アプリと
ゲームを別々に表示する
<uses-feature android:name="android.hardware.gamepad"/>
<application
...
android:isGame="true"
...
>
● ゲームコントローラーを必須としてもよい（方向パッドで遊べ
なくともよい）が、Android に互換性のあるボタンのみで遊
べる必要がある
○ 詳細は公式ドキュメントのHandling Controller
Actions ( http://goo.gl/SUlVpV) を参照
● Google Play Game Services
○ 実績
○ サインイン
○ セーブ
○ マルチプレイ

33. 33
TV向けアプリ開発
再生中カード・MediaSession
● MediaBrowserService
○ アプリ画面終了後もバックグラウンドで再生を継
続できる
● 再生中カード
○ バックグラウンドで継続中のアプリが、再生中メ
ディアの停止や次のメディアへの切り替え手段を
提供するためのUI
mSession = new MediaSession(this, "MusicService");
mSession.setCallback(new MediaSessionCallback());
mSession.setFlags(MediaSession.FLAG_HANDLES_MEDIA_BUTTONS |
MediaSession.FLAG_HANDLES_TRANSPORT_CONTROLS);
// for the MediaBrowserService
setSessionToken(mSession.getSessionToken());
・・・
if (!mSession.isActive()) {
mSession.setActive(true);
private void updatePlaybackState() {
long position = PlaybackState.PLAYBACK_POSITION_UNKNOWN;
if (mMediaPlayer != null && mMediaPlayer.isPlaying()) {
position = mMediaPlayer.getCurrentPosition();
}
PlaybackState.Builder stateBuilder = new PlaybackState.Builder()
.setActions(getAvailableActions());
stateBuilder.setState(mState, position, 1.0f);
mSession.setPlaybackState(stateBuilder.build());
}
private long getAvailableActions() {
long actions = PlaybackState.ACTION_PLAY |
PlaybackState.ACTION_PLAY_FROM_MEDIA_ID |
PlaybackState.ACTION_PLAY_FROM_SEARCH;
if (mPlayingQueue == null || mPlayingQueue.isEmpty()) {
return actions;
}
・・・
}

34. 34
TV向けアプリ開発
おすすめ行の提供
● IntentServiceを継承し、バックグラウンドからお
すすめコンテンツを提供
○ CATEGORY_RECOMMENDATIONを設
定したNotificationとして通知する
● おすすめ行に表示する順序は指定できない
○ あくまでもユーザーの視聴動向によって順
序が決まる
Notification notification = new NotificationCompat.
BigPictureStyle(
new NotificationCompat.Builder(mContext)
.setContentTitle(mTitle)
.setContentText(mDescription)
.setPriority(mPriority)
.setLocalOnly(true)
.setOngoing(true) .setColor(mContext.
getResources().getColor(R.color.fastlane_background))
.setCategory(Notification.CATEGORY_RECOMMENDATION)
.setLargeIcon(image)
.setSmallIcon(mSmallIcon)
.setContentIntent(mIntent)
.setExtras(extras))
.build();
mNotificationManager.notify(mId, notification);
}

35. 35
TV向けアプリ開発
メディアの処理
● 静止画
○ com.squareup.picasso.Picasso などが楽
https://github.com/square/picasso
● 動画配信・再生
○ MediaPlayer ( + DrmManagerClient)
○ ExoPlayer
○ YouTube IFrame Player API (WebView)
○ 自作 など
Android TV プラットフォームの標準サポート
(Android 5.0 ベース)
プロトコル
● RTSP (RTP, SDP)
● HTTP/HTTPS progressive streaming
● HLS (HTTP/HTTPS live streaming) Draft Protocol
○ MPEG-2 TS media files, Protocol version 3
ビデオ コーデック
● H.263 - 3GPP (.3gp), MPEG-4 (.mp4)
● H.264 AVC - Baseline Profile (BP) - 3GPP (.3gp),
MPEG-4 (.mp4), MPEG-TS (.ts, AAC audio only, not
seekable)
● MPEG-4 SP - 3GPP (.3gp)
● VP8 - WebM (.webm), Matroska (.mkv)
● H.265/HEVC
DRM
● Widevine - L1 security
● PlayReady (要検証)
ExoPlayer
YouTube, Google Play Movies などで利用実績がある
オープンソースライブラリ
https://github.com/google/ExoPlayer

36. 36
TV向けアプリ開発
ライブ TV
● 従来の TV 配信機能に対するアクセス手段を提
供するTV 入力フレームワーク
○ android.media.tv
○ チャンネルや番組表の取得・操作
○ 特定のチャンネルやTV コンテンツに対す
る操作（再生・停止）
● 幅広い TV の入力ソース（ハードウェアリソー
ス・ソフトウェアリソース）に対する統一的なア
クセス手段の提供
● ユーザーが透過的に利用できる統一UIの提
供

37. 37
TV向けアプリ開発
参考となる情報
● サンプルプログラム Android Studio で、New Project -> TV を選ぶ
● Building Apps for TV https://developer.android.com/training/tv/index.html
● Desiging for Android TV http://developer.android.com/design/tv/index.html
● TV App Quality
http://developer.android.com/distribute/essentials/quality/tv.html
● Distributing to Android TV
https://developer.android.com/distribute/googleplay/tv.html
● DevBytes: Android TV: Using the Leanback library
https://www.youtube.com/watch?v=72K1VhjoL98
● 非公式日本語訳
https://sites.google.com/site/buildingappsfortv/
https://sites.google.com/site/designingforandroidtv/

38. 01 / 23
38
Enjoy TV Development

39. Thanks !
EGAWA Takashi
g+ — plus.google.com/u/0/+TakashiEGAWA/
twitter — @t_egg
www — smartiums.com
39