neputa note

VSCode & .NET MAUIでAdnroidアプリ開発環境を構築する【Ubuntu on WSL】

初稿:

更新:

- 6 min read -

img of VSCode & .NET MAUIでAdnroidアプリ開発環境を構築する【Ubuntu on WSL】

この記事のゴール

  • Ubuntu on WSL2でリモート実行しているVSCodeに、.NET MAUIアプリ開発環境を構築する
  • 構築する項目は以下のとおり
    • .NET MAUIテンプレートからプロジェクトを新規作成する
    • Android emulatorを起動する
    • Androidアプリをデバッグする

VSCode & .NET MAUIでAdnroidアプリ開発環境を構築する【Windows】

VSCode(Windows)に、.NET MAUIアプリの開発環境を構築する。テンプレートからプロジェクトを新規作成し、Android emulatorでAndroidアプリをデバッグできるようにする。一連の設定手順をまとめる。

環境

  • OS - Ubuntu22.04LTS on WSL2 (Windows 11 Pro)
  • VSCode - v1.91.1
  • .NET - v8.0.303
  • Android - API Level 34

前提

WSL2およびVSCodeのリモート開発環境が構築済みであること。

作業一覧

  1. .NET 8.0 インストール
  2. Microsoft OpenJDK 17 インストール
  3. Android command line tools インストール
  4. Android SDK インストール
  5. Android Emulatorインストール・設定
  6. .NET MAUI 拡張機能インストール
  7. .NET MAUIプロジェクト作成
  8. デバッグ実行する

作業詳細

.NET 8.0 インストール

  1. インストールスクリプトをダウンロード
wget-dotnet-install
$ wget https://dot.net/v1/dotnet-install.sh -O dotnet-install.sh
  1. 実行権限を付与
grant-dotnet-install
$ chmod +x ./dotnet-install.sh
  1. 最新の長期サポート(LTS)SDKをインストール
instal-dotnet-sdk
$ ./dotnet-install.sh --version latest
  1. bash設定ファイル(.profile | .bash_profile | .bashrc etc)に次を追加し、PATHを通す
.bash_profile
export DOTNET_ROOT=$HOME/.dotnet
export PATH=$PATH:$DOTNET_ROOT:$DOTNET_ROOT/tools
  1. source ~/.bash_profile を実行、またはターミナルを再起動して設定を読みこむ

Microsoft OpenJDK 17 インストール

  1. リポジトリにパッケージを追加する
add-package
$ ubuntu_release=`lsb_release -rs`
$ wget https://packages.microsoft.com/config/ubuntu/${ubuntu_release}/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
$ sudo dpkg -i packages-microsoft-prod.deb
  1. OpenJDK 17をインストール
install-openjdk
$ sudo apt-get install -y apt-transport-https
$ sudo apt-get update
$ sudo apt-get install -y msopenjdk-21

Android command line tools インストール

  • ~/Android にSDKおよび必要なツールをインストールしていく
  1. 必要なパッケージを事前インストール
install-packages
sudo apt update
sudo apt install -y unzip
  1. Android command-line toolsをダウンロード・インストール
command-line-tools
$ mkdir ~/Android
$ cd ~/Android
$ wget https://dl.google.com/android/repository/commandlinetools-linux-8092744_latest.zip -O commandlinetools.zip
$ unzip commandlinetools.zip
$ rm -f commandlinetools.zip
  1. bash設定ファイルにパスを追加
.bash_profile
export ANDROID_HOME=$HOME/Android
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
  1. source ~/.bash_profile を実行、またはターミナルを再起動して設定を読みこむ

  2. android command line toolsを最新版に更新する

install-cmdline-tools
$ sdkmanager "cmdline-tools;11.0"

Android SDK インストール

  1. Android SDK API Level 34 インストール
install-adnroid-sdk
$ cd ~/Android
$ sdkmanager "platform-tools" "platforms;android-34" "build-tools;34.0.0" "emulator" "system-images;android-34;google_apis;x86_64"

License android-sdk-license:
---------------------------------------
Terms and Conditions

This is the Android Software Development Kit License Agreement

...省略

---------------------------------------
Accept? (y/N): y
[=======================================] 100%

Android Emulatorインストール・設定

  1. 必要パッケージを事前インストール
