Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Android スキルセットをフル活用して始めるスマートテレビアプリ開発
Search
satsukies
June 09, 2022
Programming
1
930
Android スキルセットをフル活用して始めるスマートテレビアプリ開発
"ABEMA Engineer Meetup 〜スマートテレビ編 Vol.1〜" での発表資料です。
https://cyberagent.connpass.com/event/247074/
satsukies
June 09, 2022
Tweet
Share
More Decks by satsukies
See All by satsukies
5分で作るモックサーバー
satsukies
0
1.3k
Android TVに関するアップデート / What's new on Android TV
satsukies
0
210
Kotlin Nativeでクロスプラットフォーム開発 / Cross-platform development with Kotlin Native
satsukies
1
940
Navigation Component
satsukies
5
4k
「OK google, プロジェクトのbuildして」
satsukies
2
1.6k
いまさら始めるInstant App
satsukies
1
410
View Animation
satsukies
1
840
Other Decks in Programming
See All in Programming
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
360
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
290
コンテキストエンジニアリングで変わるAI活用 リファクタリングワークフローの実践から学んだ形式知
leveragestech
0
100
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
480
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
120
Flutterと Vibe Coding で個人開発!
hyshu
1
250
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.5k
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
690
The State of Fluid (2025)
s2b
0
170
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
7
2.9k
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.7k
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
250
Featured
See All Featured
Docker and Python
trallard
45
3.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Pragmatic Product Professional
lauravandoore
36
6.8k
RailsConf 2023
tenderlove
30
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Done Done
chrislema
185
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Transcript
AbemaTV, Inc. All Rights Reserved AbemaTV, Inc. All Rights Reserved
1 Android スキルセットを フル活用して始める スマートテレビアプリ開発 2022 June 9th Satoshi Takeda / satsukies
AbemaTV, Inc. All Rights Reserved 2 アジェンダ 0. 自己紹介 1.
AndroidTVとは 2. なぜいまAndroidTVなのか 3. Androidとの違い 4. AndroidTVアプリ開発をはじめよう 5. まとめ
AbemaTV, Inc. All Rights Reserved 3 アジェンダ 0. 自己紹介 1.
AndroidTVとは 2. なぜいまAndroidTVなのか 3. Androidとの違い 4. AndroidTVアプリ開発をはじめよう 5. まとめ
AbemaTV, Inc. All Rights Reserved 竹田 智 / satsukies 2017年
CyberAgentに新卒入社。 同年 AbemaTVへ出向し、Androidチームでアプリ開発に従事。 2019年春 AndroidTV向けアプリの開発担当にスイッチ。 2021年夏 Cross Deviceチームに異動し、現在に至る。 趣味 ・タイヤの付いた乗り物(クルマ、バイク、ロードバイク) ・カメラ ・ガジェット 4 Profile
AbemaTV, Inc. All Rights Reserved 5 アジェンダ 0. 自己紹介 1.
AndroidTVとは 2. なぜいまAndroidTVなのか 3. Androidとの違い 4. AndroidTVアプリ開発をはじめよう 5. まとめ
AbemaTV, Inc. All Rights Reserved Android TV OS搭載のデバイス AndroidTVとは 6
月間アクティブ数 1.1億台以上 の規模[1] • 液晶一体型のスマートTV • スティック型デバイス • STB(セットトップボックス) • プロジェクター etc… [1] https://android-developers.googleblog.com/2022/05/whats-new-with-google-tv-android-tv-os.html
AbemaTV, Inc. All Rights Reserved 手軽にエンターテイメントを楽しめる AndroidTVとは 7 • Google
Playストアが利用可能 ◦ 動画・音楽などアプリ ◦ ゲームアプリ • ホームでのレコメンドが充実 ◦ ユーザの好みに合わせたサジェスト ◦ システムからのレコメンド ◦ アプリからのおすすめ
AbemaTV, Inc. All Rights Reserved 8 アジェンダ 0. 自己紹介 1.
AndroidTVとは 2. なぜいまAndroidTVなのか 3. Androidとの違い 4. AndroidTVアプリ開発をはじめよう 5. まとめ
AbemaTV, Inc. All Rights Reserved なぜいまAndroidTVなのか 9 インターネット接続可能なデバイスの台数推移 • 通信機器は飽和状態に近い
• コンシューマー機器は強い増加傾向 コロナ禍を経て更に増加していると推測できる ユーザボリュームの拡大が見込める =多くのユーザにプロダクトを届けるチャンス コネクティッドデバイスの普及 世界のIoTデバイス数の推移及び予測 [2] [2] https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/html/nd105220.html
AbemaTV, Inc. All Rights Reserved なぜいまAndroidTVなのか 10 • COVID-19によって生じた生活スタイルの変化 ◦
「通勤通学などのスキマ時間に楽しむ」 から「おうち時間を楽しむ」 • TVデバイスの特徴 ◦ スマホやタブレットに比べて圧倒的に大きなディスプレイ ◦ 整った環境下で視聴できる ◦ みんなで楽しめる TVデバイスとマルチメディアコンテンツの相性◎ よりよいユーザ体験を得るための選択肢を提供
AbemaTV, Inc. All Rights Reserved なぜいまAndroidTVなのか 11 • インターネットに接続可能なデバイスの増加 ◦
PC、スマートフォン、タブレット、 TV、スピーカー、自動車、etc… ◦ 利用シーンに合わせて使い分けている • クロスデバイスユースケースを想定した SDKの登場 ◦ Cast SDK ◦ Nearby ◦ Crossdevice SDK “マルチデバイス”・”クロスデバイス” というキーワード 今後も注目・注力される領域
AbemaTV, Inc. All Rights Reserved とは言ってもAndroidTVなんもわからん 12
AbemaTV, Inc. All Rights Reserved 未知のデバイスだしハードル高そう 13
AbemaTV, Inc. All Rights Reserved 🙅 14
AbemaTV, Inc. All Rights Reserved 15 アジェンダ 0. 自己紹介 1.
AndroidTVとは 2. なぜいまAndroidTVなのか 3. Androidとの違い 4. AndroidTVアプリ開発を始めよう 5. まとめ
AbemaTV, Inc. All Rights Reserved 変わらないところ Androidとの違い 16
AbemaTV, Inc. All Rights Reserved 変わらないところ Androidとの違い 17 • アーキテクチャ・設計
• 開発手法・開発環境 • アプリのリリース・運用
AbemaTV, Inc. All Rights Reserved 変わってくるところ 変わらないところ Androidとの違い 18 •
アーキテクチャ・設計 • 開発手法・開発環境 • アプリのリリース・運用
AbemaTV, Inc. All Rights Reserved 変わってくるところ 変わらないところ Androidとの違い 19 •
アーキテクチャ・設計 • 開発手法・開発環境 • アプリのリリース・運用 • ターゲットデバイス ◦ 16:9のLandscape画面 • デバイス特性に起因する差分 ◦ リモコン操作、音声入力 ◦ レコメンド ◦ UI・UXデザイン • Leanbackサポートライブラリ ◦ 最適化されたUIテンプレート
AbemaTV, Inc. All Rights Reserved 変わってくるところ 変わらないところ Androidとの違い 20 •
アーキテクチャ・設計 • 開発手法・開発環境 • アプリのリリース・運用 • ターゲットデバイス ◦ 16:9のLandscape画面 • デバイス特性に起因する差分 ◦ リモコン操作、音声入力 ◦ レコメンド ◦ UI・UXデザイン • Leanbackサポートライブラリ ◦ 最適化されたUIテンプレート Androidアプリ開発における 知識・経験はフル活用可能!!
AbemaTV, Inc. All Rights Reserved AndroidTVらしいUIを実装する際に有用なライブラリ。 様々なコンポーネントが用意されていて、組み合わせで実現 できることは多いが、クセもそこそこ。 Leanbackサポートライブラリ 画像
Androidとの違い android/tv-samplesのREADMEより[3] 21 D-PAD操作によるFocus移動でのインタラクション設計 や大 画面への表示を前提とした UIの構築がマスト。 音声入力やレコメンド機能に対応することで、コンテンツへの アクセスに必要なアクションを最小化可能。 デバイス特性を考慮した設計 [3] https://github.com/android/tv-samples/tree/main/LeanbackShowcase
AbemaTV, Inc. All Rights Reserved ちょっと興味出てきましたか?🤔 22
AbemaTV, Inc. All Rights Reserved 23 アジェンダ 0. 自己紹介 1.
AndroidTVとは 2. なぜいまAndroidTVなのか 3. Androidとの違い 4. AndroidTVアプリ開発をはじめよう 5. まとめ
AbemaTV, Inc. All Rights Reserved サンプルコード AndroidTVアプリ開発に必要なモノ AndroidTVアプリ開発を始めよう 24 •
アプリをビルドできる環境 ◦ Android StudioでOK • アプリを実行する環境 ◦ お持ちのAndroidTVデバイス ◦ エミュレータ satsukies/androidtv-compose-sample
AbemaTV, Inc. All Rights Reserved サンプルコード AndroidTVアプリ開発に必要なモノ AndroidTVアプリ開発を始めよう 25 •
アプリをビルドできる環境 ◦ Android StudioでOK • アプリを実行する環境 ◦ お持ちのAndroidTVデバイス ◦ エミュレータ satsukies/androidtv-compose-sample
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 26 AndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 27 uses-featureの記載 • leanbackサポート宣言
• タッチスクリーン不要宣言 AndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 28 uses-featureの記載 • leanbackサポート宣言
• タッチスクリーン不要宣言 intent filterの追加 • LEANBACK_LAUNCHER • AndroidTVのホーム画面に アプリを表示するために必要 AndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 29 uses-featureの記載 • leanbackサポート宣言
• タッチスクリーン不要宣言 intent filterの追加 • LEANBACK_LAUNCHER • AndroidTVのホーム画面に アプリを表示するために必要 アプリバナーの追加 • 320x180のxhdpiリソース AndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 30 app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 31 androidx.leanback • 使わなくてもアプリは作れる
• TVに最適なUI実装の鍵 app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 32 androidx.leanback • 使わなくてもアプリは作れる
• TVに最適なUI実装の鍵 必要なライブラリの追加 • Jetpack ComposeでUI実装 app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 33 androidx.leanback • 使わなくてもアプリは作れる
• TVに最適なUI実装の鍵 必要なライブラリの追加 • Jetpack ComposeでUI実装 Build設定 • Compose、bindingの有効化 app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 34 ComposeによるUIの実装
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 35 Focusの初期位置制御 • FocusRequester
• LaunchedEffectでリクエスト ComposeによるUIの実装
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 36 Focusの初期位置制御 • FocusRequester
• LaunchedEffectでリクエスト Focus状態に応じたUI変化 • Focusがあるときは反転したい • MutableInteractionSource ComposeによるUIの実装
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 37 Focusの初期位置制御 • FocusRequester
• LaunchedEffectでリクエスト Focus状態に応じたUI変化 • Focusがあるときは反転したい • MutableInteractionSource Previewの設定 • デバイスリストのTVを選択 ComposeによるUIの実装
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう 38 スマホのエミュレータ作成と同じ • Device
Managerから作成 • デバイス定義を選択 • イメージを選択 • 動かすだけ エミュレータの準備
AbemaTV, Inc. All Rights Reserved サンプルアプリのデモ AndroidTVアプリ開発を始めよう 39
AbemaTV, Inc. All Rights Reserved 40 アジェンダ 0. 自己紹介 1.
AndroidTVとは 2. なぜいまAndroidTVなのか 3. Androidとの違い 4. AndroidTVアプリ開発を始めよう 5. まとめ
AbemaTV, Inc. All Rights Reserved AndroidTV、実はアツいんです。 まとめ 41 • ビジネス観点
◦ ユーザボリュームが拡大傾向 ◦ クロスデバイス体験強化の流れ • エンジニア観点 ◦ Android開発の経験・資産を活用できる ▪ コア要素のキャッチアップに注力できるメリット ◦ エンジニアとしての価値の向上 ▪ モバイルアプリエンジニアよりも圧倒的に少ない ▪ スマホ / TVデバイス 双方の開発で戦力になれる
AbemaTV, Inc. All Rights Reserved AndroidTV、実はアツいんです。 まとめ 42 • ビジネス観点
◦ ユーザボリュームが拡大傾向 ◦ クロスデバイス体験強化の流れ • エンジニア観点 ◦ Android開発の経験・資産を活用できる ▪ コア要素のキャッチアップに注力できるメリット ◦ エンジニアとしての価値の向上 ▪ モバイルアプリエンジニアよりも圧倒的に少ない ▪ スマホ / TVデバイス 双方の開発で戦力になれる 「世界に誇れる新メディア」を目指し 一緒に「ABEMA」を成長させていきたい仲間 を探しています!
AbemaTV, Inc. All Rights Reserved FIN 43