Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
4
Nexus Player :
Android TV プラットフォームの参照機種
Remote Controller Device (back)
Powerful Nexus OTT Device
● Intel 1.8GHz process...
TV のクリエイティブビジョン
スマホやタブレット向けアプリと比較して、
TV向けアプリに求められること
— Casual
— Cinematic
— Simple
5
Casual
01 / 23
8
TVのクリエイティブビジョン
Casual
— Leanback : リビング・ソファ
— 気軽に楽しむ
— 家族や仲間と空間を共有する
Cinematic
01 / 23
11
TVのクリエイティブビジョン
Cinematic
— 体験への没入
— コンテンツ重視(全面・中央)
— 不要な情報(UI)の排除
Simple
01 / 23
14
TVのクリエイティブビジョン
Simple
— ユーザーは約3 - 4m離れている
タッチしない(できない)
細かな文字を読まない(読めない)
— 最小のステップでの操作
— テキストの代わりに音声や絵
TV のユーザーインターフェース
TV向けアプリが考慮すべき、TV 対応 UIの特徴
— 基本
— ナビゲーション・フォーカス・選択
— ホームスクリーンバナー
15
— おすすめ行
— 色彩・書体
— 音声入力・検索
16
TVのユーザーインターフェース
TV 向け UIの基本
● ランドスケープ固定
○ 操作部は左右に置き上下は節約する。
ActionBarは不要。
● フルHD(1920 x 1080 ピクセル)想定
○ 現状、xhdpi想定
● オーバ...
17
TVのユーザーインターフェース
ナビゲーション, フォーカス, 選択
● D-Pad/ゲームコントローラーでのキー入力操
作
○ 上下左右の四方向に移動が限定
○ 縦横二次元のナビゲーション経路が理
解しやすいように
● フォーカス
○ ...
18
TVのユーザーインターフェース
音声入力・検索
● 音声入力の活用
○ 極力文字を入力させない
● 検索インタフェースの提供
○ コンテンツを探す手間を省く
○ アプリ内コンテンツを検索対象に
19
TVのユーザーインターフェース
ホームスクリーンバナー
● アプリとゲームは、いずれもホームスクリー
ン上に専用の領域が設けられ、利用頻度
等で並べ替えられる
○ サイズ: 320 x 180 ピクセル
○ xhdpi リソース
○ アプ...
20
TVのユーザーインターフェース
おすすめ行
● ホームスクリーンの先頭行にはおすすめコンテンツを
示すカードが表示される。
● おすすめするコンテンツの情報をアプリから提供でき
る。
1. 大きなアイコン
2. コンテンツのタイトル
3....
21
TVのユーザーインターフェース
色彩・書体
書体
● 離れた場所からも読みやすく。細いフォントは
  避ける
  サイズの最小推奨値は12sp、標準値は18sp
