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

by SSK

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

普通のComposeとの違い ImmersiveList

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

つまずいたところ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

解決方法

Slide 28

Slide 28 text

解決方法

Slide 29

Slide 29 text

解決方法

Slide 30

Slide 30 text

解決方法

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

参考資料 ● 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