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
タクシーアプリ「GO」AndroidにできるところからJetpack Composeを入れ...
Search
gyamoto
April 07, 2022
Programming
0
830
タクシーアプリ「GO」AndroidにできるところからJetpack Composeを入れている話 / Introduce Jetpack Compose gradually
gyamoto
April 07, 2022
Tweet
Share
More Decks by gyamoto
See All by gyamoto
脱Accompanistを考える / Bye Accompanist
gya
0
440
実践 脱Modifier.composed / Let's Modifier.Node
gya
2
760
タクシーアプリ『GO』Androidのリリースフロー / Release GO App
gya
1
1.3k
私の好きなModifier関数 / My Favorite Modifier
gya
0
980
2022年ヘルスケアアプリのつくり方 / 2022 A Healthcare App Odyssey
gya
0
1.5k
Gradle BOM importでライブラリバージョン管理 / DroidKaigi2019
gya
3
2.1k
Firebaseで解決するAndroidの機種依存 / Firebase solve android device difference
gya
2
1.3k
Other Decks in Programming
See All in Programming
状態と共に暮らす:ステートフルへの挑戦
ypresto
3
1.2k
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.5k
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
7
1.5k
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
160
M5UnitUnified 最新動向 2025/05
gob
0
130
バイラテラルアップサンプリング
fadis
3
330
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
120
Global Azure 2025 @ Kansai / Hyperlight
kosmosebi
0
130
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
810
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
240
オープンソースコントリビュート入門
_katsuma
0
120
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
260
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Adopting Sorbet at Scale
ufuk
76
9.3k
It's Worth the Effort
3n
184
28k
Music & Morning Musume
bryan
47
6.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rails Girls Zürich Keynote
gr2m
94
13k
For a Future-Friendly Web
brad_frost
177
9.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Producing Creativity
orderedlist
PRO
344
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
The Pragmatic Product Professional
lauravandoore
33
6.6k
Transcript
Mobility Technologies Co., Ltd. タクシーアプリ「GO」Androidにできるところから Jetpack Composeを入れている話 Kohei Yamamoto
Mobility Technologies Co., Ltd. ▪ Kohei Yamamoto ▪ 株式会社 Mobility
Technologies ▪ GO ユーザアプリ Android 自己紹介 2
Mobility Technologies Co., Ltd. 「GO」のどこにJetpack Composeを入れているのか 3 01
Mobility Technologies Co., Ltd. 背景 ▪ 既存実装と共存できるようにJetpackComposeを導入 ▪ Navigation, ViewModel,
Dependency Injectionの使い方は大きく変更しない ▪ プロダクト成長のため機能開発のスピードが落ちないよう気をつける ▪ JetpackComposeのプレビュー機能を活用したい ▪ アプリの規模が大きくなりビルド時間が長い ▪ レイアウトの実装をスムーズに進めたい 「GO」のどこにJetpackComposeを入れているのか 4
Mobility Technologies Co., Ltd. ▪ デバッグメニューのActivity ▪ JetpackComposeの導入テストとして、本番ビルドに影響のない画面を実装 ▪ 既存画面の一部レイアウト
▪ 機能追加に関連するレイアウトをJetpackComposeで実装 ▪ 既存のレイアウトXMLにComposeViewとして追加 ▪ 新規画面のレイアウト ▪ 既存実装にあわせてFragmentを追加して、全てのレイアウトを JetpackComposeで実装 ▪ Navigation, ViewModel, DIの使い方はそのまま ▪ ViewModelの状態をもとにUI Stateを生成して画面表示 「GO」のどこにJetpackComposeを入れているのか 5
Mobility Technologies Co., Ltd. 実装アプローチと ライブラリの変更点 02 6
Mobility Technologies Co., Ltd. ▪ LazyList ▪ Before : ListView,
RecyclerView, Groupie ▪ After : LazyColumn, LazyRow ▪ ImageLoader ▪ Before : Picasso (Square, Inc.) ▪ After : Coil ▪ PlaceHolder ▪ Before : Shimmer (Meta Platforms, Inc.) ▪ After : Placeholder (Accompanist) 実装アプローチとライブラリの変更点 7
Mobility Technologies Co., Ltd. Before : ListView, RecyclerView, Groupie After
: LazyColumn, LazyRow ▪ LazyColumn/RowはAdapterが不要なのでシンプルな実装になる場合が多い ▪ RecyclerViewからLazyColumn/Rowへの移行が難しい場合もある ▪ アイテムアニメーションが提供されていない ▪ ヘッダーやグリッド表示もまだ試験運用中 ▪ LazyColumn/Rowのパフォーマンスについて不安点はあるが、表示件数の少ない シンプルなリストが多く、影響は小さい ▪ できる範囲で新しいリストはLazyColumn/Rowで実装している 実装アプローチとライブラリの変更点 LazyList 8
Mobility Technologies Co., Ltd. Before : Picasso (Square, Inc.) After
: Coil ▪ 画像読み込みのある画面もJetpackComposeのプレビュー機能を活用したい ▪ 新しい画面はCoilで画像読み込み ▪ PicassoからCoilへの移行 ▪ 画像ライブラリを入れ替える良いきっかけになった ▪ 画像読み込みのある画面が少ないので移行できそう ▪ ライブラリの移行が難しい場合はJetpackCompose向けのWrapper実装で プレビュー機能を活用できる 実装アプローチとライブラリの変更点 ImageLoader 9
Mobility Technologies Co., Ltd. Before : Shimmer (Meta Platforms, Inc.)
After : Placeholder (Accompanist) ▪ ローディング表示する画面もJetpackComposeのプレビュー機能を活用したい ▪ 新しい画面はPlaceholderでローディング表示 ▪ ShimmerからPlaceholderへの移行 ▪ Shimmerを使っている画面を改修するタイミングで少しずつ 実装アプローチとライブラリの変更点 Placeholder 10
Mobility Technologies Co., Ltd. 今後のJetpack Composeで やりたいこと 03 11
Mobility Technologies Co., Ltd. 背景 JetpackComposeレイアウトにAndroidViewが混ざるとプレビュー機能が使えない。 よく使われる共通レイアウトがAndroidViewだと開発効率が下がってしまう。 やりたいこと AndroidViewでよく使われる共通レイアウトのJetpackCompose化 例:共通ボタン、通信ローディング表示
進め方 1. 既存レイアウトをJetpackComposeで再実装する 2. 既存のAndroidView向けレイアウトをJetpackComposeに置き換える 3. レイアウトの意図しない変更が起きてないかスクショテスト 参考:Composeの既存のUIとの統合 | AndroidDevelopers https://developer.android.com/jetpack/compose/interop/compose-in-existing-ui 今後のJetpackComposeでやりたいこと 12
Mobility Technologies Co., Ltd. ▪ プレビュー機能の活用を優先し、2つの実装の共存を許容する ▪ それぞれの画面によってレイアウトを使い分ける 今後のJetpackComposeでやりたいこと 1.
既存レイアウトをJetpackComposeで再実装 13 AndroidView ConposeView
Mobility Technologies Co., Ltd. ▪ AndroidViewの内部でComposeViewを参照して実装を1つに揃える ▪ 参照している全画面に影響があるため動作確認が大変 今後のJetpackComposeでやりたいこと 2.
既存AndroidViewをJetpackComposeに置き換え 14 AndroidView ConposeView
Mobility Technologies Co., Ltd. ▪ AndroidViewの内部変更によって、意図しない変更が起きてないか確認する ▪ スクショテストによって安心してJetpackCompose化を進められる 今後のJetpackComposeでやりたいこと 3.
レイアウト変更をスクショテストで確認 15
文章·画像等の内容の無断転載及び複製等の行為はご遠慮ください。 Mobility Technologies Co., Ltd. 16