AvaloniaUIをAndroidビルドする🚀

AvaloniaUIのv11.0がリリースされました。
Windows環境でAndroidビルドしてエミュレータでアプリを起動させてみようと思います。

## 環境
OS: Windows 11 Home
AvaloniaUI: v11.0.1
Visual Studio2022


## 手順
### 1. 環境のセットアップ
#### 1.1 テンプレートのインストール
こちらの手順に従ってインストール。
[Install](https://docs.avaloniaui.net/docs/next/get-started/install)

インストール
```
dotnet new install Avalonia.Templates
```

インストールを確認
```
 dotnet new list
```
 
すでに過去のバージョンでインストール済みの場合はアップデートする。
```
dotnet new --update-check
dotnet new --update-apply
```

#### 1.2 ワークロードのインストール
.NET開発用のVisual Studioの機能拡張パッケージをインストールする。

```
dotnet workload install android
```

#### 1.3 Android SDKのインストール

https://docs.avaloniaui.net/docs/next/guides/platforms/android/setting-up-your-developer-environment-for-android

上記ページに貼ってあるリンクは[MSのXamarin開発用環境セットアップページ](https://learn.microsoft.com/en-us/xamarin/android/get-started/installation/android-sdk?tabs=windows)になっており、結局モバイルワークロードを入れろと言われます。
XamarinはMAUIに取って代わられたため、モバイルワークロードというものは存在しないのでMAUIワークロードを入れます。

上記AvalouinaUIのハウツーページにも`maui-check`コマンドで全部入るとあるのでそちらで行きます。
まずはMAUIワークロードのインストール
```
dotnet workload install maui
```
長いですが待ちます。

androidビルドだけなら`dotnet workload install maui-android`だけで十分だと思いますが、せっかくなのでiosからdesktopから全部入れておきます。
Visual Studio Installerでインストールしても大丈夫です。

続いて`maui-check`を行います。
```
dotnet tool install -g Redth.Net.Maui.Check
maui-check
```
長いですが待ちます。

Visual Studio2022のバージョンは17.6以上でないとエラーがでるので、インストーラーからアップデートしておいてください。

ちなみにMSの記事にあるXamarinの環境開発セットアップ手順を行うとEmulatorを選べるらしく、Pixel5をエミュレータとして使うことができました。

#### 1.4 Hyper-Vの有効化
Androidエミュレータの実行速度を上げるために設定します。
設定しないと話しにならないほど実行速度が低いので設定します。

Windows11 ProのHyper-V設定手順

https://learn.microsoft.com/ja-jp/virtualization/hyper-v-on-windows/quick-start/enable-hyper-v

Windows11 HomeのHyper-V設定手順

https://qiita.com/masatonasou/items/7c5ca7be6f6b519f3d4b

Homeの場合上記に加えて **「Windowsの機能の有効化または無効化」** から仮想マシンプラットフォームにチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/df75c01e-86ec-32f7-3e6a-c677db35b43c.png)


Homeの場合は上記記事にあるバッチファイルを実行し仮想マシンのインストールをおこないます。
この時、再起動まで終わったらHyper-Vの起動はおよび仮想マシンの作成を手動で行う必要はありません。

Hyper-Vの設定が完了したらAndroid Emulatorの起動を確認します。
Visual Studioの`ツール > Android > Androidデバイスマネージャー`をクリック。
ダイアログが開くので「開始」をクリック。

するとAndroidのエミュレータが起動します。
暫く待つとデフォルトアプリのあるAndroidのホーム画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/4dc13e73-ecba-d864-2255-43c90a0ae43a.png)

確認できたら一旦エミュレータは閉じてます。


### 2. プロジェクト作成
#### 2.1 テンプレートの選択

Visual Studioからテンプレートを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/27ed2f4f-76e7-39f4-4827-25b382aa3640.png)

こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/8db3e247-5dfc-cb9d-fa6a-ab9d32fe8603.png)

とりあえずDesktopプロジェクトとBrowserプロジェクトはビルド&実行できるので確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/67014f5c-09aa-3245-49c0-ed22723d8cc7.png)
できました。


#### 2.2 Nugetバージョン更新
テンプレートで作成したままだとNugetバージョンが古い場合があるのでv11.0以上にします。

#### 2.3 Androidエミュレータの設定
上記AvalouinaUIのハウツーページにある[リンク先](https://learn.microsoft.com/en-us/xamarin/android/get-started/installation/android-sdk?tabs=windows)の手順に従います。
と言いながら、ワークロードからインストールすると必要なコンポーネントはすべてインストールされていたので私は特に何もしませんでした。



一応設定項目こんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/f81c045d-8c82-b40b-35ae-7957fd60bdfc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/41896c49-810e-7107-465a-8d4e3972b452.png)


#### 2.4 iOSプロジェクトのアンロード
今回はiOSビルドは対象外なのでプロジェクトをアンロードします。
環境が整っていないとビルドエラーになって邪魔なので取り除きます。

ソリューションエクスプローラーからAndroidプロジェクトをアンロード。

#### 2.5 構成マネージャーの設定
ビルド(Build) > 構成マネージャー(Configure Manager) を選択し、Androidプロジェクトの配置(Publish)にチェックを入れます。

これをやらずに数時間潰しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/957129f3-7c4c-6283-e40c-449fecce237c.png)

その後ソリューションリビルドします。


### 3. 実行
#### 3.1 デバッグ実行
2.5 でリビルドが成功したら、Visual Studioでデバッグ実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634043/efbddbed-cc6d-7069-f6a1-a31efc683802.png)


## まとめ
HomeだとHyper-Vの設定が少し面倒ですがこれで開発できそうです。
Proでも同様に実行できましたが、エミュレータ起動速度が早い気がするので仮想マシン周りでなにか差異があるのかもしれません。

モバイルのクロスプラットフォーム開発だと同じXAML UIではMAUIの方が多少古いプラットフォームまでサポートしていますが、AvaloniUIも最新のバージョンはサポートされています。
WPFと下記味が近い分AvaloniaUIの方が手を付けやすく個人的に好感を持っています。

レンダリングエンジンをFlutter同様Skiaを採用しているのでネイティブに依存する苦労が減ったりするんだろうかと期待しています。

WPF使うならAvaloniaUIでの開発がスタンダードになりそう。

## 参考
https://www.youtube.com/watch?v=7m1OndxL-k0



https://docs.avaloniaui.net/docs/next/guides/platforms/android/setting-up-your-developer-environment-for-android