Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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 で実現するリビングルームでのアプリ体験
Prochain SlideShare
Chargement dans…5
×

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

3 724 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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

×