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
550
原則から考える保守しやすいComposable関数設計
moriatsushi
3
730
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
6
5.1k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
1.1k
Kotlin MultiplatformでもKSPを使う
moriatsushi
2
850
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
3
7.3k
WindowInsets 2022 feat. Jetpack Compose #ca_aab
moriatsushi
1
1.6k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
94
160k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
3.3k
Other Decks in Programming
See All in Programming
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
420
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
1
240
NIKKEI Tech Talk#38
cipepser
0
110
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
7k
Software Architecture
hschwentner
6
2.3k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
250
AI Agent 時代的開發者生存指南
eddie
4
2k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Language of Interfaces
destraynor
162
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Side Projects
sachag
455
43k
Gamification - CAS2011
davidbonilla
81
5.5k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Designing for humans not robots
tammielis
254
26k
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 まもなく公開予定