Slide 1

Slide 1 text

Compose Multiplatformでも Hot Reloadが動くらしい 2024/12/17 Kotlin愛好会 Vol.56 にしこりさぶろ〜(@subroh_0508)

Slide 2

Slide 2 text

自己紹介 / リアルのすがた 2 プロダクト本部 プロダクト組織開発部 DevHR 坂上 晴信 Harunobu Sakaue 🎤 経歴 1995年生まれ。東京の離島・伊豆大島出身。 プロダクト組織専任の人事職として、あらゆる業務に従事。 ● 2016年3月 東京高専 情報工学科卒 ● 2016年4月 株式会社TOKIUM入社 2016年4月 💼Android/Webエンジニア(6年8ヶ月) ● 2023年1月 DevHRにロールチェンジ 2023年1月 💼エンジニア採用・組織作り・採用広報 ● Now!! 9月の愛好会で会場貸出 + 🍣と板前さんを 呼んだ会社の人です😎

Slide 3

Slide 3 text

自己紹介 / インターネットのすがた 3 【🗾1,421km】にしこりさぶろ〜 @subroh_0508 Kotlin歴: 8年10ヶ月 アイマスP歴: 7年半 ラブライバー歴: 2年 3 ↓担当アイドル ↓推し ↓推し 💖好きなもの Kotlin / アイドルマスター / ラブライブ Kotlin本体へのContribute経験、Kotlin Festへの登壇経験 アリ(2019、2022、2024)。DevHRになって以降は開発 業務から離れたが、趣味でKotlinを書き続けている。 アイドルマスター・ラブライブのライブにも、頻繁に足を 運ぶ。『シャニマス』三峰結華と『蓮ノ空』村野さやかが 人生のロールモデル。 ↓担当アイドル

Slide 4

Slide 4 text

やぁみんな!👋 Compose Multiplatform 使ってるか!? 4 イントロダクション

Slide 5

Slide 5 text

Compose Multiplatformって 最高だよな!!!😎 最高ポイント、順に挙げてこうぜ!!! 5 イントロダクション

Slide 6

Slide 6 text

🌟 最高ポイント(1) 宣言的にUIを実装できる ➔ UIのロジックを直感的に書ける! ➔ もうActivity / Fragmentで実装していた時代には戻れない! 6 @Composable fun ArtistCardRow(artist: Artist) { Row(verticalAlignment = Alignment.CenterVertically) { Image(bitmap = artist.image, contentDescription = "Artist image") Column { Text(artist.name) Text(artist.lastSeenOnline) } } } イントロダクション

Slide 7

Slide 7 text

🌟 最高ポイント(2) IDE上で画面をプレビューしながら実装できる ➔ 試行錯誤のスピードが爆速に! 7 イントロダクション

Slide 8

Slide 8 text

🌟 最高ポイント(3) X-Platに対応 ➔ iOS・Desktop・WebアプリのUIを1つのコードで実装できる! 8 Androidに加え イントロダクション

Slide 9

Slide 9 text

Compose Multiplatformって 最高だよな!!!(2回目)😎 でも、まだ足りないものが…… 9 イントロダクション

Slide 10

Slide 10 text

10 イントロダクション 足りないもの、それは……  Hot Reload!

Slide 11

Slide 11 text

11 イントロダクション 足りないもの、それは……  Hot Reload! Flutterにはあるのに😖

Slide 12

Slide 12 text

12 イントロダクション そんなある日…👀 x.com/Sellmair/status/1846933575242764467

Slide 13

Slide 13 text

13 イントロダクション そんなある日…👀 x.com/Sellmair/status/1846933575242764467 あれ…!? Compose Multiplatformで Hot Reloadが動作してるんだが…!?

Slide 14

Slide 14 text

14 イントロダクション そんなある日…👀 JetBrains/compose-hot-reload しかもJetBrainsのレポジトリに 移動してる!?

Slide 15

Slide 15 text

15 イントロダクション そんなある日…👀 JetBrains/compose-hot-reload しかもJetBrainsのレポジトリに 移動してる!? 使ってみるしかないなぁ😎

Slide 16

Slide 16 text

🌟 Hot Reloadが動作するのは、現状Desktopビルドのみ ➔ Android / iOSのエミュレーター上でのHot Reloadは動作しない!😇 16 前提: compose-hot-reloadはどう動くのか issueには上がっているが、対応されるかなぁ…🤔

Slide 17

Slide 17 text

🛠 Kotlin Multiplatform Wizardでテンプレートをダウンロード ➔ Desktopにチェックを付けておく 17 compose-hot-reloadを動かしてみる kmp.jetbrains.com

Slide 18

Slide 18 text

🛠 READMEに沿ってセットアップ ➔ リモートリポジトリを追加 18 compose-hot-reloadを動かしてみる

Slide 19

Slide 19 text

🛠 READMEに沿ってセットアップ ➔ プラグインを設定 19 compose-hot-reloadを動かしてみる Kotlinのバージョンも別途指定が必要 compose-hot-reloadプラグインの設定

Slide 20

Slide 20 text

🛠 READMEに沿ってセットアップ ➔ OptimizeNonSkippingGroupの設定を追加 20 compose-hot-reloadを動かしてみる

Slide 21

Slide 21 text

🛠 Hot Reloadを有効にしたい部分を DevelopmentEntryPointメソッドでくくる 21 compose-hot-reloadを動かしてみる fun main() = application { Window( onCloseRequest = ::exitApplication, title = "hot-reload-sample", ) { DevelopmentEntryPoint { App() } } } ブロック内の実装に変更があると Hot Reloadが動作

Slide 22

Slide 22 text

🛠 ./gradlew :composeApp:desktopRunを実行! 22 compose-hot-reloadを動かしてみる

Slide 23

Slide 23 text

🛠 ./gradlew :composeApp:desktopRunを実行! ➔ エラーで落ちる😢 ので対応 23 compose-hot-reloadを動かしてみる

Slide 24

Slide 24 text

🛠 ./gradlew :composeApp:desktopRunを実行! ➔ エラーで落ちる😢 ので対応 24 compose-hot-reloadを動かしてみる mainClassプロパティを使って 実行対象のクラスを指定する必要がある

Slide 25

Slide 25 text

🛠 ./gradlew :composeApp:desktopRunを実行! ➔ エラーで落ちる😢 ので対応 25 compose-hot-reloadを動かしてみる IDE上で実行する場合、 「Run/Debug Configurations」を修正

Slide 26

Slide 26 text

🛠 ./gradlew :composeApp:desktopRunを実行! ➔ エラーを潰しきると… 26 compose-hot-reloadを動かしてみる ウィンドウの横にアイコンと カラーバーが出現

Slide 27

Slide 27 text

27 まとめ 👍 Compose MultiplatformでHot Reloadが動くと楽しい! ➔ Desktopビルドしか動かない制限はあるが、使う価値はありそう ➔ Android / iOSエミュレーターでも動く未来が早く来て欲しい! Thank you for listening! プラグインの制作者が 解説動画も出しているので 気になった方はcheck!