.NET MAUIを使ってお試しAndroidアプリの作成

# 経緯
たまたま.NET MAUIを見かけて興味が湧いたのと、
以前のXamarinとどう変わったのかも気になったのでお試しで使ってみました。
Xamarinは昔お試しで使ってみた時期もありましたが、よくわからず終い ~~(そこまで使いこなす努力をしなかった)~~ だったので、
.NET MAUIではそういった期待もありました。
とりあえず、「軽くコードを追加してAndroidアプリの実行」を目標に、実際に行ったことを書きたいと思います。

# 開発環境
- OS
    - Windows11(21H2)
- Visual Studio 2022
    - Version 17.3.4
- PCスペック
    - CPU: Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz   2.90 GHz
    - RAM: 16GB

# .NET MAUIの準備
## 何はともあれVisual Studio 2022の更新
かなり久々にVS2022を使う気がしたので更新してみました。
Visual Studio Installerを起動し、VS2022の更新をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/76809fdb-4159-9565-9d2f-7e572e0f4f7a.png)
確認してみたら去年から更新してませんでした:sweat_smile:

## .NET MAUIをインストール
今度はVS2022の変更を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/fec36b3d-e7b1-1d3b-17c7-71b83913c799.png)

`.NET マルチプラットフォーム アプリのUI開発`にチェックを付け、右下の`変更`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/97b1e078-eb61-6757-78e0-624d4114e830.png)
インストールが完了したら、.NET MAUIの準備ができました。

# Androidアプリの作成
## プロジェクトの新規作成
VS2022を起動し、`新しいプロジェクトの作成`をクリック
テンプレートは`.NET MAUIアプリ`を選択し、次へ
(上のプルダウンからMAUIを選択すると見つけやすいかも)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/6b111b5f-b974-b286-8735-adedd86bb198.png)

プロジェクト名は `MauiAppTest` にしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/b33c5fb9-d817-1c8a-f01f-abc57a0166f8.png)

フレームワークはそのまま `.NET 6` にし、作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/d1f52172-9bfa-6d13-3963-7390b83df0eb.png)

プロジェクト作成後、以下のような画面が出てくるかもしれません。(初回のみ？)
そのままアクセスを許可するをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/bd35f4f7-d411-b42a-20bb-97d3c819f8f1.png)


# Androidアプリの実行
いよいよアプリの実行です。
とりあえずはテンプレートそのままをエミュレーターで実行してみます。
実行ボタンの横にある▼をクリックし、`Android Emulator -> Pixel5...`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/4fe3e94f-c276-2166-1097-88726801418d.png)

実行後、エラーが出ると思います。
文章の通り、メッセージをダブルクリックします。
ライセンス同意の画面が表示されるので同意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/72d3bf42-5869-a862-91b1-51c11dedae84.png)

同意後、Androidデバイスマネージャーが表示されます。
Pixel 5 - API31をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/b6935030-1b26-b3a4-d3d7-272d758ab2d5.png)
完了したらもう一度実行ボタンをクリックします。
しばらくすると、Androidエミュレーターが起動します。
さらに待つと、自動的にアプリが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/f2ce0b83-517f-791a-9e38-ae65cc7d2f3a.png)

とりあえずAndroidアプリの実行までできました。
試しに`Click me`のボタンをクリックしてみましょう。
![app.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/7637aa9d-06d3-8106-3b9c-6067bde7e350.gif)

上の動画のように、カウントアップすると思います。
(Flutterのテンプレートもこんなのだったような…)

# コードの追加
それでは、本題の「軽くコードを追加してAndroidアプリの実行」をやっていきます。
本当は画面の遷移をやろうと思ったけどめんどくさくなったので、
ボタンを追加して、OnClickにメッセージアラートを表示させる処理を書いていきます。

## MainPage.xamlの修正
最初から開かてているMainPage.xamlを修正します。
閉じてしまった場合は、ソリューションエクスプローラーから開けます。
ここらへんはWPFやFormsをやっていると、同じ構成なのでわかりやすい気がします。
`<VerticalStackLayout>`要素の中に以下のButtonタグを追加します。

```xml:MainPage.xaml
<Button Text="アラート" Clicked="Button_Clicked" />
```

Clickedは、ダブルクオートを挿入すると、候補が出てくるので、`新しいイベントハンドラー`でTabを押すと、
イベント関数が`MainPage.xaml.cs`に追加されます。便利ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/bae1f27f-52fd-1100-9591-374a80287f48.png)

