3
7

話題のkotlin Multiplatformを使ってみた(環境構築~ビルドまで)

Last updated at Posted at 2024-08-06

はじめに

みなさん、kotlin Multiplatform(KMP)ってご存じでしょうか?
https://www.jetbrains.com/ja-jp/kotlin-multiplatform/

Kotlin Multiplatformはさまざまなプラットフォーム向けのアプリケーションを作成し、ネイティブプログラミングのメリットを維持しながらプラットフォーム間でコードを再利用可能にするテクノロジーです。(公式原文まま)

何がすごいってiOS, android, windows, Linuxなど異なるOSで動作するので、これを使えば極論、全てのコードを一括管理できるわけなんです。

ひと昔はiOSならObjective-Cやswift、androidならandroid kotlinなど、OSごとに異なるソースで管理されていたものが、KMPを使うと一つのコードに集約できちゃうらしいんですよ!(筆者はiOSエンジニアなのでandroidエアプです)

最近はFlutterとか、React Nartiveとかでクロスプラットフォームフレームワークがどんどん出てきましたが、今回は、今挙げた二つよりも、新しくできたkotlin Multiplatformの環境を構築していき、どんなことができるか色々試していこうと思います!

本記事について

基本的に以下の公式のチュートリアルをなぞる構成になっています。
英語苦手だよー、という方は本記事が参考になれば幸いです。
https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-getting-started.html

また、プログラミング初学者でもわかるように、深くまでは掘らず、比較的ざっくりとした感じの記事構成となっていますので、あらかじめご了承ください。

環境構築

必要なツールのインストール

・ android studio
以下の公式サイトからダウンロードした
https://developer.android.com/studio?hl=ja

android studioのプロジェクト選択画面が出ればOK


・ Xcode
App storeからインストール
https://apps.apple.com/jp/app/xcode/id497799835?mt=12

Xcodeを開いた状態の上タブから「Xcode」→「Settings」→「Locations」→「Command Line Tools」で「Xcode**.*」を選択する

スクリーンショット 2024-08-06 22.03.08.png


・ JDK Javaをインストール。 https://www.oracle.com/java/technologies/downloads/?er=221886

x64とarm64があるが、自身のPCのアーキテクチャがわからない人はターミナルで以下を実行すればわかります。

$> uname
arm64 // 筆者はM1 macなのでarm64

以下コマンドで、Javaが入っていればOK

$> java -version
java version "22.0.2" 2024-07-16
Java(TM) SE Runtime Environment (build 22.0.2+9-70)
Java HotSpot(TM) 64-Bit Server VM (build 22.0.2+9-70, mixed mode, sharing)

・Kotlin Multiplatform plugin android studioを開いて「settings」→「Plugins」で「Kotlin Multiplatform」と検索して出てきたPluginをインストールする。

スクリーンショット 2024-08-06 22.03.08.png

※元々android studioが入ってた人のみ該当
・kotlinのバージョンを最新に上げる。
互換性の問題を避けるためにandroid studioのプロジェクト選択画面で「plugins」→「installed」→「kotlin」と選び、kotlinの横に「update」ボタンを押す。

環境が準備できているかの確認

ターミナルで以下のコマンドを実施

$> kdoctor
Environment diagnose (to see all details, use -v option):
[✓] Operation System
[✓] Java
[✓] Android Studio
[✓] Xcode
[!] CocoaPods
  ! CocoaPods configuration is not required, but highly recommended for full-fledged development
  ✖ 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:
  ✓ Your operation system is ready for Kotlin Multiplatform Mobile Development!

ここではCocoaPodsでwaringが出ているが必須ものではないので、ここではスルー
「Conclusion」が問題なければOK
※CocoaPodsとはiOSのパッケージ管理ツールです。

ここまで完了すれば環境構築は終了です。

アプリケーションの作成

wizardでプロジェクトを作成

以下にアクセスする
https://kmp.jetbrains.com/?_gl=1*1d31uig*_gcl_au*NDY4OTY0ODc2LjE3MjI5NDgwMjU.*_ga*ODA3MzE5NTEzLjE3MjI5NDgwMTI.*_ga_9J976DJZ68*MTcyMjk0ODAxMS4xLjEuMTcyMjk1MTAyMy42MC4wLjA.


Project Name、Project IDを設定して「DOWNLOAD」を押下
※今回は公式チュートリアルと同じものを使用しています。
スクリーンショット 2024-08-06 22.30.18.png

プロジェクトを開く

  1. android studioを起動
  2. 上の手順で作成したプロジェクトを開く

スクリーンショット 2024-08-06 22.39.12.png

ここで各ディレクトリについて軽く触れておく


/composeApp/src/androidMain
android独自のロジックを記載する場所

/composeApp/src/iOSMain
iOS独自のロジックを記載する場所

/composeApp/src/commonMain
両OSで共通するロジックを持たせる場所

/iOSApp
iOSアプリをビルドするためのXcodeプロジェクト。
パッケージ管理ツールとしてCocoaPodsを使える。
つまりiOSのアプリを動かすためのものが入っている場所

※公式ドキュメントでは/sharedというディレクトリがあるらしいのですが、見つからず。。。
ソースコードを追った感じ、なんとなくこんな雰囲気だろうな、という感じでの解釈になっているので、ここは間違えている可能性があります!

アプリケーションをシミュレータで実行してみる

iOS

右上の「Edit Configuration」→「+」→「iOS Application」を選択
スクリーンショット 2024-08-07 0.06.07.png

「Xcode project file」に/iosApp/iosApp.xcodeprojを選択。
「Execution Target」(デバイスやOS)を任意に選択して「Apply」したのち、Runを実行

スクリーンショット 2024-08-07 0.05.06.png

できた。

android

「composeApp」をconfigurationに設定した状態で実行

スクリーンショット 2024-08-07 0.39.19.png

エミュレータがない場合は右タブの「Device Manager」から好きなデバイスをインストールして使うことができる。
スクリーンショット 2024-08-07 0.41.06.png

スクリーンショット 2024-08-07 0.38.07.png

できた

最後に

ひとまずiOS、androidのアプリを実行できるところまでできたので、本記事は以上にしようと思います。
次の記事で、実際にコードを書いてみて、どんなことができそうか試してみようと思うので、興味あれば次の記事も見てみてください!

ここまで見ていただきありがとうございました!

参考文献

3
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
7