Tech Blog

Compose Multiplatform を試してみる

Cover Image for Compose Multiplatform を試してみる

弊社 CTO の 緒方 から JatBrains がだしてる Jetpack Compose ベースのマルチプラットフォーム UI フレームワーク 「Compose Multiplatform」 の話を聞いたので、 Kotlin Multiplatform 環境を整えて iOS, Android と Wasm を試してみる

今回の環境

  • Macbook Pro with Apple silicon (macOS Sequoia Version 15.2)

事前準備

1. JetBrainsRuntime

brew tap sdkman/tap
==> Tapping sdkman/tap
Cloning into '/opt/homebrew/Library/Taps/sdkman/homebrew-tap'...
remote: Enumerating objects: 75, done.
remote: Counting objects: 100% (75/75), done.
remote: Compressing objects: 100% (59/59), done.
remote: Total 75 (delta 21), reused 55 (delta 4), pack-reused 0 (from 0)
Receiving objects: 100% (75/75), 15.30 KiB | 7.65 MiB/s, done.
Resolving deltas: 100% (21/21), done.
Tapped 1 formula (15 files, 36.1KB).
brew install sdkman-cli
==> Fetching sdkman/tap/sdkman-cli
==> Downloading https://github.com/sdkman/sdkman-cli-native/releases/download/v0
==> Downloading from https://objects.githubusercontent.com/github-production-rel
######################################################################### 100.0%
==> Downloading https://github.com/sdkman/sdkman-cli/releases/download/5.18.2/sd
==> Downloading from https://objects.githubusercontent.com/github-production-rel
######################################################################### 100.0%
==> Installing sdkman-cli from sdkman/tap
==> curl -s https://api.sdkman.io/2/candidates/all -o /opt/homebrew/Cellar/sdkma
🍺  /opt/homebrew/Cellar/sdkman-cli/5.18.2: 37 files, 4.5MB, built in 3 seconds
==> Running `brew cleanup sdkman-cli`...
sdk install java 21.0.3-jbr

Downloading: java 21.0.3-jbr

In progress...

######################################################################### 100.
######################################################################### 100.0%

Repackaging Java 21.0.3-jbr...

Done repackaging...
Cleaning up residual files...

Installing: java 21.0.3-jbr
Done installing!

Do you want java 21.0.3-jbr to be set as default? (Y/n): y

Setting java 21.0.3-jbr as default.

2. Android Studio

brew install --cask android-studio
==> Downloading https://formulae.brew.sh/api/cask.jws.json

==> Downloading https://redirector.gvt1.com/edgedl/android/studio/install/2024.2
==> Downloading from https://r3---sn-nvoxu-ioqe7.gvt1.com/edgedl/android/studio/
######################################################################### 100.0%
==> Installing Cask android-studio
==> Moving App 'Android Studio.app' to '/Applications/Android Studio.app'
==> Linking Binary 'studio' to '/opt/homebrew/bin/studio'
🍺  android-studio was successfully installed!

3. Kotlin Multiplatform

マーケットプレイスからインストールする

Marketplace

K2 未対応なので無効化する

Settings

4. Xcode

brew install xcodesorg/made/xcodes
==> Tapping xcodesorg/made
Cloning into '/opt/homebrew/Library/Taps/xcodesorg/homebrew-made'...
remote: Enumerating objects: 20, done.
remote: Counting objects: 100% (20/20), done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 20 (delta 3), reused 4 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (20/20), 4.98 KiB | 4.98 MiB/s, done.
Resolving deltas: 100% (3/3), done.
Tapped 1 formula (15 files, 12KB).
==> Fetching xcodesorg/made/xcodes
==> Downloading https://github.com/XcodesOrg/xcodes/releases/download/1.6.0/xcod
==> Downloading from https://objects.githubusercontent.com/github-production-rel
######################################################################### 100.0%
==> Installing xcodes from xcodesorg/made
==> Pouring xcodes-1.6.0.arm64_mojave.bottle.tar.gz
🍺  /opt/homebrew/Cellar/xcodes/1.6.0: 3 files, 20.6MB
==> Running `brew cleanup xcodes`...
xcodes install --latest

Updating...
Latest release version available is 16.2
Apple ID: ••••••••••••@systemi.co.jp
Apple ID Password: ********
Two-factor authentication is enabled for this account.

Enter the 6 digit code sent to +81 ••-•••-••81: ******

(1/6) Downloading Xcode 16.2.0+16C5032a: 100%
(2/6) Unarchiving Xcode (This can take a while)
(3/6) Moving Xcode to /Applications/Xcode-16.2.0.app
(4/6) Moving Xcode archive Xcode-16.2.0+16C5032a.xip to the Trash
(5/6) Checking security assessment and code signing
(6/6) Finishing installation
xcodes requires superuser privileges in order to finish installation.
macOS User Password: ********

5. CocoaPods

brew install cocoapods
Warning: Treating cocoapods as a formula. For the cask, use homebrew/cask/cocoapods or specify the `--cask` flag. To silence this message, use the `--formula` flag.
==> Downloading https://ghcr.io/v2/homebrew/core/cocoapods/manifests/1.16.2
######################################################################### 100.0%
==> Fetching cocoapods
==> Downloading https://ghcr.io/v2/homebrew/core/cocoapods/blobs/sha256:68781e12
######################################################################### 100.0%
==> Installing cocoapods
==> Pouring cocoapods--1.16.2.arm64_sequoia.bottle.tar.gz
🍺  /opt/homebrew/Cellar/cocoapods/1.16.2: 13,112 files, 22.5MB
==> Running `brew cleanup cocoapods`...

6. KDoctor

brew install kdoctor
==> Downloading https://ghcr.io/v2/homebrew/core/kdoctor/manifests/1.1.0
Already downloaded: /Users/developer/Library/Caches/Homebrew/downloads/0e495b882267b0277427c7586746d73791b5e9b3ab481eab1cdb865433bbf101--kdoctor-1.1.0.bottle_manifest.json
==> Fetching kdoctor
==> Downloading https://ghcr.io/v2/homebrew/core/kdoctor/blobs/sha256:e41df6918e
Already downloaded: /Users/developer/Library/Caches/Homebrew/downloads/ab271958b8cf83f902be4f508d6594911dd4d055a2f134de60b06686338a9ccc--kdoctor--1.(out)1.0.arm64_sequoia.bottle.tar.gz
==> Pouring kdoctor--1.1.0.arm64_sequoia.bottle.tar.gz
🍺  /opt/homebrew/Cellar/kdoctor/1.1.0: 6 files, 4.5MB
==> Running `brew cleanup kdoctor`...

確認

kdoctor
[✓] Operation System
[✓] Java
[✓] Android Studio
[✓] Xcode
[✓] CocoaPods

Conclusion:
  ✓ Your operation system is ready for Kotlin Multiplatform Mobile Development!

プロジェクト作成

https://kmp.jetbrains.com

Kotlin Multiplatform Wizard

Android Studio で開いて実行する

iOS

iosApp

Android

composeApp

Web

設定追加

Run/Debug Configuration

wasmJsApp

参考にしたページ