Android スキルセットをフル活用して始めるスマートテレビアプリ開発

"ABEMA Engineer Meetup 〜スマートテレビ編 Vol.1〜" での発表資料です。
https://cyberagent.connpass.com/event/247074/

Transcript

1. AbemaTV, Inc. All Rights Reserved

   AbemaTV, Inc. All Rights Reserved
 1
   Android スキルセットを
   フル活用して始める
   スマートテレビアプリ開発
   2022 June 9th
   Satoshi Takeda / satsukies
   

   View Slide

2. AbemaTV, Inc. All Rights Reserved
 2
   アジェンダ
   0. 自己紹介
   1. AndroidTVとは
   2. なぜいまAndroidTVなのか
   3. Androidとの違い
   4. AndroidTVアプリ開発をはじめよう
   5. まとめ
   

   View Slide

3. AbemaTV, Inc. All Rights Reserved
 3
   アジェンダ
   0. 自己紹介
   1. AndroidTVとは
   2. なぜいまAndroidTVなのか
   3. Androidとの違い
   4. AndroidTVアプリ開発をはじめよう
   5. まとめ
   

   View Slide

4. AbemaTV, Inc. All Rights Reserved

   竹田 智 / satsukies
   2017年 CyberAgentに新卒入社。
   同年 AbemaTVへ出向し、Androidチームでアプリ開発に従事。
   2019年春 AndroidTV向けアプリの開発担当にスイッチ。
   2021年夏 Cross Deviceチームに異動し、現在に至る。
   趣味
   ・タイヤの付いた乗り物（クルマ、バイク、ロードバイク）
   ・カメラ
   ・ガジェット
   4
   Profile
   

   View Slide

5. AbemaTV, Inc. All Rights Reserved
 5
   アジェンダ
   0. 自己紹介
   1. AndroidTVとは
   2. なぜいまAndroidTVなのか
   3. Androidとの違い
   4. AndroidTVアプリ開発をはじめよう
   5. まとめ
   

   View Slide

6. 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
   

   View Slide

7. AbemaTV, Inc. All Rights Reserved

   手軽にエンターテイメントを楽しめる
   AndroidTVとは
   7
   ● Google Playストアが利用可能
   ○ 動画・音楽などアプリ
   ○ ゲームアプリ
   ● ホームでのレコメンドが充実
   ○ ユーザの好みに合わせたサジェスト
   ○ システムからのレコメンド
   ○ アプリからのおすすめ
   

   View Slide

8. AbemaTV, Inc. All Rights Reserved
 8
   アジェンダ
   0. 自己紹介
   1. AndroidTVとは
   2. なぜいまAndroidTVなのか
   3. Androidとの違い
   4. AndroidTVアプリ開発をはじめよう
   5. まとめ
   

   View Slide

9. AbemaTV, Inc. All Rights Reserved

   なぜいまAndroidTVなのか
   9
   インターネット接続可能なデバイスの台数推移
   ● 通信機器は飽和状態に近い
   ● コンシューマー機器は強い増加傾向
   コロナ禍を経て更に増加していると推測できる
   ユーザボリュームの拡大が見込める
   =多くのユーザにプロダクトを届けるチャンス
   コネクティッドデバイスの普及
   世界のIoTデバイス数の推移及び予測 [2]
   [2] https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/html/nd105220.html
   

   View Slide

10. AbemaTV, Inc. All Rights Reserved

    なぜいまAndroidTVなのか
    10
    ● COVID-19によって生じた生活スタイルの変化
    ○ 「通勤通学などのスキマ時間に楽しむ」
    から「おうち時間を楽しむ」
    ● TVデバイスの特徴
    ○ スマホやタブレットに比べて圧倒的に大きなディスプレイ
    ○ 整った環境下で視聴できる
    ○ みんなで楽しめる
    TVデバイスとマルチメディアコンテンツの相性◎
    よりよいユーザ体験を得るための選択肢を提供
    

    View Slide

11. AbemaTV, Inc. All Rights Reserved

    なぜいまAndroidTVなのか
    11
    ● インターネットに接続可能なデバイスの増加
    ○ PC、スマートフォン、タブレット、
    TV、スピーカー、自動車、etc…
    ○ 利用シーンに合わせて使い分けている
    ● クロスデバイスユースケースを想定した
    SDKの登場
    ○ Cast SDK
    ○ Nearby
    ○ Crossdevice SDK
    “マルチデバイス”・”クロスデバイス” というキーワード
    今後も注目・注力される領域
    

    View Slide

