Mac上にVSCodeでMAUIビルド環境を構築

マルチプラットフォームアプリ開発でC#で開発できるMAUIというものがありますが、Visual Studio for Macが廃止されるとMicrosoftから発表されたため、今後はWindows上でのVisualStudioを使用しての開発か、Visual Studio Codeによる開発が必要となってきます。

今回は、VSCodeを使用したMAUIの開発環境を構築する手順をお伝えします。

1. Visual Studio Codeのインストール

まずはVSCodeをダウンロードし、インストールします。

ダウンロード先：Download Visual Studio Code

2. XCodeのインストール

AppStoreからXCodeをインストールします。

ダウンロード先：Xcode

3. Android Studioのインストール

Android-SDKをインストールするため、Android Studioのインストールが必要になります。

以下からダウンロードし、インストールします。

ダウンロード先：Android Studio とアプリツールをダウンロードする

インストール後、Android SDKのインストールを行うため、Android Studioを起動します。

初回起動時に各種EmulatorやSDKのインストール画面が表示されるため、指示に従いインストールを行います。

4. OpenJDKのインストール

OpenJDK 11をダウンロードし、インストールします。

OpenJDK 11までスクロールし、自身の環境に合った.pkgファイルをダウンロードします。

ダウンロード先：Microsoft Build of OpenJDK をダウンロードする

インストール後、以下のTerminalで以下のコマンドを実行し、パスを通しておきます。

export JAVA_HOME=/Library/Java/JavaVirtualMachines/microsoft-11.jdk/Contents/Home

5. .NETのインストール

.NETのをダウンロードし、インストールします。

ダウンロード先：.NET のダウンロード

インストール後、Terminalを開いて、以下のコマンドを実行します。

sudo dotnet workload install maui maui-android android

インストール完了後、正常にインストールされたか、以下のコマンドで確認します。

dotnet workload list

画像のようになっていれば正常にインストールできています。

6. .NET MAUI(拡張機能)のインストール

こちらからMAUIの拡張機能をダウンロードし、インストールします。

ダウンロード先：.NET MAUI

同時に、C#やC# Dev Kitなどの依存ツールもインストールされます。

7. プロジェクトの作成

いよいよVSCodeを起動します。

初回起動時は日本語化パッケージのインストールのバルーン表示が表示されると思います。

必要に応じてインストール・再起動を実施します。

VSCodeを開いたら、左のエクスプローラータブを開き、「.NET プロジェクトを作成」ボタンをクリックします。

コマンドパレットが開くので、「.NET MAUI アプリ」をクリックします。

プロジェクトを作成するフォルダを聞かれるので、任意のフォルダを選択します。

コマンドパレットにプロジェクト名の入力が求められるので、任意の名前を入力し、Enterキーを押下します。

MAUIアプリプロジェクトが自動生成され、エクスプローラータブに表示されます。

8. Android SDKの構成

バルーン表示で「Android SDKのインストールが必要です。」と表示されることがあります。

その場合、VSCode内でターミナルを表示し、以下のコマンドを実行します。

dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory=$ANDROID_HOME  -p:AcceptAndroidSDKLicenses=True

警告が出ることがありますが、問題ありません。

9. ビルド

左側の実行とデバッグタブを開き、「実行とデバッグ」をクリックします。

コマンドパレットが開くので、「.NET MAUI」をクリックします。

次のようなダイアログが表示されることがありますが、「このまま開く」をクリックします。

正常にビルドできれば、アプリが起動してきます。

9. iOSエミュレーターで実行

Cmmand + Shift + Pを押下し、コマンドパレットを開きます。

「ios」と入力し、「.NET MAUI: iOS デバイスの選択」をクリックします。

実行したいエミュレータをクリックします。

実行とデバッグタブで「実行」ボタンをクリックします。

iOSエミュレーターでアプリが起動します。

10. Androidエミュレーターで実行

Cmmand + Shift + Pを押下し、コマンドパレットを開きます。

「android」と入力し、「.NET MAUI: Android デバイスの選択」をクリックします。

実行したいエミュレータをクリックします。

実行とデバッグタブで「実行」ボタンをクリックします。

Androidエミューレーターでアプリが起動します。

11. macOSで実行

Cmmand + Shift + Pを押下し、コマンドパレットを開きます。

「macos」と入力し、「.NET MAUI: macOS デバイスの選択」をクリックします。

「My Mac」をクリックします。

実行とデバッグタブで「実行」ボタンをクリックします。

Macでアプリが起動します。

その他 Nuget(拡張機能)のインストール

必要に応じてNugetもインストールしておきましょう。

拡張機能タブを開き、検索欄に「nuget」と入力します。

候補に「Nuget Package Manager」が表示されるので、「インストール」をクリックします。

さいごに

でもやっぱりVSCodeよりVisualStudioの方が使いやすいので、WindowsでVisual Studio 2022で開発しようと思ってますw