最新記事

はじめに

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`は公式が推奨するプラグインです

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

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

brew install kdoctor

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

例えば、私の環境では

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

それも検出してくれます

kdoctor

要するに

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

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

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

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

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

[!]：警告チェック

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

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

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

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

IDEをダウンロードします

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

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

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

（Macのインストール例）

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

そのためKotlin Pluginは必須です

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

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

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

次にAndroid Studioを開きます

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

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

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

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

新しい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

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の使用方法について簡単に説明します

macOSのMacを使用していて

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

Xcodeが必要です

方法は非常に簡単です

App StoreでXcodeを検索して

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

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

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

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

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

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

将来的に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を実行します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不過若有人能稍微提點

就能更容易上手

總體來說

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

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

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

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