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.2k
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
原則から考える保守しやすいComposable関数設計
moriatsushi
3
580
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
6
4.8k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
1.1k
Kotlin MultiplatformでもKSPを使う
moriatsushi
2
800
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
3
7.1k
WindowInsets 2022 feat. Jetpack Compose #ca_aab
moriatsushi
1
1.6k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
93
150k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
3.3k
新卒1年目で Androidアプリの アーキテクチャ移行を主導した話
moriatsushi
1
490
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
Discover Metal 4
rei315
2
110
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
ニーリーにおけるプロダクトエンジニア
nealle
0
710
5つのアンチパターンから学ぶLT設計
narihara
1
140
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Faster Mobile Websites
deanohume
307
31k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Language of Interfaces
destraynor
158
25k
Scaling GitHub
holman
459
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Cult of Friendly URLs
andyhume
79
6.5k
Designing for Performance
lara
609
69k
How STYLIGHT went responsive
nonsquared
100
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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 まもなく公開予定