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
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
CI改善もDatadogとともに
taumu
0
110
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Immutable ActiveRecord
megane42
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Honoとフロントエンドの 型安全性について
yodaka
4
250
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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