"ABEMA Engineer Meetup 〜スマートテレビ編 Vol.1〜" での発表資料です。 https://cyberagent.connpass.com/event/247074/
AbemaTV, Inc. All Rights Reserved AbemaTV, Inc. All Rights Reserved 1Android スキルセットをフル活用して始めるスマートテレビアプリ開発2022 June 9thSatoshi Takeda / satsukies
View Slide
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 竹田 智 / satsukies2017年 CyberAgentに新卒入社。同年 AbemaTVへ出向し、Androidチームでアプリ開発に従事。2019年春 AndroidTV向けアプリの開発担当にスイッチ。2021年夏 Cross Deviceチームに異動し、現在に至る。趣味・タイヤの付いた乗り物(クルマ、バイク、ロードバイク)・カメラ・ガジェット4Profile
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]21D-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アプリ開発を始めよう26AndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう27uses-featureの記載● leanbackサポート宣言● タッチスクリーン不要宣言AndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう28uses-featureの記載● leanbackサポート宣言● タッチスクリーン不要宣言intent filterの追加● LEANBACK_LAUNCHER● AndroidTVのホーム画面にアプリを表示するために必要AndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう29uses-featureの記載● leanbackサポート宣言● タッチスクリーン不要宣言intent filterの追加● LEANBACK_LAUNCHER● AndroidTVのホーム画面にアプリを表示するために必要アプリバナーの追加● 320x180のxhdpiリソースAndroidManifest.xml の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう30app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう31androidx.leanback● 使わなくてもアプリは作れる● TVに最適なUI実装の鍵app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう32androidx.leanback● 使わなくてもアプリは作れる● TVに最適なUI実装の鍵必要なライブラリの追加● Jetpack ComposeでUI実装app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう33androidx.leanback● 使わなくてもアプリは作れる● TVに最適なUI実装の鍵必要なライブラリの追加● Jetpack ComposeでUI実装Build設定● Compose、bindingの有効化app-level build.gradle の修正
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう34ComposeによるUIの実装
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう35Focusの初期位置制御● FocusRequester● LaunchedEffectでリクエストComposeによるUIの実装
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう36Focusの初期位置制御● FocusRequester● LaunchedEffectでリクエストFocus状態に応じたUI変化● Focusがあるときは反転したい● MutableInteractionSourceComposeによるUIの実装
AbemaTV, Inc. All Rights Reserved AndroidTVアプリ開発を始めよう37Focusの初期位置制御● FocusRequester● LaunchedEffectでリクエストFocus状態に応じたUI変化● Focusがあるときは反転したい● MutableInteractionSourcePreviewの設定● デバイスリストの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 FIN43