Compose Multiplatform 実践：初戦、CMP環境をインストールしよう

はじめに

Compose Multiplatform (略称CMP) UIフレームワークは、Kotlinコード共有能力を新たな高みへと押し上げます

一度ユーザーインターフェースを実装すれば

iOS、Android、デスクトップ、Webを含むすべてのターゲットプラットフォームで使用できます

今日は環境のインストールを一歩一歩進めていきます

目標

マルチプラットフォーム（Android、iOS、Web、Desktop）アプリケーションを作成できるCMPプロジェクトを構築します

まずはCMPプロジェクトの作成方法を理解する必要があります

以下にリストアップした項目に従ってインストールできます

一部はオプションですので

自分のニーズに応じてインストールしてください

Android Studio
Java and JDK
Xcode
Kotlin plugins
(Optional) Kotlin Multiplatform plugin
(Optional) CocoaPods
(Optional) kdoctor
(Optional) Browsers

CMP環境インストール - 必要なツールのインストール

まずkdoctorのインストールをお勧めします (Optional)

`kdoctor`は公式が推奨するプラグインです

環境内の必要項目が準備完了しているかをチェックしてくれます

ターミナルでコマンドを使用してkdoctorをインストールします

brew install kdoctor

その後、kdoctorを実行するだけでチェックできます

例えば、私の環境では

Kotlin Multiplatform Pluginがインストールされていませんが

それも検出してくれます

kdoctor

要するに

すべてが[v]と表示されていれば

環境が正しく設定されています

もしkdoctorが環境チェック中に問題を診断した場合：

[x]：修正が必要な失敗したチェック

*マークの後に問題の説明と潜在的な解決策が表示されます。

[!]：警告チェック

必ずしもインストールする必要はないかもしれません

インストールできると通知しているだけかもしれません

Android Studioのインストール

CMPを便利に作成するために`Android Studio`のインストールが必要です

まずAndroid Studio 公式サイトに行き

IDEをダウンロードします

次にMacOSの場合はダウンロードした.dmgを開き

IDEをApplicationフォルダにドラッグします

Windowsの場合は.exeでディレクトリを選択してインストールします

<img src="/images/compose/022.png" alt="Cover" class="w-half prose-img" / loading="lazy" decoding="async">
（Macのインストール例）

Kotlin Pluginのチェック

`CMP`は主に`Kotlin`を使用して開発します

そのためKotlin Pluginは必須です

ただし、現在のAndroid Studioではすべて統合されているため

インストールするとKotlin Pluginも一緒にインストールされます

（新しいバージョンのIDEではインストール済みです）

次にAndroid Studioを開きます

もし問題が発生した場合は

Tool > Kotlin > Configt Kotlin in Projectを選択して

IDEにインストール状況をチェックさせることができます

Java JDK環境のチェック

実はこのステップも上記と同様です

新しいAndroid Studio IDEではすでにインストールされています

もし不確かな場合は

IDEに組み込まれたものをダウンロードできます

以下の場所でJDKがインストールされているか確認できます

Android Studio > Settingをクリックするか、ショートカットCommand + ,を使用します

Build, Execution Deployment >Build Tools > Gradleを探します

ドロップダウンメニューをクリックして環境内の既存のものを確認する

またはDownload JDKをクリックしてダウンロードします

また

ここではsdkmanの使用をお勧めします（Optional）

コマンドを通じて環境内のSDKを管理できます

ただしCMPの紹介が主題なので

よく使われるコマンドをいくつか紹介します

興味がある方はネットで詳細を調べてください

現在設定されているsdkを確認する

sdk current

利用可能およびダウンロード可能なJava SDKをリストアップする

sdk ls java

JAVA環境を設定する（xxxの名前は上記のsdk lsで見つけることができます）

sdk using java xxx

Kotlin Multiplatform plugin (Optional)

Android StudioがMultiplatformをより良くサポートするために

Kotlin Multiplatform pluginをダウンロードする必要があります

同様にSetting > Plugin > Marketplaceを開きます

installをクリックしてダウンロードします

完了したらApplyをクリックし、IDEをRestartします

これにより、Android StudioでCreate New Projectを使用して

自動的にKMPの基本的なプロジェクト内容を作成できます

templateを作成する概念に似ています

KMM Plugin公式リリース必要に応じて参照してください

また、CMPに関して

公式はオンラインでCMP基本プロジェクトを作成する方法も提供しています

（KMPとCMPの違いを忘れた方は1日目の記事を参照してください、Compose Multiplatform 実践：リラックスして、CMPの初歩を探る）

オンラインWebページ

Wizard

を使用して作成し、IDEにインポートします

どちらの方法を使うかは

開発上の主な違いは

KMP：KMM pluginプラグインを使用して作成、Native UI + common logicの開発方法に焦点を当てています

CMP：オンラインWebページKMM Wizardを使用して作成しIDEにインポート、Compose UI + common logicでマルチプラットフォーム開発に焦点を当てています

ここでは簡単に紹介しました

後で詳細なプロジェクト開発時に

Wizardの使用方法について簡単に説明します

Xcodeのインストール

macOSのMacを使用していて

iOSアプリを実行したい場合は

Xcodeが必要です

方法は非常に簡単です

App StoreでXcodeを検索して

ダウンロードするだけです

他のオペレーティングシステムを使用している場合は

このステップをスキップできますが

iOSアプリをビルドすることはできないかもしれません

解決方法（ワークアラウンド）もあるかもしれませんが

正規の方法ではないかもしれませんXD

CocoaPodsのインストール (Optional)

将来的にiOSのフレームワークを使用したい場合は事前にインストールできます

必要ない場合は、後で必要になった時にインストールしても大丈夫です

コマンドを使用してCocoaPodsをインストールします

brew install cocoapods

ただし、brewでインストールするには

より高いバージョンのrubyが必要です

公式サイトによると、少なくとも3.3.4バージョンが必要です

Depends on: ruby 3.3.4 Powerful, clean, object-oriented scripting language

そこで、以下のコマンドで

環境内のバージョンを確認できます

ruby -v

バージョンが足りない場合は

まずreinstallします

brew reinstall ruby

最後にbrew install cocoapodsを実行します

ブラウザのチェック (Optional)

Webアプリケーションを作成する場合

Wasmガベージコレクション（GC）機能をサポートするブラウザが必要です。

これは公式サイトが提供する情報です

OS内のブラウザのバージョンを確認する必要があります

現在サポートされている環境に関する説明です

ChromeとChromium：バージョン119からサポート。

Firefox：バージョン120からサポート。

Safari/WebKit：Wasm GCは現在開発中です

Safariなどはサポートしていないようです

そのため完全に実行できない可能性があります

Webアプリの開発が必要な場合は

上記の情報に基づいて試してみてください

結語

我總覺得開始一個新的程式語言或框架

通常你會不太熟悉怎麼配置他的環境

不過若有人能稍微提點

就能更容易上手

總體來說

不需要之前有Compose Multiplatform、Android或iOS的經驗

從零一步一步開始熟悉Kotlin再到整個CMP也可以慢慢上手

若有任何疑問或問題，歡迎在評論區討論，我們一起學習成長。

這次的內容就到這裡，感謝大家的閱讀和支持！

最新記事