Slide 1
Slide 1 text
FireTV ことはじめ
Cookpad.apk #1 2018-08-21
Slide 2
Slide 2 text
自己紹介
- 柴原 直也
- メディアプロダクト開発部
- 2018新卒入社
- Twitter: 梨原 @nshiba310
Slide 3
Slide 3 text
今日話すこと
- FireTV / Android TV 向けアプリ開発の基本的なこと
- Fire App Builder
- Leanback Library
- TV 向けアプリ開発で気をつけないといけないこと
Slide 4
Slide 4 text
Fire TV
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
FireTV
- Amazon から発売している TV 向け端末
- Apple TVなどが類似品
- 現在は第3世代まで出ている
- https://www.amazon.co.jp/gp/product/B01ETRGGYI/
- 中身の OS はほぼ Android
- 第1, 2世代は Android 5.1 (Lollipop、APIレベル22)
- 第3世代は Android 7.1 (Nougat、APIレベル25)
Slide 7
Slide 7 text
FireTV
- FireTV 向けアプリを作るにはだいたい2種類ある
- 公式フレームワークの Fire App Builder を使う
- https://developer.amazon.com/ja/docs/fire-app-builder/overview.html
- https://github.com/amzn/fire-app-builder
- Leanback Library を用いて普通に Android TV 開発
- https://developer.android.com/training/tv/
- https://github.com/googlesamples/androidtv-leanback
Slide 8
Slide 8 text
Fire App Builder
Slide 9
Slide 9 text
Fire App Builder
- Amazon 公式が配布してる FireTV 向けアプリを簡単につく
れるフレームワーク
- データの流れが複雑で少し扱いにくい
- 使ってみた感想を一言でいうと、Android開発に慣れて無い
人向けのフレームワークかな、と感じた
Slide 10
Slide 10 text
Introduce Fire App Builder
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
重要なのは
この２つ
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Fire App Builder 良い点
- 動画を配信できるAPIサーバがあれば、
メディアフィードという形式でレスポンスを返すAPIを作るだ
けでアプリが作れる
- + config ファイルをいじる
- 大きくカスタマイズする必要がなければ、フレームワークで
用意されている Component に沿って実装するだけで良い
Slide 20
Slide 20 text
Fire App Builder 悪い点
- config ファイルをいじるだけでいろいろ設定できるように実
装されているので構成が複雑
- ベースプロジェクトがでかいためビルドが長い
- モジュールがたくさんあるが、使わないモジュールもあっ
て無駄なコードがある
- メンテがそんなにされてないっぽい
Slide 21
Slide 21 text
Fire App Builder ハマりポイント
Slide 22
Slide 22 text
google play services がない (FireTV)
Slide 23
Slide 23 text
google play services がない (FireTV)
- google 系の api が使えない
- 今回だめだったのは firebase-core が入らない問題
Slide 24
Slide 24 text
urlFiles が1行目しか読み込まれない
- Fire App Builder の仕様では、複数のメディアフィードを持っ
てるなら urlFiles に複数の url を書くことができる。(としか書
かれてない)
- https://developer.amazon.com/docs/fire-app-builder/load-media-feed
.html#types-of-feeds
- なので複数 url を書けば複数 url からデータを取得してくれ
ると思った。
Slide 25
Slide 25 text
urlFiles が1行目しか読み込まれない
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
なぜかドキュメントに書かれてない
Slide 30
Slide 30 text
Leanback Library
Slide 31
Slide 31 text
- Android TV アプリの開発において Google のガイドライン
の標準的な UI/UX を簡単に実現するライブラリ
- https://developer.android.com/design/tv/
- https://developer.android.com/topic/libraries/support-library/features
#v17-leanback
- サンプルが公開されている
- https://github.com/googlesamples/androidtv-leanback
Leanback Library
Slide 32
Slide 32 text
- 基本的な UI は Fragment が用意されていて、それを継承し
て作っていく
Leanback Library
Slide 33
Slide 33 text
https://github.com/googlesamples/androidtv-leanback#screenshots
Slide 34
Slide 34 text
Leanback Library
- Leanback Library の Fragment は MVP アーキテクチャを
採用している
- 大雑把に言うと以下のクラスを実装すると作れる
- presenter
- presenter selector (必要に応じて)
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
TV向けアプリで気をつけること
Slide 41
Slide 41 text
TVにはオーバースキャンエリアが存在する
- TVにはディスプレイの端っこに時間を表示したり、そもそも
クリッピングされている場合がある
- そのため、だいたい 10% マージンを確保してそこには基本
的にコンテンツを置かないようにしたほうが良い
- https://developer.android.com/training/tv/start/layouts?hl=ja#oversc
an
- https://developer.amazon.com/ja/docs/fire-tv/system-xray-developer-
tools.html#safezone
Slide 42
Slide 42 text
タッチができないということを意識する
- TVは基本的にタッチはできなくてコントローラーで操作を行
う。
- そのため、通常のアプリ開発とは違って今何処にフォーカス
があるのかをちゃんと分かるように作る必要がある
Slide 43
Slide 43 text
タッチができないということを意識する
- よくあるリストのスクロール等をそのまま作ると最悪
- Leanback Library の Fragment を使わずに作る場合で
も、 [Vertical | Horizontal]GridLayout というものが用意
されている
- RecyclerView を継承して作られているので、
使い方はほぼ RecyclerView と同じ
Slide 44
Slide 44 text
雑感
Slide 45
Slide 45 text
雑感
- Androidエンジニアは普通に leanback library で作ったほう
が良さそう
- 公式のドキュメントとサンプル見ればだいたい作れる
- https://developer.android.com/training/tv/
- https://github.com/googlesamples/androidtv-leanb
ack
Slide 46
Slide 46 text
おわり