東急カードプラスのCompose Preview活用事例

DroidKaigi.onCompletion { 2024@Online } https://yumemi.connpass.com/event/329691/

Transcript

1. 東急カードプラスの Compose Preview 活用事例 東急株式会社 デジタルプラットフォーム URBAN HACKS 大塚 立樹
2. 自己紹介 2 • 大塚 立樹 / Ritsuki Otsuka • 東急株式会社 URBAN HACKS • Androidエンジニア（3年目） • 「東急カードプラス」Androidアプリの開発を担当
3. 東急カードプラス 3 • TOKYU CARDのご利用明細や、TOKYU POINT CARDのポイント残高など を確認できる • 東急沿線エリアのタイムリーでおトクな情報や、ポイントがお得に貯まる方法など も紹介 • 2023年3月にリニューアルリリース • 技術スタック • Jetpack Compose (100%) • Jetpack Navigation • Kotlin Coroutines and Flow • Dagger Hilt • etc…
4. 東急カードプラスでの Previewの使用目的
5. 東急カードプラスでの Previewの使用目的 5 • 実装者以外や新規メンバーを含む開発者が画面の実装を確認しても、その画面にどのようなUIのパ ターンがあるのか一目でわかるようにしたい • フォントサイズを大きくした時や、折りたたみ端末等のデバイスでのレイアウト崩れを早期に検知したい
6. 東急カードプラスの画面実装
7. 東急カードプラスの画面実装 7
8. 東急カードプラスの画面実装 8 1. TOKYU POINT残高 2. お支払い額 3. ご利用実績 4. ピックアップ 5. かしこいポイントの貯め方
9. 東急カードプラスの画面実装 9 1. TOKYU POINT残高 → TokyuPointSection 2. お支払い額 → PaymentAmountSection 3. ご利用実績 → MonthlyPaymentsSection 4. ピックアップ → PickupSection 5. かしこいポイントの貯め方 → PointEarningTipsSection
10. 東急カードプラスの画面実装 10 1. TOKYU POINT残高 → TokyuPointSection 2. お支払い額 → PaymentAmountSection 3. ご利用実績 → MonthlyPaymentsSection 4. ピックアップ → PickupSection 5. かしこいポイントの貯め方 → PointEarningTipsSection ➡ SectionごとにUI Stateを作成
11. 東急カードプラスの画面実装 11 data class HomeUiState( // 1. TOKYU POINT残高 val tokyuPointSectionUiState: TokyuPointSectionUiState, // 2. お支払い額 val paymentAmountSectionUiState: PaymentAmountSectionUiState?, // 3. ご利用実績 val monthlyPaymentsSectionUiState: MonthlyPaymentsSectionUiState? // 4. ピックアップ val pickupSectionUiState: PickupSectionUiState?, // 5. かしこいポイントの貯め方 val pointEarningTipsSectionUiState: PointEarningTipsSectionUiState ) : HomeUiState
12. 東急カードプラスの画面実装 12 Previewを作成する対象UI • Screen（画面の単位） • Section（画面内の意味のあるまとまり）
13. 東急カードプラスの画面実装 13 ちなみに・・・ この画面実装は、DroidKaigi 2023 公式アプリを参考にしています！ https://github.com/DroidKaigi/conference-app-2023
14. 複雑なUI Stateのパターンを Previewする
15. 複雑なUI Stateのパターンを Previewする 15
16. 複雑なUI Stateのパターンを Previewする 16 TOKYU POINT残高表示の基本UIパターン 1. ポイント表示状態 2. ポイント非表示状態 3. ローディング状態
17. 複雑なUI Stateのパターンを Previewする 17 TOKYU POINT残高表示の基本UIパターン 1. ポイント表示状態 2. ポイント非表示状態 3. ローディング状態 　　　　　❎ 時間ごとの UIパターン 1. 朝（4:00〜10:59） 2. 昼（11:00〜16:59） 3. 夜（17:00〜3:59）
18. 複雑なUI Stateのパターンを Previewする 18 PreviewParameter • 複数パターンのPreviewを作成したいときに活用できる • リスト形式のデータセットをPreview Composableに渡してPreviewが表示できる
19. 複雑なUI Stateのパターンを Previewする 19 @Preview @Composable private fun TokyuPointSectionPreview( @PreviewParameter(TokyuPointSectionPreviewParameterProvider::class) uiState: TokyuPointSectionUiState ) { HachiTheme { TokyuPointSection(tokyuPointSectionUiState = uiState) } }
20. 複雑なUI Stateのパターンを Previewする 20 @Preview @Composable private fun TokyuPointSectionPreview( @PreviewParameter(TokyuPointSectionPreviewParameterProvider::class) uiState: TokyuPointSectionUiState ) { HachiTheme { TokyuPointSection(tokyuPointSectionUiState = uiState) } }
21. 複雑なUI Stateのパターンを Previewする 21 class TokyuPointSectionPreviewParameterProvider : PreviewParameterProvider<TokyuPointSectionUiState> { override val values: Sequence<TokyuPointSectionUiState> = sequenceOf( // ローディング状態 TokyuPointSectionUiState.Loading, // ポイント表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Night), // ポイント非表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Night) ) }
22. 複雑なUI Stateのパターンを Previewする 22 class TokyuPointSectionPreviewParameterProvider : PreviewParameterProvider<TokyuPointSectionUiState> { override val values: Sequence<TokyuPointSectionUiState> = sequenceOf( // ローディング状態 TokyuPointSectionUiState.Loading, // ポイント表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Night), // ポイント非表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Night) ) }
23. 複雑なUI Stateのパターンを Previewする 23 class TokyuPointSectionPreviewParameterProvider : PreviewParameterProvider<TokyuPointSectionUiState> { override val values: Sequence<TokyuPointSectionUiState> = sequenceOf( // ローディング状態 TokyuPointSectionUiState.Loading, // ポイント表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Night), // ポイント非表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Night) ) }
24. 複雑なUI Stateのパターンを Previewする 24 class TokyuPointSectionPreviewParameterProvider : PreviewParameterProvider<TokyuPointSectionUiState> { override val values: Sequence<TokyuPointSectionUiState> = sequenceOf( // ローディング状態 TokyuPointSectionUiState.Loading, // ポイント表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Night), // ポイント非表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Night) ) }
25. 複雑なUI Stateのパターンを Previewする 25 class TokyuPointSectionPreviewParameterProvider : PreviewParameterProvider<TokyuPointSectionUiState> { override val values: Sequence<TokyuPointSectionUiState> = sequenceOf( // ローディング状態 TokyuPointSectionUiState.Loading, // ポイント表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountVisible(pointAmount = 1000, timePeriod = TimePeriod.Night), // ポイント非表示状態 x 時間帯 TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Morning), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Noon), TokyuPointSectionUiState.PointAmountHidden(pointAmount = 1000, timePeriod = TimePeriod.Night) ) }
26. 複雑なUI Stateのパターンを Previewする 26 @Preview @Composable private fun TokyuPointSectionPreview( @PreviewParameter(TokyuPointSectionPreviewParameterProvider::class) uiState: TokyuPointSectionUiState ) { HachiTheme { TokyuPointSection(tokyuPointSectionUiState = uiState) } }
27. カスタムマルチプレビューアノテーション
28. カスタムマルチプレビューアノテーション 28 • カスタムで定義された、複数の@Previewを含むアノテーションクラス • カスタムマルチプレビューアノテーションを使用することで、異なるプレビューが同時に自動で表示できる • 異なるデバイスの種類や、フォントサイズなどを一度にプレビューするのに便利
29. カスタムマルチプレビューアノテーション 29 @Preview(name = "1 デフォルト") @Preview( name = "2 最大フォントサイズ", fontScale = 2.0f ) @Preview(name = "3 Foldable", device = Devices.FOLDABLE) annotation class HachiPreviews 1. 通常端末サイズ 2. 最大フォントサイズ 3. 折りたたみ端末
30. カスタムマルチプレビューアノテーション 30 @Preview(name = "1 デフォルト") @Preview( name = "2 最大フォントサイズ", fontScale = 2.0f ) @Preview(name = "3 Foldable", device = Devices.FOLDABLE) annotation class HachiPreviews
31. カスタムマルチプレビューアノテーション 31 @Preview(name = "1 デフォルト") @Preview( name = "2 最大フォントサイズ", fontScale = 2.0f ) @Preview(name = "3 Foldable", device = Devices.FOLDABLE) annotation class HachiPreviews
32. カスタムマルチプレビューアノテーション 32 @Preview(name = "1 デフォルト") @Preview( name = "2 最大フォントサイズ", fontScale = 2.0f ) @Preview(name = "3 Foldable", device = Devices.FOLDABLE) annotation class HachiPreviews
33. カスタムマルチプレビューアノテーション 33 @Preview(name = "1 デフォルト") @Preview( name = "2 最大フォントサイズ", fontScale = 2.0f ) @Preview(name = "3 Foldable", device = Devices.FOLDABLE) annotation class HachiPreviews
34. カスタムマルチプレビューアノテーション 34 @Preview @Composable private fun TokyuPointSectionPreview( @PreviewParameter(TokyuPointSectionPreviewParameterProvider::class) uiState: TokyuPointSectionUiState ) { HachiTheme { TokyuPointSection(tokyuPointSectionUiState = uiState) } } 👈 カスタムマルチプレビューに置き換える
35. カスタムマルチプレビューアノテーション 35 // @Preview @HachiPreviews @Composable private fun TokyuPointSectionPreview( @PreviewParameter(TokyuPointSectionPreviewParameterProvider::class) uiState: TokyuPointSectionUiState ) { HachiTheme { TokyuPointSection(tokyuPointSectionUiState = uiState) } }
36. まとめ 36 東急カードプラスでは • PreviewParameterを用いて、実装者以外や新規メンバーを含む開発者が画面の実装を確認しても、 その画面にどのようなUIのパターンがあるのか一目でわかる状態を実現しています • カスタムマルチプレビューアノテーション を用いて、フォントサイズを大きくした際や、折りたたみ端末等 のデバイスでのレイアウト崩れを早期に検知できるように取り組んでいます
37. Thank you for listening! ご清聴ありがとうございました！