Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jetpack Composeで UI Catalog Libraryを 作っている話 #an...
Search
Mori Atsushi
August 05, 2021
Programming
1
1.3k
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
https://pepabo.connpass.com/event/219431/
Mori Atsushi
August 05, 2021
Tweet
Share
More Decks by Mori Atsushi
See All by Mori Atsushi
モバイルアプリ開発のためのDesign Doc実践ガイド
moriatsushi
2
510
原則から考える保守しやすいComposable関数設計
moriatsushi
3
720
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
6
5k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
1.1k
Kotlin MultiplatformでもKSPを使う
moriatsushi
2
840
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
3
7.3k
WindowInsets 2022 feat. Jetpack Compose #ca_aab
moriatsushi
1
1.6k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
93
160k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
3.3k
Other Decks in Programming
See All in Programming
CSC305 Lecture 03
javiergs
PRO
0
230
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
Advance Your Career with Open Source
ivargrimstad
0
330
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
940
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
380
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
明日から始めるリファクタリング
ryounasso
0
110
Catch Up: Go Style Guide Update
andpad
0
170
CSC509 Lecture 02
javiergs
PRO
0
400
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
180
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
BBQ
matthewcrist
89
9.8k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Designing for Performance
lara
610
69k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
It's Worth the Effort
3n
187
28k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Become a Pro
speakerdeck
PRO
29
5.5k
How GitHub (no longer) Works
holman
315
140k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Bash Introduction
62gerente
615
210k
Writing Fast Ruby
sferik
629
62k
Transcript
Jetpack Composeで UI Catalog Libraryを 作っている話 Mori Atsushi - -
#android_meetup
森 篤史 2019年度 新卒⼊社 Androidアプリエンジニア CyberZ CTO室 メンバー 次世代マネジメント室 メンバー
2019年度 未踏スーパークリエータ @at_sushi_at Mori-Atsushi
最近の活動 https://note.com/cyberz_cto/n/n f d c https://zenn.dev/at_sushi_at/books/edf adfc
🚀 今⽇お届けしたい話 UI Catalogはいいぞ Jetpack Composeはいいぞ
.UI Catalog導⼊の背景 .UI Catalog Libraryの紹介 .Jetpack Composeの採⽤結果 .今後の展望とまとめ
UI Catalog導⼊の背景
🤯 UIの複雑化がもう⼤変!
OPENREC.tvの例 ライブ配信 動画アップロード
OPENREC.tvの例 ライブ配信 動画アップロード ライブ中 配信予定 アーカイブ
OPENREC.tvの例 ライブ中 配信予定 アーカイブ 通常配信 限定配信 サブスク PPV スペシャル番組 限定公開
お試し公開
Dark/Lightの対応
多様なデバイス/OS
💣 安全かつスピーディーに UI変更を⾏いたい
• Instrumented Test • Visual Regression Test テスタブルな構成 実⾏環境 差分検知
結果の通知 運⽤コスト、メンテナンスコスト ⾃動テストでUIデグレに⽴ち向かう ⾃動化まではいくつかのハードルがある
UI Catalogという選択肢 • コンポーネントやページを登録するアプリケーション • ⼿動テストをしやすい形を実現する • Catalogに登録されたコンポーネントに⾃動テストを⾏う事もできる
周辺の環境 Android(View)版は無い状態 → 作成を決断 iOS Web https://github.com/playbook-ui/playbook-ios https://github.com/storybookjs/storybook Android(Compose) https://github.com/airbnb/Showkase
Showkase
UI Catalog Libraryの紹介
Katalog A UI Catalog Library made with Jetpack Compose 🚧
開発中 | まもなく公開予定
Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /
ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /
ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
Katalog - 特徴 • 追加しやすいDSL • View / DataBinding /
ViewBinding / Fragment / Jetpack Composeに対応 • Jetpack Compose製
利⽤例 • 早期に実装を開始する APIの開発待ち 仕様が決まりきってない場合 デザインの決まっているところから実装を開始することが可能 • UIのリファクタや機能追加 ① UI
Catalogに既存のUIを追加する ② 変更や修正 ③ UI Catalogで確認 ⽐較的安全に変更を加えられる
Jetpack Composeの 採⽤結果
なぜJetpack Compose? • プロダクションへの導⼊はまだ抵抗があった ⼀⽅で早く試していきたい デバッグツールなら試しやすい • 将来Jetpack Composeで作成したUIもスムーズに追加していきたい 最初からJetpack
Composeベースで作成
メリット - 複雑なUIの書きやすさ • 画⾯上にアイテムを 2個ちょっと表⽰する カルーセル • LazyRow RecyclerView的なやつ
• BoxWithConstraints 親の成約を把握し、レイアウトすることができる ここではmaxWidthを取得するために利⽤
メリット - アニメーションの容易さ • 画⾯遷移のリッチな アニメーションも Kotlinで書ける • AnimatedContent 複数のコンテンツを
アニメーションあり で切り替える
既存Viewとの共存 • AndroidView AndroidViewを表⽰するComposable • 表⽰するだけであれば問題なさそう • Fragmentを表⽰するComposableは ⽤意されなかったため、⾃作した
アーキテクチャについては検討が必要そう • Jetpack ViewModelとの結合 scope管理がちょっとめんどくさい for Webやfor Desktopと共通では使えない そもそも画⾯回転時等にViewを破棄する必要はないのでは? 今回はentry
pointでのみ利⽤ • 画⾯遷移の実装 現在のnavigationはstringベースのため、型安全でない for Webやfor DesktopではViewModelと同様に使えない 今回は完全⾃作
今後の展望とまとめ
今後の展望 • 検索機能 • さらなる機能の拡充 背景⾊の指定、変更 再起動時にページ位置を復元する • Visual Regression
Testとの連携 • For Desktop, For Webの提供 Katalog A UI Catalog Library made with Jetpack Compose まもなく公開予定