12. AbemaTV, Inc. All Rights Reserved

    とは言ってもAndroidTVなんもわからん
    12
    

    View Slide

13. AbemaTV, Inc. All Rights Reserved

    未知のデバイスだしハードル高そう
    13
    

    View Slide

14. AbemaTV, Inc. All Rights Reserved

    🙅
    14
    

    View Slide

15. AbemaTV, Inc. All Rights Reserved
 15
    アジェンダ
    0. 自己紹介
    1. AndroidTVとは
    2. なぜいまAndroidTVなのか
    3. Androidとの違い
    4. AndroidTVアプリ開発を始めよう
    5. まとめ
    

    View Slide

16. AbemaTV, Inc. All Rights Reserved

    変わらないところ
    Androidとの違い
    16
    

    View Slide

17. AbemaTV, Inc. All Rights Reserved

    変わらないところ
    Androidとの違い
    17
    ● アーキテクチャ・設計
    ● 開発手法・開発環境
    ● アプリのリリース・運用
    

    View Slide

18. AbemaTV, Inc. All Rights Reserved

    変わってくるところ
    変わらないところ
    Androidとの違い
    18
    ● アーキテクチャ・設計
    ● 開発手法・開発環境
    ● アプリのリリース・運用
    

    View Slide

19. AbemaTV, Inc. All Rights Reserved

    変わってくるところ
    変わらないところ
    Androidとの違い
    19
    ● アーキテクチャ・設計
    ● 開発手法・開発環境
    ● アプリのリリース・運用
    ● ターゲットデバイス
    ○ 16:9のLandscape画面
    ● デバイス特性に起因する差分
    ○ リモコン操作、音声入力
    ○ レコメンド
    ○ UI・UXデザイン
    ● Leanbackサポートライブラリ
    ○ 最適化されたUIテンプレート
    

    View Slide

20. AbemaTV, Inc. All Rights Reserved

    変わってくるところ
    変わらないところ
    Androidとの違い
    20
    ● アーキテクチャ・設計
    ● 開発手法・開発環境
    ● アプリのリリース・運用
    ● ターゲットデバイス
    ○ 16:9のLandscape画面
    ● デバイス特性に起因する差分
    ○ リモコン操作、音声入力
    ○ レコメンド
    ○ UI・UXデザイン
    ● Leanbackサポートライブラリ
    ○ 最適化されたUIテンプレート
    Androidアプリ開発における
    知識・経験はフル活用可能！！
    

    View Slide

21. 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
    

    View Slide

22. AbemaTV, Inc. All Rights Reserved

    ちょっと興味出てきましたか？🤔
    22
    

    View Slide

23. AbemaTV, Inc. All Rights Reserved
 23
    アジェンダ
    0. 自己紹介
    1. AndroidTVとは
    2. なぜいまAndroidTVなのか
    3. Androidとの違い
    4. AndroidTVアプリ開発をはじめよう
    5. まとめ
    

    View Slide

24. AbemaTV, Inc. All Rights Reserved

    サンプルコード
    AndroidTVアプリ開発に必要なモノ
    AndroidTVアプリ開発を始めよう
    24
    ● アプリをビルドできる環境
    ○ Android StudioでOK
    ● アプリを実行する環境
    ○ お持ちのAndroidTVデバイス
    ○ エミュレータ
    satsukies/androidtv-compose-sample　
    

    View Slide

25. AbemaTV, Inc. All Rights Reserved

    サンプルコード
    AndroidTVアプリ開発に必要なモノ
    AndroidTVアプリ開発を始めよう
    25
    ● アプリをビルドできる環境
    ○ Android StudioでOK
    ● アプリを実行する環境
    ○ お持ちのAndroidTVデバイス
    ○ エミュレータ
    satsukies/androidtv-compose-sample　
    

    View Slide

26. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    26
    AndroidManifest.xml の修正
    

    View Slide

27. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    27
    uses-featureの記載
    ● leanbackサポート宣言
    ● タッチスクリーン不要宣言
    AndroidManifest.xml の修正
    

    View Slide

28. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    28
    uses-featureの記載
    ● leanbackサポート宣言
    ● タッチスクリーン不要宣言
    intent filterの追加
    ● LEANBACK_LAUNCHER
    ● AndroidTVのホーム画面に
    アプリを表示するために必要
    AndroidManifest.xml の修正
    

    View Slide

29. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    29
    uses-featureの記載
    ● leanbackサポート宣言
    ● タッチスクリーン不要宣言
    intent filterの追加
    ● LEANBACK_LAUNCHER
    ● AndroidTVのホーム画面に
    アプリを表示するために必要
    アプリバナーの追加
    ● 320x180のxhdpiリソース
    AndroidManifest.xml の修正
    

    View Slide

30. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    30
    app-level build.gradle の修正
    

    View Slide

31. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    31
    androidx.leanback
    ● 使わなくてもアプリは作れる
    ● TVに最適なUI実装の鍵
    app-level build.gradle の修正
    

    View Slide

32. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    32
    androidx.leanback
    ● 使わなくてもアプリは作れる
    ● TVに最適なUI実装の鍵
    必要なライブラリの追加
    ● Jetpack ComposeでUI実装
    app-level build.gradle の修正
    

    View Slide

33. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    33
    androidx.leanback
    ● 使わなくてもアプリは作れる
    ● TVに最適なUI実装の鍵
    必要なライブラリの追加
    ● Jetpack ComposeでUI実装
    Build設定
    ● Compose、bindingの有効化
    app-level build.gradle の修正
    

    View Slide

34. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    34
    ComposeによるUIの実装
    

    View Slide

35. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    35
    Focusの初期位置制御
    ● FocusRequester
    ● LaunchedEffectでリクエスト
    ComposeによるUIの実装
    

    View Slide

36. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    36
    Focusの初期位置制御
    ● FocusRequester
    ● LaunchedEffectでリクエスト
    Focus状態に応じたUI変化
    ● Focusがあるときは反転したい
    ● MutableInteractionSource
    ComposeによるUIの実装
    

    View Slide

37. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    37
    Focusの初期位置制御
    ● FocusRequester
    ● LaunchedEffectでリクエスト
    Focus状態に応じたUI変化
    ● Focusがあるときは反転したい
    ● MutableInteractionSource
    Previewの設定
    ● デバイスリストのTVを選択
    ComposeによるUIの実装
    

    View Slide

38. AbemaTV, Inc. All Rights Reserved

    AndroidTVアプリ開発を始めよう
    38
    スマホのエミュレータ作成と同じ
    ● Device Managerから作成
    ● デバイス定義を選択
    ● イメージを選択
    ● 動かすだけ
    エミュレータの準備
    

    View Slide

39. AbemaTV, Inc. All Rights Reserved

    サンプルアプリのデモ
    AndroidTVアプリ開発を始めよう
    39
    

    View Slide

40. AbemaTV, Inc. All Rights Reserved
 40
    アジェンダ
    0. 自己紹介
    1. AndroidTVとは
    2. なぜいまAndroidTVなのか
    3. Androidとの違い
    4. AndroidTVアプリ開発を始めよう
    5. まとめ
    

    View Slide

41. AbemaTV, Inc. All Rights Reserved

    AndroidTV、実はアツいんです。
    まとめ
    41
    ● ビジネス観点
    ○ ユーザボリュームが拡大傾向
    ○ クロスデバイス体験強化の流れ
    ● エンジニア観点
    ○ Android開発の経験・資産を活用できる
    ■ コア要素のキャッチアップに注力できるメリット
    ○ エンジニアとしての価値の向上
    ■ モバイルアプリエンジニアよりも圧倒的に少ない
    ■ スマホ / TVデバイス 双方の開発で戦力になれる
    

    View Slide

42. AbemaTV, Inc. All Rights Reserved

    AndroidTV、実はアツいんです。
    まとめ
    42
    ● ビジネス観点
    ○ ユーザボリュームが拡大傾向
    ○ クロスデバイス体験強化の流れ
    ● エンジニア観点
    ○ Android開発の経験・資産を活用できる
    ■ コア要素のキャッチアップに注力できるメリット
    ○ エンジニアとしての価値の向上
    ■ モバイルアプリエンジニアよりも圧倒的に少ない
    ■ スマホ / TVデバイス 双方の開発で戦力になれる
    「世界に誇れる新メディア」を目指し
    一緒に「ABEMA」を成長させていきたい仲間
    を探しています！
    

    View Slide

43. AbemaTV, Inc. All Rights Reserved

    FIN
    43
    

    View Slide