KMM（Kotlin Multiplatform Mobile）の環境構築とチュートリアル

KMM（Kotlin Multiplatform Mobile）を導入してみよう、ということで、環境構築とチュートリアルをやってみたいと思います。

こちらを参考にやっていく。

https://kotlinlang.org/docs/multiplatform-mobile-getting-started.html

まずは環境構築から。

https://kotlinlang.org/docs/multiplatform-mobile-setup.html#install-the-necessary-tools

なお、手元の環境は以下の通り。

• macOS Ventura 13.3.1
• M1 MacBook Air

必要なのは以下のもの。

1. Android Studio
2. Xcode
3. JDK
4. Kotlin Multiplatform Mobile Plugin
5. Kotlin plugin

Android Studio

https://developer.android.com/studio

どのバージョンをインストールするかかなり迷う。
だが、それも後述するXcodeとの兼ね合いな気もする。

今回は「Android Studio Electric Eel」の最新パッチが当たっているものを入れる。

ここから過去のバージョンをダウンロードできるみたい。

https://developer.android.com/studio/archive

Xcode

Xcodeも同様に最新版をダウンロードすると、Android Studioの兼ね合いもあるので、ちょっと恐いので、過去バージョンが無難かと思われる。

https://developer.apple.com/download/all/

今回はXcode 14.2をベースにやってみる。

JDK

これについてはいったん後回し。
組み込み済みのものでいけないかを検討。

Kotlin Multiplatform Mobile Plugin

Android Studioのプラグインなので、Android Studio経由でインストールする。

Android Studioを起動して、メニューバーにあるSetting… > Pluginsを選び、検索窓にKotlin Multiplatform Mobileと入力すると出てくる。

もしくはAndroid Studioを起動したときに表示される画面のPluginsの項目からもインストールできるようだった。

Kotlin plugin

Kotlinの最新版にアップデートするように書かれてあった。

Android Studioをダウンロードした時点で最新版のものが入っているっぽいので、今回は特に作業は行わない。

まずはプロジェクトの作成をする

専用のプロジェクトのテンプレート（Kotlin Multiplatform App）があった。
たぶん、プラグインを入れたからだと思われる。

プロジェクトの設定。
この部分はいったんこれで初期設定のまま。

Minimum SDKは今回はチュートリアルなので、適当に設定した。

プラットフォームごとの設定。
こちらもきちんと設定をしないといけないかもしれないが、今回はデフォルトの設定をそのまま適用させることに。

プロジェクトができあがった。

話は戻って、JDKの環境構築。
プロジェクトを作って、Gradleの項目を再度見たところ、ちゃんとインストールされているっぽかった。

Andtoid Studio のターミナルでJavaのバージョンを確認

% java -version
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

きちんと読み込まれていない模様

Mac限定のようだけど、kdoctorというチェックツールがある模様。
これをクリアすれば、使えるという感じになりそう。

https://kotlinlang.org/docs/multiplatform-mobile-setup.html#check-your-environment

 % kdoctor 
Environment diagnose (to see all details, use -v option):
[✓] Operation System
[✖] Java
  ✖ Java not found
    Get JDK from https://www.oracle.com/java/technologies/javase-downloads.html
[✓] Android Studio
[✓] Xcode
[✖] Cocoapods
  ✖ System ruby is currently used
    CocoaPods is not compatible with system ruby installation on Apple M1 computers.
    Please install ruby via Homebrew, rvm, rbenv or other tool and make it default
    Detailed information: https://stackoverflow.com/questions/64901180/how-to-run-cocoapods-on-apple-silicon-m1/66556339#66556339
  ✖ CocoaPods requires your terminal to be using UTF-8 encoding.
    Consider adding the following to ~/.zprofile
    export LANG=en_US.UTF-8
    export LC_ALL=en_US.UTF-8

Conclusion:
  ✖ KDoctor has diagnosed one or more problems while checking your environment.
    Please check the output for problem description and possible solutions.

とりあえず~/.zshrcに以下を追加してみることに。
kdoctorで表示されたCocoaPodsのものも追加してみる。

# JDK
export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jbr/Contents/Home/

# CocoaPods
export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

このあたりを参考に。
https://qiita.com/colomney/items/e5fa316f1e34d4b03a27#解決策

https://qiita.com/tsumuchan/items/43a55789f1cf213611cc#android-studioで使っているjdkをターミナルでも使う

追加したらこれを実行。

% source ~/.zshrc

そして、Android Studioを再起動する。

再度kdoctorを実行したら、以下の表示に変わった。

 % kdoctor
Environment diagnose (to see all details, use -v option):
[✓] Operation System
[✓] Java
[✓] Android Studio
[✓] Xcode
[✖] Cocoapods
  ✖ System ruby is currently used
    CocoaPods is not compatible with system ruby installation on Apple M1 computers.
    Please install ruby via Homebrew, rvm, rbenv or other tool and make it default
    Detailed information: https://stackoverflow.com/questions/64901180/how-to-run-cocoapods-on-apple-silicon-m1/66556339#66556339

Conclusion:
  ✖ KDoctor has diagnosed one or more problems while checking your environment.
    Please check the output for problem description and possible solutions.

CocoaPodsに関しては、チュートリアルでは使わないっぽい感じもするので、一旦はスルーする。

デバイスの登録もする必要があるみたい。
Create Deviceからシミュレーターを作っていく。

端末の設定から。
まずは端末の選択。

続いて、端末にインストールするAndroidのOSを決める。
Android StudioにダウンロードされていないOSは別途ダウンロードする必要があった。

最後の確認画面。

簡単に端末の登録ができた。

できあがった端末をターゲットにして、Runすると、動いた 🙌

続いて、iOSで動かす。
ここがKMMの本領発揮なところ。

Run Configrationsの部分をios Appに切り替えてRunする。

しばらくすると、iOSシミュレーターが起動して、ちゃんとアプリが動いた 🙌

Android Studioをほぼ触ったことがなかったけど、テンプレート作成からAndroidとiOSの両方動くものがすぐできたのは、良い感じがする。

ただ、Android Studioはまだ知見がないので、慣れていない部分が多い。
これからいろいろと触っていって深めていけたら。

これでチュートリアルは終わり。
公式のホームページでいうと、この部分まで終わったことになる。

https://kotlinlang.org/docs/multiplatform-mobile-create-first-app.html#update-your-application

まだ続きがあるので、進めていきたいと思う。