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
最新のCompose Multiplatform を使うとiOSとAndroidアプリはどれく...
Search
FujiKinaga
October 05, 2023
Programming
2
610
最新のCompose Multiplatform を使うとiOSとAndroidアプリはどれくらい作れるのか
CA.aab #4 での登壇資料です。
サンプルプロジェクトはこちら
https://github.com/FujiKinaga/cmp-sample
FujiKinaga
October 05, 2023
Tweet
Share
More Decks by FujiKinaga
See All by FujiKinaga
Androidのテストの理解を深めてみた
fujikinaga
0
55
開発案件の進み方
fujikinaga
0
87
深いい勉強会 vol.10
fujikinaga
0
80
深いい勉強会 vol.9
fujikinaga
0
100
Understanding Dagger2 Part1
fujikinaga
0
43
Mater of Subscription
fujikinaga
0
63
深いい勉強会
fujikinaga
2
69
深いい勉強会 The Navigation Component
fujikinaga
0
53
深いい勉強会
fujikinaga
0
66
Other Decks in Programming
See All in Programming
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Writing documentation can be fun with plugin system
okuramasafumi
0
120
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
DROBEの生成AI活用事例 with AWS
ippey
0
130
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Formの複雑さに立ち向かう
bmthd
1
720
sappoRo.R #12 初心者セッション
kosugitti
0
230
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Bash Introduction
62gerente
610
210k
4 Signs Your Business is Dying
shpigford
182
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Done Done
chrislema
182
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Building Adaptive Systems
keathley
40
2.4k
Transcript
AbemaTV, Inc. All Rights Reserved AbemaTV, Inc. All Rights Reserved
1 最新のCompose Multiplatform を使うとiOSとAndroidアプリはど れくらい作れるのか 2023 October 5th 株式会社サイバーエージェント Fuji Kinaga
AbemaTV, Inc. All Rights Reserved 2 1. 自己紹介 2. 本セッションについて
3. 質問タイム 4. 知ったこと 5. 考えたこと 6. 悩んでいること 7. 触ってみての所感 8. 参考資料 INDEX
AbemaTV, Inc. All Rights Reserved 木永風児 # 緊張しいなので登壇は苦手でやってます # ABEMA
# Androidエンジニア # 2020中途入社 3 Profile
AbemaTV, Inc. All Rights Reserved 今回のセッションについて 4 • Compose Multiplatformの基本情報
• Compose ◦ for Desktop ◦ for Web ◦ HTML • デバイス機能を活用するケースの発展実装 • Compose for iOS • 動くものを作ってハマった点や学び について 触れること 触れないこと
AbemaTV, Inc. All Rights Reserved 質問です! 5
AbemaTV, Inc. All Rights Reserved Compose Multiplatformとの触れ合い方 6 • 業務で使ってるよ
• 調査・検証し始めてるよ • 使ってみたいと思ってるよ • その他
AbemaTV, Inc. All Rights Reserved 予想 記事は出てるけど、 なんとなく更新されてってるんだろうなぁ で止まっている方が多いかも? 7
AbemaTV, Inc. All Rights Reserved 先に進んでみましょう!🚗 8
AbemaTV, Inc. All Rights Reserved 知ったこと 9 • WebViewの提供はなし ◦
Android: AndroidViewで埋め込み ◦ iOS: UIKitViewで埋め込み • ブラウザ遷移も提供なし ◦ Android: Intent.ACTION_VIEW ◦ iOS: UIApplication openURL WebView / ブラウザ遷移 アプリ起動のスプラッシュ 共通化が難しい部分 • Android ◦ SplashScreen API • iOS ◦ Launch Screenの設定 or Storyboard or • ロゴのアセットもそれぞれ管理が必 要
AbemaTV, Inc. All Rights Reserved 知ったこと 10 • painterResource()とresource() ◦
png, jpg, xmlの画像をcommon内で取得で きる ◦ ByteArrayを返せる • shared/src/commonMain/resources配下に 置く • CocoaPodsの定義が不要になり、 pod install も不要になったのでビルドコスト減 画像リソース管理 WindowInsets 最近(3ヶ月)で共通化ができるようになった部分 • 例の森さんがInsetsXとしてライブラ リを出していた ◦ https://github.com/mori-atsushi/ins etsx • 1.5.0から公式でも対応された • 1.5.10-beta02(Latest)からModifier のAPIも対応された ◦ https://github.com/JetBrains/compose-multiplatform/pull/3340
AbemaTV, Inc. All Rights Reserved 知ったこと 11 Material Components 最近(3ヶ月)で共通化ができるようになった部分
2 • 1.5.10-beta02(Latest)時点の対応状 況 ◦ Material3: 1.1.2 ◦ Material: 1.5.1 • 本家のJetpackComposeの提供にほ ぼほぼ追いついた🎉 ◦ Material3: 1.1.2 (Stable) ◦ Material: 1.5.2 (Stable) https://developer.android.com/jetpack/compose/components 全部使えます◎
AbemaTV, Inc. All Rights Reserved 知ったこと 12 • KeyboardControllerや FocusManagerも使える
• KeyboardOptionやKeyboardAction も指定できる • 先述したWindowInsetsも使えるので かなり操作体験が向上🔨 • MoleculeがiOSでも動作する ◦ DisplayLinkClockというのを使う ▪ https://github.com/cashapp/molecule/ pull/170 ◦ RecompositionModeはContextClockだと 動かないのでImmediateで動作させる ▪ https://github.com/cashapp/molecule/i ssues/2#issuecomment-1348840994 • パフォーマンス面は未検証です Composeを使ったUiLogic管理 Keyboardとフォーカス制御 意外とここもいける部分
AbemaTV, Inc. All Rights Reserved 知ったこと 13 • cashapp/multiplatform-pagingが3.2.0-alphaからJetBrains Composeにも対応
• 先日、androidx paging 3.3.0-alpha02もKMP対応された • androidx pagingは現時点ではまだcomposeの実装まではiOSの考慮を提供していない • Compose Multiplatformで動かす場合は引き続きcashapp製の3.3.0-alphaを使いましょう ページング 意外とここもいける部分 2
AbemaTV, Inc. All Rights Reserved 考えたこと 14 • Hot Reloadもないのでビルド頻度減らしたい
💪 • uiToolingPreviewはandroidMainにしか入れ られない • commonMainベースで開発する時に Previewのためだけにわざわざ androidMain を作りたくない • マルチモジュールで並列ビルド ◦ ついでにCompositeBuildも入れたい • 画像リソースの置き場所問題 ◦ 基本の設定だとshared配下のものしか 読み込まない ◦ ただ、xcode側の設定を頑張りたくない sharedモジュール肥大化しがち Preview使って開発したい!
AbemaTV, Inc. All Rights Reserved Preview関数だけを入れられる previewモジュールを作成し た (niaのcatalogモジュールと同様の構成 )
このモジュールには androidMainしか存在しない 画像 考えたこと 15 uiモジュールから参照される designsystemモジュールを作 成した Preview使って開発したい! 画像
AbemaTV, Inc. All Rights Reserved 考えたこと 16 マルチモジュールな構成でビルドが通るようにした sharedモジュールに入れた画像リソースは他のモジュール からも参照できた
(文字列参照のため ) sharedモジュール肥大化しがち
AbemaTV, Inc. All Rights Reserved 悩んでいること 17 • IntentやSharedPreferencesの生成にはContextが必要 •
setContentするActivityから渡していき、expect/actualでandroidMain内の実装を頑 張る • 良いDIライブラリ🥺 AndroidにおけるContextの渡し方
AbemaTV, Inc. All Rights Reserved 触ってみての所感 18 • え、思ったよりめっちゃ動く •
KotlinやJetpackCompose、MaterialComponents側のアップデートへの追従が早く なってる ◦ 数ヶ月前は2~3ヶ月ほどズレがあったが、今は1週間もあれば対応される • Kotlin1.9.20-Beta2からGradle Configuration CacheもKMP対応し、環境としては 整いつつあるのでは • デバイス機能や動画に手を出す場合はまだツラミ ◦ moko-{hoge}のライブラリがあることに期待しましょう
AbemaTV, Inc. All Rights Reserved github.com/FujiKinaga/cmp-sample 19 セッションで紹介した内容のサンプルコード作りましたので良かったら 🙏
AbemaTV, Inc. All Rights Reserved 参考資料 20 • Compose Multiplatform
for iOS がアルファ版に! ◦ https://blog.jetbrains.com/ja/kotlin/2023/05/compose-multiplatform-for-ios-is-in-alpha/ • Compose for iOS for ZOZOTOWN ◦ https://speakerdeck.com/kohei_inoue/compose-for-ios-for-zozotown • Compose Multiplatform for iOSで音声再生しようぜ!! ◦ https://speakerdeck.com/kohei_inoue/compose-multiplatform-for-iosdeyin-sheng-zai-sheng-siyouze • Compose で Android/iOS アプリを作る ◦ https://speakerdeck.com/m_coder/ios-ahuriwozuo-ru • KALEIDOT.NET ◦ https://kaleidot.net/
AbemaTV, Inc. All Rights Reserved