## MainPage.xaml.csの修正
最初から開かれているMainPage.xaml.csを修正します。
閉じてしまった場合は…以下略
先程の新しいイベントハンドラーで自動的に`Button_Clicked`メソッドが作成されていると思います。
そのメソッドに処理を追加します。
今回は`Click me`ボタンをクリックした後の文字列をそのまま表示させます。
※`async`を付け忘れないように
```C#:MainPage.xaml.cs
private async void Button_Clicked(object sender, EventArgs e)
{
	await DisplayAlert("タイトル", $"Clicked {count} times", "はい");
}
```

アプリを実行して動作確認してみます。
![app2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/6f9542d9-9928-7479-2d00-62c91d613d50.gif)

上の動画のようになったかと思います。
これで目標達成できましたが、もう少しやってみます。

# 実機にてアプリを実行する
実機にアプリをインストールして実行してみます。
使用する端末は、私が普段使っているXiaomi 11T Proを使います。

## 準備
端末の開発者向けオプションにて、以下の2つをオンにします。
- USBデバッグ
- USB経由でインストール(あれば)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/1ecf26c4-11a0-49c2-984f-542be2ad9357.png)

後述しますが、私の場合、「USB経由でインストール」をオンにしないとインストールできませんでした。
(当然っちゃ当然なのかな…？参考記事にはそのような項目はありませんでした。)

## 実機にインストール→実行
USBで端末をPCに繋ぐと、実行ボタンの▼をクリックすると、`Android Local Device -> Xiaomi`が追加されるので、これをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/bb31150d-1bc2-00d8-a1c5-8fe7c5acaa06.png)
この時、先程の「USB経由でインストール」がオンになっていないと、以下のエラーが発生し、インストールできませんでした。
(インストールのキャンセルなんてしてないんだけど！！！！！！！！！:rage::rage::rage::rage:)
```
エラー		ADB0010: Mono.AndroidTools.InstallFailedException: Failure [INSTALL_FAILED_USER_RESTRICTED: Install canceled by user]
```

インストールが成功すると、自動的にアプリが起動します。
ダークモードのせいか、背景が黒になってますね。
![3454.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/e9d30fb0-997d-7f7f-3423-1e3f911a5673.jpeg)

動作確認も普通にOKでした。
(「はい」がめちゃくちゃ見づらい…)
![3455.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/21ce2aab-42f8-efd0-eec2-c94c6d45b65a.jpeg)

# 感想
- 以前のXamarinみたいなわかりづらいところがあまりない。
- 難しい箇所は特になく、WPFをやっていればなんとなくでできそう。

# 疑問点
- デザイナーのプレビュー画面がない、どこかに設定があるのかな？
(WPFでも基本手動で書いてたのであまり気にしてなかった)

※2022/09/21 追記(情報提供ありがとうございます！)
プレビュー画面はなさそうです。
今後追加する見込みもなさそうとのこと…
ホットリロードがあるので、そちらで更新しましょう。
XAMLを編集したのち、C#を書いた方が効率がいいと思います。
(当然ながらC#を書いちゃうとビルドしろと言われます。実際なりました:sweat_smile:)

# 参考サイト
- [初めての .NET MAUI アプリをビルドする - .NET MAUI](https://learn.microsoft.com/ja-jp/dotnet/maui/get-started/first-app?tabs=vswin&pivots=devices-android)
- [【.NET MAUI】Android端末の実機デバッグ環境を整えてみる│ARu Program](https://rainfresh-program.info/maui-debug-android/)
- [[NET MAUI][Popup] アラートを表示する | HIROs.NET Blog](https://blog.hiros-dot.net/?p=12295)
- [.NET MAUI でウインドウサイズを指定する方法(Windowsで実行した場合) | 開発者のごみ箱](https://developers-trash.com/archives/974)

# おまけ
せっかくなので、Windowsアプリでも実行してみたいと思います。
実行ボタンの▼をクリックし、`Windows Maschine` を選択し、もう一度実行ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/f3042560-4040-1895-4f4a-1878b1019af5.png)

初回は(設定していないと)以下のポップアップが出ると思います。
`開発者向けの設定` がリンクになっているのでクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/66eb12e3-e3d0-ef54-d2a4-98b4177ff4e6.png)

開発者モードをオンにします。
「開発者モードをオンにしますか？」と聞かれるので、「はい」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/a65fcd93-756a-80f3-f337-0cc6101ea1b0.png)

VS2022に戻り、閉じるをクリックすると、アプリが起動します。
なんかバカでかいけど普通に起動できました。
![app3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176021/4390e74a-986f-e354-82eb-2cafe739ea03.gif)

おわり。:sleeping: