Kotlin Multiplatform Mobile を使って Android, iOS アプリを作ってみた

Kotlin Multiplatform Mobile を使って Android, iOS アプリを作ってみた

Kotlin Multiplatform Mobile をチュートリアルに沿って動かしてみました。
Clock Icon2022.11.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Android アプリケーションの開発をやってみたくて、いろいろなサイトを見ていたところ、Kotlin Multiplatform が面白そうだと思いました。実際に触ってみたかったので、公式サイトのチュートリアルが初心者でもできそうな内容でしたので、チュートリアルに沿って Android, iOS で動くアプリケーションを作ってみました。

※執筆時点で Kotlin Multiplatform Mobile はベータ版です。詳細はこちらを参照してください。

環境をセットアップ

今回の実行環境として、以下の通りセットアップしました。

  • macOS: Monterey 12.6
    • チップ: Apple M1
  • Android Studio: 2021.3.1 Patch 1
    • Kotlin Multiplatform Mobile plugin: 0.3.4
  • Xcode: 14.1
  • Java: openjdk 11.0.16.1

必要な環境はこちらを参考に構築することができました。

macOS限定ですが、構築した環境を検証することができる KDoctor というツールもあるようです。環境がうまく動かないなどあれば、使ってみると良いと思います。

プロジェクトを作成

Android Studio でプロジェクトを新規作成します。ウェルカム画面に表示されている [New Project] ボタンから作成するか、メニューの [File] → [New] → [New Project...] から作成することができます。

プロジェクトのセットアップダイアログが表示されたら、Kotlin Multiplatform App を選択して次に進みます。

適当なプロジェクト名を入力し次に進みます。

iOS framework distributionRegular framework を選択してプロジェクトを作成します。ここの設定でライブラリ管理ツールの CocoaPods を使うこともできるようです。

プロジェクトの構成を確認

プロジェクトを作成すると、デフォルトで以下のような構成となっていました。

プロジェクトには3つのモジュールが作成されています。

モジュール 役割 ビルドシステム 言語
shared Android アプリケーションと iOS アプリケーションで共通で利用するモジュール Gradle Kotlin
androidApp Android アプリケーションに組み込まれるモジュール Gradle Kotlin
iOSApp iOS アプリケーションに組み込まれるXcode Xcode Swift

構成からわかるように、共通のロジックを共通モジュール(shared)で実装し、Andoroid 用のモジュール(androidApp)と iOS 用のモジュール(iOSApp)から利用する構成となっているようです。

アプリケーションを実行

テンプレートからプロジェクトを作成すると、簡単なアプリが動く状態となっているので、実際に起動してみます。

Android アプリケーション

Android アプリケーションを実行するには、Android Virtual Device を作成します。
メニューから [Tools] → [Device Manager] をクリックして、デバイスマネージャを開きます。 作成ダイアログに従って、適当なデバイス、OS などを選択して、作成します。

デバイスが作成できたら、実行構成に androidApp、デバイスに上記で作成したデバイスが選択されていることを確認して、実行ボタンをクリックして、実行します。

少し待つと、エミュレーターが立ち上がって、アプリケーションが実行されました。

iOS アプリケーション

iOS アプリケーションは、Xcode で実行されるので、初回起動時は、Xcode を起動し、初期タスク(ライセンスへの同意など)を完了させます。 Andoroid アプリケーションと同様に、実行構成を iosApp を選択し、実行しようと思ったのですが、実行構成でエラーが出ました。

Fix ボタンをクリックしても改善しなかったので、こちらの記事を参考に修正することができました。
今回試した環境は Xcode を App Store からインストールしました。インストールした Xcode アプリを利用するようにデベロッパディレクトリを切り替える必要があったようです。以下のコマンドを実行して、切り替えるとエラーを解消することができました。(Xcode のセットアップ方法によってパスが変わると思います)

sudo xcode-select -s /Applications/Xcode.app

エラーを解消できたので、改めて実行してみました。実行すると Xcode でエミュレーターが立ち上がり、アプリケーションが実行されました。

アプリケーションを更新

Android, iOS のアプリケーションが立ち上がることが確認できたので、アプリを更新します。更新するのは、両方のアプリケーションから参照している、shared モジュールの実装を更新します。

class Greeting {
    private val platform: Platform = getPlatform()

    fun greeting(): String {
        return "Guess what it is! > ${platform.name.reversed()}!"
    }
}

ハイライトしている行を修正し、プラットフォーム名を逆順に表示するように更新しました。 更新後、アプリを再起動して表示内容を確認してみます。

各アプリケーションが更新されていることを確認できました。shared モジュールを修正するだけで、両方のアプリケーションを更新できるのは便利でいいですね。

さいごに

はじめて Android、iOS のアプリケーションを起動するところまでやってみました。実行環境の構築で少し苦戦しましたが、無事に実行することができました。今回実施したコンテンツは、とりあえず触ってみたいという要件には合っているように思いました。 複数のプラットフォームに対応するアプリケーションを実装する際は、共通モジュールを厚く実装することで、個々のプラットフォームの実装を少なくすることができるので、メリットが大きいと感じました。 今回は起動してみる部分しか触れていないので、引き続き触ってみたいと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.