google developers summit android tv...
TRANSCRIPT
EGAWA Takashi 江川 崇Google Developer Expert
Android TV で実現するリビングルームでのアプリ体験
1
Android TV とは Android TV とは何か
— Android TV プラットフォーム
— リファレンスデバイス：Nexus Player
2
● 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
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 環境で利用
TV のクリエイティブビジョン
スマホやタブレット向けアプリと比較して、TV向けアプリに求められること
— Casual
— Cinematic
— Simple
5
Casual
01 / 238
TVのクリエイティブビジョン
Casual
— Leanback : リビング・ソファ
— 気軽に楽しむ
— 家族や仲間と空間を共有する
Cinematic
01 / 2311
TVのクリエイティブビジョン
Cinematic
— 体験への没入
— コンテンツ重視（全面・中央）
— 不要な情報（UI）の排除
Simple
01 / 2314
TVのクリエイティブビジョン
Simple
— ユーザーは約3 - 4m離れている
タッチしない（できない）
細かな文字を読まない（読めない）
— 最小のステップでの操作
— テキストの代わりに音声や絵
TV のユーザーインターフェース
TV向けアプリが考慮すべき、TV 対応 UIの特徴
— 基本
— ナビゲーション・フォーカス・選択
— ホームスクリーンバナー
15
— おすすめ行
— 色彩・書体
— 音声入力・検索
16
TVのユーザーインターフェース
TV 向け UIの基本
● ランドスケープ固定○ 操作部は左右に置き上下は節約する。
ActionBarは不要。
● フルHD（1920 x 1080 ピクセル）想定○ 現状、xhdpi想定
● オーバースキャン○ TVによっては外周に描画しない領域がある。周
囲に5%程度の余白を設ける。
● リモコン操作○ D-Pad または ゲームコントローラ○ ViewPager禁止
17
TVのユーザーインターフェース
ナビゲーション, フォーカス, 選択
● D-Pad/ゲームコントローラーでのキー入力操作○ 上下左右の四方向に移動が限定○ 縦横二次元のナビゲーション経路が理
解しやすいように
● フォーカス○ 常に1つのオブジェクトにフォーカスする
（ユーザーが今どこを操作しているか理解できるように）
18
TVのユーザーインターフェース
音声入力・検索
● 音声入力の活用
○ 極力文字を入力させない
● 検索インタフェースの提供
○ コンテンツを探す手間を省く
○ アプリ内コンテンツを検索対象に
19
TVのユーザーインターフェース
ホームスクリーンバナー
● アプリとゲームは、いずれもホームスクリーン上に専用の領域が設けられ、利用頻度等で並べ替えられる
○ サイズ: 320 x 180 ピクセル○ xhdpi リソース○ アプリ名を含むこと○ 国際化必須
20
TVのユーザーインターフェース
おすすめ行
● ホームスクリーンの先頭行にはおすすめコンテンツを示すカードが表示される。
● おすすめするコンテンツの情報をアプリから提供できる。
1. 大きなアイコン
2. コンテンツのタイトル
3. テキスト
4. 小さなアイコン
● フォーカスを得ているカードは対応する背景画像を表示できる。○ 寸法 2016 x 1134 ピクセル (動きを考慮して
1920 x 1080 に 5% の余裕を持たせたもの)
21
TVのユーザーインターフェース
色彩・書体書体
● 離れた場所からも読みやすく。細いフォントは
避ける
サイズの最小推奨値は12sp、標準値は18sp
● カードのタイトル : Roboto 長体 16sp● カードのサブテキスト : Roboto 長体 12sp● スクリーンのタイトル : Roboto 標準 44sp● カテゴリーのタイトル : Roboto 長体 20sp● 詳細なコンテンツのタイトル : Roboto 標準 34sp● 詳細のサブテキスト : Roboto 標準 14sp
色彩
● 白背景は読みにくく疲れやすい。背景は
ダークに。
● コントラストが過剰に強調されることがある。
○ 微妙な色の違いは消えてしまう。
○ グラデーションなどは避ける。確認して
から使う。
○ 高彩度の色（特に 赤、緑、青）は確認し
てから使う。
TV 向けアプリ開発
TV向けアプリの開発に必要な基礎知識
— Leanbackライブラリ
— 検索インターフェースの提供
— 方向ナビゲーションの処理
— 動作デバイスのチェック
— ハードウェア機能のチェック
22
— ゲーム
— 再生中カード・MediaSession
— おすすめ行の提供
— メディアの処理
— ライブ TV
23
TV 向けアプリ開発
はじめに
● 基本的にはスマホ・タブレット向けアプリと同じ SDK, IDE (Android Studio) で開発できる。○ 従来の開発ノウハウが流用できる。
● UI は TV 用に構築し直すべき○ TV 向けアプリの公開時には Google による事前
の品質審査（主にUI面）が必要○ 品質審査を通過していないアプリは Google
Play には表示されない○ 別アプリにしてもよいし、既存のアプリを拡張して
もよい。 TV 向け審査が通っていなくとも、従来のプラットフォーム向けには配信される。
Distributing to Android TVhttp://goo.gl/ArPxPx非公式日本語訳
http://goo.gl/CBbNWb
24
TV向けアプリ開発
Leanbackライブラリ
● TV 向けユーザー体験の実装を支援するサポートライブラリ○ 従来の v4 サポートライブラリや、v7
RecycleViewを利用した拡張ライブラリ○ 必須ではないが、利用することで TV 向けUIの実
装が楽に行える○ メディアスキャン領域の考慮不要
● Leanbackテーマ○ TV用標準テーマ
v4 supportrecyclerview
<activity
android:name="com.example.android.TvActivity"
android:label="@string/app_name"
android:theme="@style/Theme.Leanback">
25
TV向けアプリ開発
BrowseFragment
● メディアを閲覧可能な UI を提供する基本的なFragment● RowsFragment : 行要素 / HeadersFragment : ヘッダー要
素を内包する。
v4 supportrecyclerview
26
TV向けアプリ開発
DetailsFragment
● １つのメディアコンテンツの詳細情報を表示するUIを提供する Fragment
v4 supportrecyclerview
27
TV向けアプリ開発
SearchFragment
● アプリ内検索インタフェースを提供する Fragment
v4 supportrecyclerview
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
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
TV向けアプリ開発
動作デバイスのチェック
● UiModeManagerを使い、TV デバイスで動作しているかをチェックする
v4 supportrecyclerview
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
TV向けアプリ開発
ハードウェア機能のチェック
● TVでは標準サポートされない機能
● 無いことを前提に作る● 共通アプリの場合は、機能
を必須としない旨を宣言し、実行時に機能の有無をチェックする
v4 supportrecyclerview
機能 機能ディスクリプタ
タッチスクリーン 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
TV向けアプリ開発
ゲーム
● ホームスクリーンは、アプリとゲームを別々に表示する
v4 supportrecyclerview
<uses-feature android:name="android.hardware.gamepad"/>
<application
...
android:isGame="true"
...
>
● ゲームコントローラーを必須としてもよい（方向パッドで遊べなくともよい）が、Android に互換性のあるボタンのみで遊べる必要がある○ 詳細は公式ドキュメントの Handling Controller
Actions ( http://goo.gl/SUlVpV) を参照
● Google Play Game Services○ 実績
○ サインイン
○ セーブ
○ マルチプレイ
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
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
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 (要検証)
ExoPlayerYouTube, Google Play Movies などで利用実績がある
オープンソースライブラリ
https://github.com/google/ExoPlayer
36
TV向けアプリ開発
ライブ TV● 従来の TV 配信機能に対するアクセス手段を提
供するTV 入力フレームワーク○ android.media.tv○ チャンネルや番組表の取得・操作
○ 特定のチャンネルや TV コンテンツに対す
る操作（再生・停止）
● 幅広い TV の入力ソース（ハードウェアリソー
ス・ソフトウェアリソース）に対する統一的なア
クセス手段の提供
● ユーザーが透過的に利用できる統一UIの提
供
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/
01 / 2338
Enjoy TV Development
Thanks !EGAWA Takashi
g+ — plus.google.com/u/0/+TakashiEGAWA/twitter — @t_eggwww — smartiums.com
39