install-emulator
$ sudo apt install -y qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils virt-manager libncurses5 libstdc++6 libpulse0 libgl1-mesa-glx libgl1-mesa-dri libxkbfile1 libqt5widgets5 libqt5gui5 libqt5core5a libqt5dbus5 libxkbcommon-x11-0
  1. kvmにカレントユーザを追加
add-user
$ getent group kvm
kvm:x:109:username
$ sudo gpasswd -a $USER kvm
$ newgrp kvm
$ ls -la /dev/kvm
crw-rw---- 1 root kvm 10, 232  7月 27 07:27 /dev/kvm
  1. bash設定ファイルにemulatorのPATHを追加
.bash_profile
export ANDROID_EMULATOR_HOME=$HOME/Android/emulator
export PATH=$PATH:$ANDROID_EMULATOR_HOME
  1. source ~/.bash_profile を実行、またはターミナルを再起動して設定を読みこむ

  2. ‘myEmulator’という名前でemulator 作成

create-emulator
avdmanager create avd -n myEmulator -k "system-images;android-34;google_apis;x86_64"
  1. emulator 実行
start-emulator
emulator -avd myEmulator -netdelay none -netspeed full
  1. Emulatorが起動すればOK

Android Emulator

VSCode .NET MAUI 拡張機能インストール

  1. VSCodeを起動

  2. 拡張機能タブで “.NET MAUI” を検索、または “.NET MAUI - Visual Studio Marketplace” から拡張機能をインストール

  3. settings.json に次を追加

settings.json
{
  "maui.configuration.androidSdkPreferredPath": "/home/USERNAME/Android",
  "maui.configuration.javaSdkPreferredPath": "/usr/bin/java"
}
  1. workload インストール
install-workload
$ dotnet workload install maui-android

.NET MAUIプロジェクト作成

デバッグ実行する

  1. コマンドパレット(Ctrl+Shift+P)を開き “.NET New Project” を入力し実行

  2. 表示されたパッケージから、“.NET MAUI アプリ” を選択

  3. プロジェクトを作成するディレクトリを選択

  4. プロジェクト名を入力(今回はMauiAppSample)

  5. “プロジェクトを作成します” を選択

  6. restore実行後に今回準備していないiOSについてエラーが出る

vscode-output
  Determining projects to restore...
/home/USERNAME/.dotnet/sdk/8.0.303/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.Sdk.ImportWorkloads.targets(38,5): error NETSDK1178: The project depends on the following workload packs that do not exist in any of the workloads available in this installation: Microsoft.ios.Sdk.net8 [/home/USERNAME/repos/MauiAppSample/MauiAppSample/MauiAppSample.csproj::TargetFramework=net8.0-ios]
/home/USERNAME/.dotnet/sdk/8.0.303/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.Sdk.ImportWorkloads.targets(38,5): error NETSDK1178: You may need to build the project on another operating system or architecture, or update the .NET SDK. [/home/USERNAME/repos/MauiAppSample/MauiAppSample/MauiAppSample.csproj::TargetFramework=net8.0-ios]
  1. プロジェクトファイル(MauiAppSample.csproj)を開き、Android以外を削除する
MauiAppSample.csproj
<Project Sdk="Microsoft.NET.Sdk">
	<PropertyGroup>
		<TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
		<TargetFrameworks>net8.0-android;</TargetFrameworks>


    <!-- 省略 -->

  </PropertyGroup>
</Project>
  1. コマンドパレットから “.NET MAUI: Android デバイスの選択”を入力・選択

  2. 先ほど作成したEmulator(myEmulator)を選択

  3. (起動していない場合)Android Emulatorを起動

start-emulator
emulator -avd myEmulator -netdelay none -netspeed full
  1. F5 でデバッグ実行

Android Emulator デバッグ実行
アプリをデバッグ実行

まとめ

本記事の目的は無事に達成できた。また、Linux環境のVSCodeで .NET MAUIアプリの開発(Androidのみだけど)は可能っぽいことも分かった。

個人的にメインPCをWindowsからUbuntuへ移行することを考えており、今回はそれを見据えての検証だった。

Emulatorは強引にWSLで動かしたが、Ubuntuネイティブではより快適に動作するのかもしれない。

しかし想定以上の作業量、エラー対処が発生した。

結果として、Visual Studio Communityがいかに楽かを痛感した。

Windowsを使い続けるか、モバイルアプリ開発をAndroid Studioに移行するか、VSCode + .NET MAUIがこなれてくるのを待つか、迷うところ。

とりあえずおつかれさまでした。

目次