● カードのタイトル: Roboto 長体 16sp
● カードのサブテキス...
TV 向けアプリ開発
TV向けアプリの開発に必要な基礎知識
— Leanbackライブラリ
— 検索インターフェースの提供
— 方向ナビゲーションの処理
— 動作デバイスのチェック
— ハードウェア機能のチェック
22
— ゲーム
— 再生中カ...
23
TV 向けアプリ開発
はじめに
● 基本的にはスマホ・タブレット向けアプリと同じSDK,
IDE (Android Studio) で開発できる。
○ 従来の開発ノウハウが流用できる。
● UI は TV 用に構築し直すべき
○ TV 向...
24
TV向けアプリ開発
Leanbackライブラリ
● TV 向けユーザー体験の実装を支援するサポートライ
ブラリ
○ 従来の v4 サポートライブラリや、v7
RecycleViewを利用した拡張ライブラリ
○ 必須ではないが、利用すること...
25
TV向けアプリ開発
BrowseFragment
● メディアを閲覧可能なUI を提供する基本的なFragment
● RowsFragment : 行要素 / HeadersFragment : ヘッダー要
素を内包する。
26
TV向けアプリ開発
DetailsFragment
● 1つのメディアコンテンツの詳細情報を表示するUIを提供する
Fragment
27
TV向けアプリ開発
SearchFragment
● アプリ内検索インタフェースを提供するFragment
28
TV向けアプリ開発
検索インターフェース
● ホームスクリーンへの提供
○ スマホやタブレットと同様の方法
○ (ContentProvider と検索用Activity)
● アプリ内検索機能の提供
○ BrowseFragment ク...
29
TV向けアプリ開発
方向ナビゲーションの処理
<TextView android:id="@+id/Category1"
android:focusable="true"
android:nextFocusDown="@+id/Categ...
30
TV向けアプリ開発
動作デバイスのチェック
● UiModeManagerを使い、TV デバイスで動作しているかをチェックする
UiModeManager uiModeManager = (UiModeManager) getSystem...
31
TV向けアプリ開発
ハードウェア機能のチェック
● TVでは標準サポートされな
い機能
● 無いことを前提に作る
● 共通アプリの場合は、機能
を必須としない旨を宣言
し、実行時に機能の有無を
チェックする
機能 機能ディスクリプタ
タッ...
32
TV向けアプリ開発
ゲーム
● ホームスクリーンは、アプリと
ゲームを別々に表示する
<uses-feature android:name="android.hardware.gamepad"/>
<application
...
and...
33
TV向けアプリ開発
再生中カード・MediaSession
● MediaBrowserService
○ アプリ画面終了後もバックグラウンドで再生を継
続できる
● 再生中カード
○ バックグラウンドで継続中のアプリが、再生中メ
ディア...
34
TV向けアプリ開発
おすすめ行の提供
● IntentServiceを継承し、バックグラウンドからお
すすめコンテンツを提供
○ CATEGORY_RECOMMENDATIONを設
定したNotificationとして通知する
● おすす...
35
TV向けアプリ開発
メディアの処理
● 静止画
○ com.squareup.picasso.Picasso などが楽
https://github.com/square/picasso
● 動画配信・再生
○ MediaPlayer (...
36
TV向けアプリ開発
ライブ TV
● 従来の TV 配信機能に対するアクセス手段を提
供するTV 入力フレームワーク
○ android.media.tv
○ チャンネルや番組表の取得・操作
○ 特定のチャンネルやTV コンテンツに対す
...
37
TV向けアプリ開発
参考となる情報
● サンプルプログラム Android Studio で、New Project -> TV を選ぶ
● Building Apps for TV https://developer.android.c...
01 / 23
38
Enjoy TV Development
Thanks !
EGAWA Takashi
g+ — plus.google.com/u/0/+TakashiEGAWA/
twitter — @t_egg
www — smartiums.com
39
Google Developers Summit   Android TV で実現するリビングルームでのアプリ体験
Google Developers Summit   Android TV で実現するリビングルームでのアプリ体験
Google Developers Summit   Android TV で実現するリビングルームでのアプリ体験
Upcoming SlideShare
Loading in …5
×

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

3,836 views

Published on

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

Published in: Technology
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. EGAWA Takashi 江川 崇 Google Developer Expert Android TV で実現する リビングルームでのアプリ体験 1
  2. 2. Android TV とは Android TV とは何か — Android TV プラットフォーム — リファレンスデバイス:Nexus Player 2
  3. 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. 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. 5. TV のクリエイティブビジョン スマホやタブレット向けアプリと比較して、 TV向けアプリに求められること — Casual — Cinematic — Simple 5
  6. 6. Casual
  7. 7. 01 / 23 8 TVのクリエイティブビジョン Casual — Leanback : リビング・ソファ — 気軽に楽しむ — 家族や仲間と空間を共有する
  8. 8. Cinematic
  9. 9. 01 / 23 11 TVのクリエイティブビジョン Cinematic — 体験への没入 — コンテンツ重視(全面・中央) — 不要な情報(UI)の排除
  10. 10. Simple
  11. 11. 01 / 23 14 TVのクリエイティブビジョン Simple — ユーザーは約3 - 4m離れている タッチしない(できない) 細かな文字を読まない(読めない) — 最小のステップでの操作 — テキストの代わりに音声や絵
  12. 12. TV のユーザーインターフェース TV向けアプリが考慮すべき、TV 対応 UIの特徴 — 基本 — ナビゲーション・フォーカス・選択 — ホームスクリーンバナー 15 — おすすめ行 — 色彩・書体 — 音声入力・検索
  13. 13. 16 TVのユーザーインターフェース TV 向け UIの基本 ● ランドスケープ固定 ○ 操作部は左右に置き上下は節約する。 ActionBarは不要。 ● フルHD(1920 x 1080 ピクセル)想定 ○ 現状、xhdpi想定 ● オーバースキャン ○ TVによっては外周に描画しない領域がある。周 囲に5%程度の余白を設ける。 ● リモコン操作 ○ D-Pad または ゲームコントローラ ○ ViewPager禁止
  14. 14. 17 TVのユーザーインターフェース ナビゲーション, フォーカス, 選択 ● D-Pad/ゲームコントローラーでのキー入力操 作 ○ 上下左右の四方向に移動が限定 ○ 縦横二次元のナビゲーション経路が理 解しやすいように ● フォーカス ○ 常に1つのオブジェクトにフォーカスする (ユーザーが今どこを操作しているか理 解できるように)
  15. 15. 18 TVのユーザーインターフェース 音声入力・検索 ● 音声入力の活用 ○ 極力文字を入力させない ● 検索インタフェースの提供 ○ コンテンツを探す手間を省く ○ アプリ内コンテンツを検索対象に
  16. 16. 19 TVのユーザーインターフェース ホームスクリーンバナー ● アプリとゲームは、いずれもホームスクリー ン上に専用の領域が設けられ、利用頻度 等で並べ替えられる ○ サイズ: 320 x 180 ピクセル ○ xhdpi リソース ○ アプリ名を含むこと ○ 国際化必須
  17. 17. 20 TVのユーザーインターフェース おすすめ行 ● ホームスクリーンの先頭行にはおすすめコンテンツを 示すカードが表示される。 ● おすすめするコンテンツの情報をアプリから提供でき る。 1. 大きなアイコン 2. コンテンツのタイトル 3. テキスト 4. 小さなアイコン ● フォーカスを得ているカードは対応する背景画像を表 示できる。 ○ 寸法 2016 x 1134 ピクセル (動きを考慮して 1920 x 1080 に 5% の余裕を持たせたもの)
  18. 18. 21 TVのユーザーインターフェース 色彩・書体 書体 ● 離れた場所からも読みやすく。細いフォントは   避ける   サイズの最小推奨値は12sp、標準値は18sp ● カードのタイトル: Roboto 長体 16sp ● カードのサブテキスト : Roboto 長体 12sp ● スクリーンのタイトル: Roboto 標準 44sp ● カテゴリーのタイトル : Roboto 長体 20sp ● 詳細なコンテンツのタイトル : Roboto 標準 34sp ● 詳細のサブテキスト: Roboto 標準 14sp 色彩 ● 白背景は読みにくく疲れやすい。背景は ダークに。 ● コントラストが過剰に強調されることがある。 ○ 微妙な色の違いは消えてしまう。 ○ グラデーションなどは避ける。確認して から使う。 ○ 高彩度の色(特に赤、緑、青)は確認し てから使う。
  19. 19. TV 向けアプリ開発 TV向けアプリの開発に必要な基礎知識 — Leanbackライブラリ — 検索インターフェースの提供 — 方向ナビゲーションの処理 — 動作デバイスのチェック — ハードウェア機能のチェック 22 — ゲーム — 再生中カード・MediaSession — おすすめ行の提供 — メディアの処理 — ライブ TV
  20. 20. 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
  21. 21. 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">
  22. 22. 25 TV向けアプリ開発 BrowseFragment ● メディアを閲覧可能なUI を提供する基本的なFragment ● RowsFragment : 行要素 / HeadersFragment : ヘッダー要 素を内包する。
  23. 23. 26 TV向けアプリ開発 DetailsFragment ● 1つのメディアコンテンツの詳細情報を表示するUIを提供する Fragment
  24. 24. 27 TV向けアプリ開発 SearchFragment ● アプリ内検索インタフェースを提供するFragment
  25. 25. 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());
  26. 26. 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 左操作時
  27. 27. 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") }
  28. 28. 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");
  29. 29. 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 ○ 実績 ○ サインイン ○ セーブ ○ マルチプレイ
  30. 30. 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; } ・・・ }
  31. 31. 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); }
  32. 32. 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
  33. 33. 36 TV向けアプリ開発 ライブ TV ● 従来の TV 配信機能に対するアクセス手段を提 供するTV 入力フレームワーク ○ android.media.tv ○ チャンネルや番組表の取得・操作 ○ 特定のチャンネルやTV コンテンツに対す る操作(再生・停止) ● 幅広い TV の入力ソース(ハードウェアリソー ス・ソフトウェアリソース)に対する統一的なア クセス手段の提供 ● ユーザーが透過的に利用できる統一UIの提 供
  34. 34. 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/
  35. 35. 01 / 23 38 Enjoy TV Development
  36. 36. Thanks ! EGAWA Takashi g+ — plus.google.com/u/0/+TakashiEGAWA/ twitter — @t_egg www — smartiums.com 39

×