フル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
2. 目次 • 自己紹介 • 背景 • 話すこと • 話さないこと • Compose for TV とは？ • 普通のComposeとの違い • つまずいたところとその解決策 • 現時点での辛み • 採用して良かったところ • リリースされそうな機能 • Compose for TVのこれから
3. 自己紹介 • 名前: 佐々木知洋(SSK) • twitter: @t_ssksan • Github: sasakitomohiro • Android、Flutter • CyberFightのWRESTLE UNIVERSEという プロレスの動画配信サービスの モバイル、AndroidTVアプリを作っています
4. 背景 • モバイル版のアプリがすでにあり、試聴体験をさらによくするためにAndroidTV版の アプリを開発することになった • 技術選定をするタイミングでちょうど良くCompose for TVのalpha01が出た • 今後Composeでの開発が主流になっていくことを考え、選定した ◦ Compose自体は採用事例が多くなっていたため、何かあっても回避はできそう
5. 話すこと • Compose for TVと通常のComposeとの違い • つまずいたところとその解決策 • 採用してよかったと感じているところ
6. 話さないこと • WRESTLE UNIVERSEのサービス内容や機能について • WRESTLE UNIVERSEのアーキテクチャについて • Composeの概要やその使い方について
7. Compose for TV とは？ • AndroidTV向けのComposeでUIを構築できるツールキット • AndroidTVデバイス向けのComposable等が提供されている • AndroidTVデバイスはタッチ操作はできないため、リモコンでの操作を実現すること ができる ※2023/5/29現在、alpha版のため今回の発表内容からできること・ できないことなどが大きく変わる可能性があるため予めご了承ください
8. 普通のComposeとの違い • 開発が普通のComposeとは別で進められている(TV専用のモジュール) • 用意されているComposable ◦ LazyColumn、LazyRowのようにTVではTvLazyColumn、TvLazyRowなどがある ◦ その他にもTV特有のImmersiveListをはじめとしてCarouselなども用意されている ◦ Compose for TVで用意されているComposableから通常のComposeのComposableを使うことや、そ の逆もできる
9. 普通のComposeとの違い • 開発が普通のComposeとは別で進められている(TV専用のモジュール) • 用意されているComposable ◦ LazyColumn、LazyRowのようにTVではTvLazyColumn、TvLazyRowなどがある ◦ その他にもTV特有のImmersiveListなども用意されている ◦ Compose for TVで用意されているComposableから通常のComposeのComposableを使うことや、そ の逆もできる
10. 普通のComposeとの違い • 通常のLazyColumnやLazyRowと何が違うか ◦ フォーカスされている要素の位置の制御が入っている ◦ Pivotといい、PivotOffsetsというパラメータでフォーカスされる要素の端をどの辺にするかを指定する ことが可能
11. 普通のComposeとの違い • 実際のコードの違い
12. 普通のComposeとの違い 通常のComposeのLazyColumn、LazyRow
13. 普通のComposeとの違い Compose for TVのTvLazyColumn、TvLazyRow
14. 普通のComposeとの違い • 開発が普通のComposeとは別で進められている(TV専用のモジュール) • 用意されているComposable ◦ LazyColumn、LazyRowのようにTVではTvLazyColumn、TvLazyRowなどがある ◦ その他にもTV特有のImmersiveListなども用意されている ◦ Compose for TVで用意されているComposableから通常のComposeのComposableを使うことや、そ の逆もできる
15. 普通のComposeとの違い ImmersiveList
16. 普通のComposeとの違い その他用意されているComposable • Surface • TvLazyGrid • Button • OutlinedButton • IconButton • OutlinedIconButton • RadioButton • WideButton • Card • ClassicCard • CompactCard • WideClassicCard • Checkbox • TriStateCheckbox • Icon • ModalNavigationDrawer • NavigationDrawer • Switch • Tab • TabRow • Text • などなど
17. つまずいたところ • フォーカスを当てたいところにフォーカスが当たらない • 画面遷移して戻った時にフォーカスがない • TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の 要素に当たらない
18. つまずいたところ • フォーカスを当てたいところにフォーカスが当たらない • 画面遷移して戻った時にフォーカスがない • TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の 要素に当たらない
19. 解決方法 FocusRequesterを駆使してフォーカスを当てる
20. 解決方法 FocusRequesterを駆使してフォーカスを当てる 例) タブがあるレイアウトの時に選択中のタブにフォーカスを当てたい
21. 解決方法 FocusRequesterを駆使してフォーカスを当てる
22. つまずいたところ • フォーカスを当てたいところにフォーカスが当たらない • 画面遷移して戻った時にフォーカスがない • TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の 要素に当たらない
23. 解決方法 FocusRequesterを駆使してフォーカスを当てる 例) リストアイテムをクリックして詳細画面に遷移後、前の画面に戻ってフォーカスを戻す
24. つまずいたところ • フォーカスを当てたいところにフォーカスが当たらない • 画面遷移して戻った時にフォーカスがない • TvLazyColumnとTvLazyRowを組み合わせた時に初期状態でフォーカスが最初の 要素に当たらない
25. つまずいたところ
26. 解決方法 FocusRequesterとPinnableContainerを使って最初は0番目の要素フォーカスを当て、そ れ以降は最後にフォーカスを当てたところに当たるようにする
27. 解決方法
28. 解決方法
29. 解決方法
30. 解決方法
31. 現時点での辛み • まだalpha版のため知見が少ない • 不具合か仕様かがわからないことがある
32. 採用して良かったところ • Composeで画面を作れる(レガシーな技術を使わなくて良いため学習コストが少な い) • 知見を横軸で共有できる
33. リリースされそうな機能 MediaPlayer • 現状Composeでプレイヤーを実装するには ExoPlayerなどを自前でComposeで使えるようにしている • ExoPlayerをWrapしている • まだ開発途中のため、今後どうなるかはわからない
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
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