Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Composeで
UI Catalog Libraryを
作っている話 #android_meetup

Jetpack Composeで
UI Catalog Libraryを
作っている話 #android_meetup

Mori Atsushi

August 05, 2021
Tweet

More Decks by Mori Atsushi

Other Decks in Programming

Transcript

  1. Jetpack Composeで
    UI Catalog Libraryを
    作っている話
    Mori Atsushi - - #android_meetup

    View full-size slide

  2. 森 篤史
    2019年度 新卒⼊社
    Androidアプリエンジニア
    CyberZ CTO室 メンバー
    次世代マネジメント室 メンバー
    2019年度 未踏スーパークリエータ
    @at_sushi_at Mori-Atsushi

    View full-size slide

  3. 最近の活動
    https://note.com/cyberz_cto/n/n f d c https://zenn.dev/at_sushi_at/books/edf adfc

    View full-size slide

  4. 🚀 今⽇お届けしたい話
    UI Catalogはいいぞ
    Jetpack Composeはいいぞ

    View full-size slide

  5. .UI Catalog導⼊の背景
    .UI Catalog Libraryの紹介
    .Jetpack Composeの採⽤結果
    .今後の展望とまとめ

    View full-size slide

  6. UI Catalog導⼊の背景

    View full-size slide

  7. 🤯
    UIの複雑化がもう⼤変!

    View full-size slide

  8. OPENREC.tvの例
    ライブ配信
    動画アップロード

    View full-size slide

  9. OPENREC.tvの例
    ライブ配信
    動画アップロード
    ライブ中
    配信予定
    アーカイブ

    View full-size slide

  10. OPENREC.tvの例
    ライブ中
    配信予定
    アーカイブ
    通常配信
    限定配信
    サブスク
    PPV
    スペシャル番組
    限定公開
    お試し公開

    View full-size slide

  11. Dark/Lightの対応

    View full-size slide

  12. 多様なデバイス/OS

    View full-size slide

  13. 💣
    安全かつスピーディーに
    UI変更を⾏いたい

    View full-size slide

  14. • Instrumented Test
    • Visual Regression Test
    テスタブルな構成
    実⾏環境
    差分検知
    結果の通知
    運⽤コスト、メンテナンスコスト
    ⾃動テストでUIデグレに⽴ち向かう
    ⾃動化まではいくつかのハードルがある

    View full-size slide

  15. UI Catalogという選択肢
    • コンポーネントやページを登録するアプリケーション
    • ⼿動テストをしやすい形を実現する
    • Catalogに登録されたコンポーネントに⾃動テストを⾏う事もできる

    View full-size slide

  16. 周辺の環境
    Android(View)版は無い状態 → 作成を決断
    iOS
    Web
    https://github.com/playbook-ui/playbook-ios
    https://github.com/storybookjs/storybook
    Android(Compose)
    https://github.com/airbnb/Showkase
    Showkase

    View full-size slide

  17. UI Catalog Libraryの紹介

    View full-size slide

  18. Katalog
    A UI Catalog Library made with Jetpack Compose
    🚧 開発中 | まもなく公開予定

    View full-size slide

  19. Katalog - 特徴
    • 追加しやすいDSL
    • View / DataBinding / ViewBinding /
    Fragment / Jetpack Composeに対応
    • Jetpack Compose製

    View full-size slide

  20. Katalog - 特徴
    • 追加しやすいDSL
    • View / DataBinding / ViewBinding /
    Fragment / Jetpack Composeに対応
    • Jetpack Compose製

    View full-size slide

  21. Katalog - 特徴
    • 追加しやすいDSL
    • View / DataBinding / ViewBinding /
    Fragment / Jetpack Composeに対応
    • Jetpack Compose製

    View full-size slide

  22. 利⽤例
    • 早期に実装を開始する
    APIの開発待ち
    仕様が決まりきってない場合
    デザインの決まっているところから実装を開始することが可能
    • UIのリファクタや機能追加
    ① UI Catalogに既存のUIを追加する
    ② 変更や修正
    ③ UI Catalogで確認
    ⽐較的安全に変更を加えられる

    View full-size slide

  23. Jetpack Composeの
    採⽤結果

    View full-size slide

  24. なぜJetpack Compose?
    • プロダクションへの導⼊はまだ抵抗があった
    ⼀⽅で早く試していきたい
    デバッグツールなら試しやすい
    • 将来Jetpack Composeで作成したUIもスムーズに追加していきたい
    最初からJetpack Composeベースで作成

    View full-size slide

  25. メリット - 複雑なUIの書きやすさ
    • 画⾯上にアイテムを
    2個ちょっと表⽰する
    カルーセル
    • LazyRow
    RecyclerView的なやつ
    • BoxWithConstraints
    親の成約を把握し、レイアウトすることができる
    ここではmaxWidthを取得するために利⽤

    View full-size slide

  26. メリット - アニメーションの容易さ
    • 画⾯遷移のリッチな
    アニメーションも
    Kotlinで書ける
    • AnimatedContent
    複数のコンテンツを
    アニメーションあり
    で切り替える

    View full-size slide

  27. 既存Viewとの共存
    • AndroidView
    AndroidViewを表⽰するComposable
    • 表⽰するだけであれば問題なさそう
    • Fragmentを表⽰するComposableは
    ⽤意されなかったため、⾃作した

    View full-size slide

  28. アーキテクチャについては検討が必要そう
    • Jetpack ViewModelとの結合
    scope管理がちょっとめんどくさい
    for Webやfor Desktopと共通では使えない
    そもそも画⾯回転時等にViewを破棄する必要はないのでは?
    今回はentry pointでのみ利⽤
    • 画⾯遷移の実装
    現在のnavigationはstringベースのため、型安全でない
    for Webやfor DesktopではViewModelと同様に使えない
    今回は完全⾃作

    View full-size slide

  29. 今後の展望とまとめ

    View full-size slide

  30. 今後の展望
    • 検索機能
    • さらなる機能の拡充
    背景⾊の指定、変更
    再起動時にページ位置を復元する
    • Visual Regression Testとの連携
    • For Desktop, For Webの提供
    Katalog
    A UI Catalog Library
    made with Jetpack Compose
    まもなく公開予定

    View full-size slide