Jetpack Composeとデザインシステム

Jetpack Composeの課題〜モバイルアプリの品質改善を考える〜 の発表資料です。

Appendix
* https://developer.android.com/develop/ui/compose/designsystems
* https://developer.android.com/develop/ui/compose/designsystems/material2-material3?hl=j a#when-migrate
* https://developer.android.com/develop/ui/compose/designsystems/custom?hl=ja#replacing- systems
* https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ma terial/material/src/commonMain/kotlin/androidx/compose/material/Button.kt;l=406-419
* https://developer.android.com/develop/ui/compose/layouts/basics?hl=ja#slot-based-layouts
* https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose-compone nt-api-guidelines.md#slot-parameters
* https://zenn.dev/kyash/articles/267566e787f9e6

Transcript

1. ©2024 Kyash Inc. ©2024 Kyash Inc. Jetpack Composeと デザインシステム 2024/05/13 rmakiyama(MAKIYAMA Ryo) Jetpack Composeの課題〜モバイルアプリの品質改善を考える〜
2. ©2024 Kyash Inc. 2 • Kyash (2022/10 -) • Android Engineer • Engineering Manager • @_rmakiyama • @rmakiyama MAKIYAMA Ryo 自己紹介
3. ©2024 Kyash Inc. 3 Kyashについて お支払いも お金の管理も かんたんに Visaプリペイドカードとスマホで、いつでもどこでも、かんたんにお支払い。 アプリへのリアルタイムな履歴反映や自動カテゴリー分類で、お金の管理もかんたんに。
4. ©2024 Kyash Inc. KyashとJetpack Compose • 2021年5月から導入開始 • Fragmentの上にComposeViewを載せる運用 • 新規実装する画面は基本的にJetpack Composeを利用 • 大小含め100画面以上を実装 Jetpack Composeがデファクトスタンダード󰚗 4 ※2024年5月現在
5. ©2024 Kyash Inc. Jetpack Composeとデザインシステム 5 https://developer.android.com/develop/ui/compose/designsystems Androidにはマテリアルデザインというベースのデザインシステムがあり、 Jetpack Compose を使用すると、デザイン システムを簡単に実装できる。
6. ©2024 Kyash Inc. Jetpack Composeとデザインシステム 6 https://developer.android.com/develop/ui/compose/designsystems Androidにはマテリアルデザインというベースのデザインシステムがあり、 Jetpack Compose を使用すると、デザイン システムを簡単に実装できる。 🤔
7. ©2024 Kyash Inc. Jetpack Composeとデザインシステム • Material2？Material3？ • MaterialThemeをそのまま使う？カスタムする？ • コンポーネントの粒度は？ • 答えはプロダクトによって違う💡 テーマ設定やコンポーネント分割は悩みが多い 7
8. ©2024 Kyash Inc. ©2024 Kyash Inc. Kyashの事例を紹介󰦖 8 8
9. ©2024 Kyash Inc. KyashとJetpack Composeとデザインシステム • KyashのデザインシステムをMaterial 2ベースで実装する • マテリアルシステムを置き換える形で実装する • ボタンなどはマテリアルコンポーネントを利用する • 独自のマスターコンポーネントを実装する デザインシステム実装のアプローチ 9 ※ 説明に使うコードは説明のためにプロダクションコードから改変しているものもあります
10. ©2024 Kyash Inc. KyashとJetpack Composeとデザインシステム • KyashのデザインシステムをMaterial 2ベースで実装する • マテリアルシステムを置き換える形で実装する • ボタンなどはマテリアルコンポーネントを利用する • 独自のマスターコンポーネントを実装する デザインシステム実装のアプローチ 10 ※ 説明に使うコードは説明のためにプロダクションコードから改変しているものもあります
11. ©2024 Kyash Inc. KyashのデザインシステムをMaterial 2ベースで実装する Kyash Interface Guideline • プロダクトとしての一貫性の担保 • 作業・意思決定の効率化とデザインの拡張性 • ユーザビリティの向上 KIG 11
12. ©2024 Kyash Inc. KyashのデザインシステムをMaterial 2ベースで実装する • KIGもMaterial 2をベースとしている ◦ “デザイン システムを M2 から M3 に移行した後で段階的な移行を開始”することが推奨されている • 既存の画面はこれまでMaterial 2ベースで実装されている ◦ 既存の画面の置き換えは優先度が低いため、移行する場合、共存する期間が長いことが想定される Why Material 2 12 https://developer.android.com/develop/ui/compose/designsystems/material2-material3?hl=ja#when-migrate
13. ©2024 Kyash Inc. マテリアルシステムを置き換える • Primary/Success/Error/etc… • デザイナーと認識を合わせやすいように 命名などはKIGに揃える e.g. Colors 13
14. ©2024 Kyash Inc. マテリアルシステムを置き換える/Colors 14 https://developer.android.com/develop/ui/compose/designsystems/custom?hl=ja#replacing-systems
15. ©2024 Kyash Inc. マテリアルシステムを置き換える • 独自のシステム • CompositionLocalを活用する Spacing 15
16. ©2024 Kyash Inc. マテリアルシステムを置き換える/Spacing 16
17. ©2024 Kyash Inc. マテリアルシステムを置き換える/Spacing 17
18. ©2024 Kyash Inc. マテリアルコンポーネントを利用する • マテリアルコンポーネントの資産を活かす • 極力ピュアな実装意識する e.g. Buttons 18
19. ©2024 Kyash Inc. マテリアルコンポーネントを利用する/Buttons 19 • マテリアルコンポーネントのAPIに合わせる • 色のレパートリーをデフォルト実装で表現
20. ©2024 Kyash Inc. マテリアルコンポーネントを利用する/Buttons 20 • マテリアルコンポーネントのAPIに合わせる • 色のレパートリーをデフォルト実装で表現
21. ©2024 Kyash Inc. マテリアルコンポーネントを利用する/Buttons/KyashButtonDefault 21 • ButtonDefaultsを参考にしている • デフォルトの色を指定しつつ 個別に変更もしやすいようなAPI https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src /commonMain/kotlin/androidx/compose/material/Button.kt;l=406-419
22. ©2024 Kyash Inc. マテリアルコンポーネントを利用する/Buttons/Easy 22 • Stringを受け取るコンポーザブルも用意 • 標準のボタンをEasyに使う
23. ©2024 Kyash Inc. 独自のマスターコンポーネント 23 e.g. Cell • ラベルと値を表示するコンポーネント • テキストのスタイルなどは変動がある
24. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 24
25. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 25 🤯
26. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 26 スロットベースのレイアウトとして実装 • 個別に任意のスタイルを適用しやすい • 要素が増えてもAPIをシンプルに保てる ※ 利用するときに少し冗長になる Slot https://developer.android.com/develop/ui/compose/layouts/basics?hl=ja#slot-based-layouts https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose-component-api-guidelines.md#slot-parameters
27. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 27 󰗨
28. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 28 スロットベースでも ベーシックなスタイルを適用したい • ラベルとその値のテキストはBodyスタイル • 値のテキストカラーはtextColorTertialy • スロットで毎回指定するのは避けたい 󰢁
29. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 29
30. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 30
31. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 31
32. ©2024 Kyash Inc. 独自のマスターコンポーネント/Cell 32
33. ©2024 Kyash Inc. Thank you!! • マテリアルシステムをベースにKIGデザインシステムを実装 • マテリアルコンポーネントの資産を活かしたAPIの設計 • スロットベースのレイアウトを活用して独自コンポーネントを実装 • 生産性の向上と一貫性のあるデザインをアプリに適用することができる まとめ󰢥 33
34. ©2024 Kyash Inc.
35. ©2024 Kyash Inc. Appendix 35 https://developer.android.com/develop/ui/compose/designsystems https://developer.android.com/develop/ui/compose/designsystems/material2-material3?hl=j a#when-migrate https://developer.android.com/develop/ui/compose/designsystems/custom?hl=ja#replacing- systems https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ma terial/material/src/commonMain/kotlin/androidx/compose/material/Button.kt;l=406-419 https://developer.android.com/develop/ui/compose/layouts/basics?hl=ja#slot-based-layouts https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose-compone nt-api-guidelines.md#slot-parameters https://zenn.dev/kyash/articles/267566e787f9e6