フルComposeでTVアプリを作った話

参考資料
https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/tv/samples/src/main/java/androidx/tv/samples
https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/ui/ui/integration-tests/ui-demos/src/main/java/androidx/compose/ui/demos/focus/LazyListChildFocusDemos.kt
https://developer.android.com/jetpack/androidx/releases/tv?hl=en
https://io.google/2023/program/24ef7b93-7823-412e-99b7-b97a615f3334/intl/ja/
https://android-developers.googleblog.com/2023/05/building-pixel-perfect-living-room-experiences-compose-for-tv.html
https://developer.android.com/design/ui/tv
https://developer.android.com/training/tv/playback/compose

Transcript

1. フルComposeでTVアプリを作っ
   た話
   ca.aab #3 2023/05/29
   Sasaki Tomohiro
   

   View Slide

2. 目次
   ● 自己紹介
   ● 背景
   ● 話すこと
   ● 話さないこと
   ● Compose for TV とは？
   ● 普通のComposeとの違い
   ● つまずいたところとその解決策
   ● 現時点での辛み
   ● 採用して良かったところ
   ● リリースされそうな機能
   ● Compose for TVのこれから
   

   View Slide

3. 自己紹介
   ● 名前: 佐々木知洋(SSK)
   ● twitter: @t_ssksan
   ● Github: sasakitomohiro
   ● Android、Flutter
   ● CyberFightのWRESTLE UNIVERSEという
   プロレスの動画配信サービスの
   モバイル、AndroidTVアプリを作っています
   

   View Slide

4. 背景
   ● モバイル版のアプリがすでにあり、試聴体験をさらによくするためにAndroidTV版の
   アプリを開発することになった
   ● 技術選定をするタイミングでちょうど良くCompose for TVのalpha01が出た
   ● 今後Composeでの開発が主流になっていくことを考え、選定した
   ○ Compose自体は採用事例が多くなっていたため、何かあっても回避はできそう
   

   View Slide

5. 話すこと
   ● Compose for TVと通常のComposeとの違い
   ● つまずいたところとその解決策
   ● 採用してよかったと感じているところ
   

   View Slide

6. 話さないこと
   ● WRESTLE UNIVERSEのサービス内容や機能について
   ● WRESTLE UNIVERSEのアーキテクチャについて
   ● Composeの概要やその使い方について
   

   View Slide

7. Compose for TV とは？
   ● AndroidTV向けのComposeでUIを構築できるツールキット
   ● AndroidTVデバイス向けのComposable等が提供されている
   ● AndroidTVデバイスはタッチ操作はできないため、リモコンでの操作を実現すること
   ができる
   ※2023/5/29現在、alpha版のため今回の発表内容からできること・
   できないことなどが大きく変わる可能性があるため予めご了承ください
   

   View Slide

8. 普通のComposeとの違い
   ● 開発が普通のComposeとは別で進められている(TV専用のモジュール)
   ● 用意されているComposable
   ○ LazyColumn、LazyRowのようにTVではTvLazyColumn、TvLazyRowなどがある
   ○ その他にもTV特有のImmersiveListをはじめとしてCarouselなども用意されている
   ○ Compose for TVで用意されているComposableから通常のComposeのComposableを使うことや、そ
   の逆もできる
   

   View Slide

9. 普通のComposeとの違い
   ● 開発が普通のComposeとは別で進められている(TV専用のモジュール)
   ● 用意されているComposable
   ○ LazyColumn、LazyRowのようにTVではTvLazyColumn、TvLazyRowなどがある
   ○ その他にもTV特有のImmersiveListなども用意されている
   ○ Compose for TVで用意されているComposableから通常のComposeのComposableを使うことや、そ
   の逆もできる
   

   View Slide

10. 普通のComposeとの違い
    ● 通常のLazyColumnやLazyRowと何が違うか
    ○ フォーカスされている要素の位置の制御が入っている
    ○ Pivotといい、PivotOffsetsというパラメータでフォーカスされる要素の端をどの辺にするかを指定する
    ことが可能
    

    View Slide

11. 普通のComposeとの違い
    ● 実際のコードの違い
    

    View Slide

12. 普通のComposeとの違い
    通常のComposeのLazyColumn、LazyRow
    

    View Slide

13. 普通のComposeとの違い
    Compose for TVのTvLazyColumn、TvLazyRow
    

    View Slide

14. 普通のComposeとの違い
    ● 開発が普通のComposeとは別で進められている(TV専用のモジュール)
    ● 用意されているComposable
    ○ LazyColumn、LazyRowのようにTVではTvLazyColumn、TvLazyRowなどがある
    ○ その他にもTV特有のImmersiveListなども用意されている
    ○ Compose for TVで用意されているComposableから通常のComposeのComposableを使うことや、そ
    の逆もできる
    

    View Slide

15. 普通のComposeとの違い
    ImmersiveList
    

    View Slide

16. 普通のComposeとの違い
    その他用意されているComposable
    ● Surface
    ● TvLazyGrid
    ● Button
    ● OutlinedButton
    ● IconButton
    ● OutlinedIconButton
    ● RadioButton
    ● WideButton
    ● Card
    ● ClassicCard
    ● CompactCard
    ● WideClassicCard
    ● Checkbox
    ● TriStateCheckbox
    ● Icon
    ● ModalNavigationDrawer
    ● NavigationDrawer
    ● Switch
    ● Tab
    ● TabRow
    ● Text
    ● などなど
    

    View Slide

17. つまずいたところ
    ● フォーカスを当てたいところにフォーカスが当たらない
    ● 画面遷移して戻った時にフォーカスがない
    ● TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の
    要素に当たらない
    

    View Slide

18. つまずいたところ
    ● フォーカスを当てたいところにフォーカスが当たらない
    ● 画面遷移して戻った時にフォーカスがない
    ● TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の
    要素に当たらない
    

    View Slide

19. 解決方法
    FocusRequesterを駆使してフォーカスを当てる
    

    View Slide

20. 解決方法
    FocusRequesterを駆使してフォーカスを当てる
    例) タブがあるレイアウトの時に選択中のタブにフォーカスを当てたい
    

    View Slide

21. 解決方法
    FocusRequesterを駆使してフォーカスを当てる
    

    View Slide

22. つまずいたところ
    ● フォーカスを当てたいところにフォーカスが当たらない
    ● 画面遷移して戻った時にフォーカスがない
    ● TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の
    要素に当たらない
    

    View Slide

23. 解決方法
    FocusRequesterを駆使してフォーカスを当てる
    例) リストアイテムをクリックして詳細画面に遷移後、前の画面に戻ってフォーカスを戻す
    

    View Slide

24. つまずいたところ
    ● フォーカスを当てたいところにフォーカスが当たらない
    ● 画面遷移して戻った時にフォーカスがない
    ● TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の
    要素に当たらない
    

    View Slide

25. つまずいたところ
    

    View Slide

26. 解決方法
    FocusRequesterとPinnableContainerを使って最初は0番目の要素フォーカスを当て、そ
    れ以降は最後にフォーカスを当てたところに当たるようにする
    

    View Slide

27. 解決方法
    

    View Slide

28. 解決方法
    

    View Slide

29. 解決方法
    

    View Slide

30. 解決方法
    

    View Slide

31. 現時点での辛み
    ● まだalpha版のため知見が少ない
    ● 不具合か仕様かがわからないことがある
    

    View Slide

32. 採用して良かったところ
    ● Composeで画面を作れる(レガシーな技術を使わなくて良いため学習コストが少な
    い)
    ● 知見を横軸で共有できる
    

    View Slide

33. リリースされそうな機能
    MediaPlayer
    ● 現状Composeでプレイヤーを実装するには
    ExoPlayerなどを自前でComposeで使えるようにしている
    ● ExoPlayerをWrapしている
    ● まだ開発途中のため、今後どうなるかはわからない
    

    View Slide

34. Compose for TVのこれから
    ● GoogleIOの「TV の新機能と Compose の概要」によると、年末までにベータ版、製
    品版がリリースされるそう
    ○ https://io.google/2023/program/24ef7b93-7823-412e-99b7-b97a615f3334/intl/ja/
    ● ドキュメントも徐々に増えてきているので導入を検討し始めても良いかも？
    ○ https://android-developers.googleblog.com/2023/05/building-pixel-perfect-living-room-experiences-
    compose-for-tv.html
    ○ https://developer.android.com/design/ui/tv
    ○ https://developer.android.com/training/tv/playback/compose
    

    View Slide

35. 参考資料
    ● https://android.googlesource.com/platform/frameworks/support/+/refs/heads/andr
    oidx-main/tv/samples/src/main/java/androidx/tv/samples
    ● https://android.googlesource.com/platform/frameworks/support/+/refs/heads/andr
    oidx-main/compose/ui/ui/integration-tests/ui-demos/src/main/java/androidx/comp
    ose/ui/demos/focus/LazyListChildFocusDemos.kt
    ● https://developer.android.com/jetpack/androidx/releases/tv?hl=en
    ● https://io.google/2023/program/24ef7b93-7823-412e-99b7-b97a615f3334/intl/ja/
    ● https://android-developers.googleblog.com/2023/05/building-pixel-perfect-living-r
    oom-experiences-compose-for-tv.html
    ● https://developer.android.com/design/ui/tv
    ● https://developer.android.com/training/tv/playback/compose
    

    View Slide