Compose Multiplatform 実践：AndroidとiOSシミュレータでCMPプロジェクトを実行

はじめに

Compose Multiplatform (略称CMP)

昨日、CMPプロジェクトの構築が完了したばかりです

プロジェクトをIDEに正常にインポートできた場合

以下のようなフォルダ構造が表示されます

Cover

この時点で、コンパイルが可能かどうか確認できます

正常にコンパイルされた場合

以下のような画面が表示されます

シミュレータで実装されたアプリ画面が開き

右下にコンパイルの成功・失敗メッセージが表示されます

Androidシミュレータのインストール

昨日の記事：Wizardを使ってCMPプロジェクトを作成の方法で作成した場合

基本的なプロジェクト設定はすでに構成済みです

基本的に、2日目のCMP環境のインストールで

システム環境が正しくインストールされていることを確認するだけです

例えば、JDK、Kotlinなど

Cover

次に、コンピュータ上でシミュレーションする場合

Androidシミュレータを作成する必要があります

上部システムバーのTools > Device Managerをクリックします

右側にDevice Managerウィンドウが表示されます

Cover

上部の+をクリックし、Create Virtual Deviceを選択します

Cover

作成したいAndroidシミュレータを選択するウィンドウが表示されます

Phone、Tablet、TV、Watch、Automotiveなどがあります

Android Studioは後期に主にGoogleによって維持されているため

Google Pixel OSを搭載したAndroid PhoneのAVD(Android Virtual Device)をダウンロードできます

もちろん、Pixel AVDのイメージファイルはAndroid Developer公式サイトからもダウンロードできますが

Googleはそれを親切にIDEに統合してくれています

希望のPhoneを選択し、右下のNextをクリックします

Android SDKの選択画面に進みます

テストしたいSDKに応じて選択します

以前にダウンロードしていないSDKは

グレー表示され、右側にダウンロードアイコンがあります

ダウンロード完了後に選択できるようになります

Nextをクリックすると、シミュレータの設定ができます

方向、ネットワーク、起動設定、RAMサイズ、SDKサイズなどを設定できます

選択後、右下のFinishをクリックします

IDEを使用してAndroid Appをビルド

上部で先ほど作成したシミュレータを選択し

上部のプロジェクト実行ボタン（緑色の再生ボタンのようなもの）をクリックして、IDEにビルドしてもらいシミュレータにインストールします

Cover

手動でAndroid Appをビルド

ターミナルで以下のコマンドを実行してAPKをビルド

run ./gradlew :yourComposeAppProjectName:assembleDebug

yourComposeAppProjectNameはあなたが作成したプロジェクトの名前です assembleDebugはデバッグバージョンをビルドすることを意味します

.apkファイルはyourComposeAppProjectName/build/outputs/apk/debug/yourComposeAppProjectName-debug.apkにあります

手動インストール

2つの方法があります

1.APKをシミュレータにドラッグ＆ドロップ

2.コマンドを使用してインストール（実機でadbを使用する場合は、開発者モードを有効にする必要があります）

adb install ../xxx/yourComposeAppProjectName-debug.apk

iOSシミュレータのインストール

2日目のCMP環境のインストール時に

Xcodeがインストールされていることを確認します

Android Studioの画面上部にあるAndroidの小さな緑色の人形アイコンの場所をクリックします

ドロップダウンメニューが表示されます

このセクションはプロジェクトで設定されたConfigurationが統合されています

Build Android app、Build iOS app、または一部のgradle taskなどがあります

Cover

初めてAndroid StudioでiOS appを実行する場合

デフォルトのBuild iOS Configurationがない可能性があります

そのため、Edit Configurationをクリックして設定します

左上の+をクリック > iOS Application

Cover

その後、必要に応じて設定できます

a. タスクの名前を設定

b. Xcode project fileの右端のフォルダアイコンをクリック

c. 表示されるファイル選択ダイアログで.xcodeprojのパスを選択

（.xcodeprojを選択してopenをクリック）

Cover

d. .xcodeprojパスを選択すると

IDEは自動的に内部のschemeとconfigurationを読み取ります

そのため、あとは目的のiOS emulatorバージョンとモデルを選択するだけです

Cover

e. Build Configurationを先ほど作成した設定に変更し

実行ボタンをクリックします

Xcodeを使用してiOS Appをビルド

CMPはrootフォルダ直下にiOSプロジェクトを作成するため

XcodeでCMPプロジェクト配下のiOSAppフォルダを直接開くだけで

Xcodeを使ってiOSAppを直接ビルドできます

まとめ

これでCMPプロジェクトを完全にビルドし、AndroidとiOSシミュレータで実行できるようになりました

Cover
明日は

CMPのプロジェクト構造といくつかの一般的な問題について紹介したいと思います