Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
プレビューファーストUI開発 2024/01/19 Shibuya.apk 46 mitohato14
Slide 2
Slide 2 text
自己紹介 名前 Miyazato Hayato (mito) SNS mitohato14 所属 合同会社DMM.com 仕事 ・DMM PointClubアプリ開発 ・社内SDKの開発 ・社内勉強会
Slide 3
Slide 3 text
1
Slide 4
Slide 4 text
サービス LP:https://lp.pointclub.dmm.com/ DMMポイントをお 得に貯めて 賢く管理 ! カジュアルゲームで 効率的に ポイントを稼げる ! FEATURE FEATURE DMMの お得な情報が 届く! FEATURE 2 サービスコンセプト
Slide 5
Slide 5 text
Web (iOS・Android) プラットフォーム 5
Slide 6
Slide 6 text
ポイントクラブのUI開発の悩み
Slide 7
Slide 7 text
UI開発の悩み ・状態やパターンが複雑な画面で実装漏れが発生する ・実装の見積もりが甘く、実装が伸びがち ・残りUI層のみになって考慮漏れ発覚 ・UI層で扱うデータがAPIからそのまま
Slide 8
Slide 8 text
プレビューを活用した開発を
Slide 9
Slide 9 text
プレビュー機能 Composableの見た目を様々なパターンで確認 コードの修正がリアルタイム反映 簡単な操作も
Slide 10
Slide 10 text
プレビュー機能 Composableの見た目を様々なパターンで確認 コードの修正がリアルタイム反映 簡単な操作も
Slide 11
Slide 11 text
プレビュー機能 確認したいパターンが多いと......
Slide 12
Slide 12 text
プレビュー機能 確認したいパターンが多いと......
Slide 13
Slide 13 text
😇
Slide 14
Slide 14 text
PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableのファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
Slide 15
Slide 15 text
PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableの実装ファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
Slide 16
Slide 16 text
PreviewParameterProvider プレビュー用機能 大規模なデータセットをプレビューに利用するために利用 Composableの実装ファイルが見やすく プレビューに提供できるオブジェクトの型は1種類
Slide 17
Slide 17 text
😎
Slide 18
Slide 18 text
プレビューファーストなUI開発
Slide 19
Slide 19 text
プレビューファーストUI開発 まず、プレビューを定義する PreviewParameterProviderで各パターンの定義 最後にComposable実装
Slide 20
Slide 20 text
開発の流れ 1. UIコンポーネントごとに分割する 2. 利用する値を1つのクラスにする(今回はUiModel) 3. パターンに応じたインスタンスでProvider定義 4. Preview定義 5. Composable定義
Slide 21
Slide 21 text
UIコンポーネントに分割 画面をある程度のまとまりに分割 利用する値を一つのクラスにまとめられる程度
Slide 22
Slide 22 text
UIコンポーネントに分割
Slide 23
Slide 23 text
UIコンポーネントに分割
Slide 24
Slide 24 text
UIコンポーネントに分割 ←CampaignComponent ↓PriceComponent ↓ContentComponent
Slide 25
Slide 25 text
空のComposableとUiModelの定義 UIコンポーネントに適したComposable名とUIModelの定義 Composableの中身は後で
Slide 26
Slide 26 text
空のComposableとUiModelの定義
Slide 27
Slide 27 text
空のComposableとUiModelの定義
Slide 28
Slide 28 text
空のComposableとUiModelの定義
Slide 29
Slide 29 text
PreviewParameterProvider定義 UiModelを状態パターンごとにインスタンス化 Providerの作成
Slide 30
Slide 30 text
PreviewParameterProvider定義
Slide 31
Slide 31 text
PreviewParameterProvider定義
Slide 32
Slide 32 text
PreviewParameterProvider定義
Slide 33
Slide 33 text
Preview Composableの定義 空のComposableとProviderの繋ぎこみ まだ表示されない
Slide 34
Slide 34 text
Preview Composableの定義
Slide 35
Slide 35 text
Preview Composableの定義
Slide 36
Slide 36 text
Preview Composableの定義
Slide 37
Slide 37 text
PR作成 Providerとプレビュー定義でPR作成 PR差分を小さく パターン定義の過不足を注視
Slide 38
Slide 38 text
PR作成
Slide 39
Slide 39 text
Composableの実装 パターンに応じた表示ができるように プレビューを確認しながらやるだけ
Slide 40
Slide 40 text
プレビューの確認
Slide 41
Slide 41 text
プレビューの確認
Slide 42
Slide 42 text
プレビューの確認
Slide 43
Slide 43 text
利点 ・パターン別確認でUIの実装漏れを防ぐ ・作業・PR分担ができる ・API接続してなくてもUI開発できる ・パターンごとのデバッグがしやすい ・デザイナーさんとの確認がしやすい ・Composableが見やすく
Slide 44
Slide 44 text
懸念点 ・Composableに合わせたクラス作成が少し面倒 ・分割する基準が難しい ・多くの値も利用したUI表現が難しい ・プレビュー描画が重い
Slide 45
Slide 45 text
まとめ ・PreviewParameterProviderを利用したプレビューファースト ・UIパターンの先定義で実装漏れ防止 ・いつでもどのComposableからでも実装できる ・表現が難しい場合がある ・分割しすぎると面倒に感じてしまう
Slide 46
Slide 46 text
参考 https://developer.android.com/jetpack/compose/tooling/preview s https://developer.android.com/reference/kotlin/androidx/compo se/ui/tooling/preview/PreviewParameterProvider