はじめに
今までMVCやWebAPIを中心に触ってきたのですが、初めてMAUIを触ってみました。
今回は以下の公式ドキュメントに沿ってMAUIの「Hello World」を立ち上げる作業を行っただけではありますが、私の力不足も多数あり、スムーズにいかなかったのでそれまでの作業記録を残しておきたいと思います。
Visual Studio 2022 プレビューのインストール
まずはVisual Studio 2022 プレビューをインストールします。
ワークロードはデスクトップとモバイル > .NETによるモバイル開発にチェックを入れてインストールします。
はじめてのMAUIの起動
Visual Studio 2022 プレビューを起動し、プロジェクトテンプレートは.NET MAUI App(Preview)を選択します。
プロジェクトが作成された後にAndroid Sdk Licenseが表示されるので同意をクリックします。
※「このアプリがデバイスに変更を加えることを許可しますか？」というポップアップが出てきますがそちらは「はい」を押します。
Android Emulatorボタン（以下の赤枠部分）をクリックします。
既定のAndroidデバイスを作成する画面が表示されるので、こちらも一旦公式ドキュメントに従ってCreateを選択します。
ライセンスの同意を求められるので同意するを選択します。
エミュレータのダウンロードが始まるので2～3分ほど待ちます。
ここまでは順調だったのだけど...
上記までは順調だったのですが、ここからが結構大変でした(;´∀｀)
公式ドキュメントではこの後Androidデバイスマネージャー画面を「×」で閉じた後にデバッグ実行の箇所が「Pixel - API 30(Android 11.0～)」という表示に変わっていたのですが、僕のVisual Studioでは変わらずAndroid Emulatorのまま...。
公式ドキュメントではそのままそのボタンを押して正常にMAUIアプリが起動しています。
どこかで間違えた...？？
とりあえず、もう一度Android Emulatorボタンを押してみます。
やはり以下のようにAndroidデバイスマネージャー画面が出るので、赤枠部分をクリックしてエミュレーターを起動させてみます。
んー。真っ黒だなぁ...。ここから立ち上がるのかな？と思ったりもしたのですが、何も変わらず...。
ん？これは何か起動のボタンに見えるぞ？と以下の赤枠のボタンをクリックしてみたら...
起動しました！
とはいえ、これはあくまでエミュレータを起動させただけで.NET MAUIのアプリがデプロイされているわけではないのでちょっと違う...
仕方なく一度Visual Studio 2022 プレビューを閉じて再起動してみる
ちょっと分からなくなってしまったので、一度Visual Studio 2022 プレビューを閉じてもう一度新しくプロジェクトを作ってみました（上記のはじめてのMAUI起動手順と同様）。
すると...あれ？？？公式ドキュメント通りの表記になってる？！
これで正常に起動ができるのかな？と赤枠部分をクリックします。
.........
.........
うーん、なんででしょうか...しばらく待ってみるとデプロイされるのかな？
と思いましたが特に変わらず...
ししし仕方ない！もう一度Visual Studioを閉じて新しくプロジェクトを作るのだ！！
Android Emulatorもちゃんと新しくCreateして...
デバッグ実行のボタンもちゃんと公式ドキュメント通りになってる！！
ボタンを押すと...
.........
.........
ななななんでだ～～( ；∀；)
棚からぼた餅？？
仕方なく上記の状態のまま、Googleで色々と検索していたのですが、特にそれっぽい原因も見つけられずいたのですが、気づいたら画面が以下のように変わっていました（笑）
あ...もしかしてエミュレータが起動して、そこへのMAUIアプリのデプロイに時間がかかるとかだったんですかね？(;^_^A
偶然デバッグを止めずにGoogleで検索したりしていたので、まさに棚からぼた餅的な感じでした（笑）
とりあえず起動できた！
Click meをクリックすると、正常にカウントアップされていくのが分かります。
おわりに
ということで、慣れている方でしたらすぐに出来る内容かとは思いますが、僕はかなり手間取っちゃいました(;´∀｀)
スマホアプリなどは作ったことがなく、デバッグ実行してみたらスマホの画面が出てきたこと自体が新鮮でワクワクしますね！
これを機にMAUIを通してスマホアプリ等の勉強もしていきたいと思います。
おまけ
.NET 6ではホットリロードもあるとのことでついでに試してみました。
以下のようにXamlのテキストの一部を変更してみるとすぐに反映されることが分かります（画像だと分かりにくいですが...）。
この機能もたくさん使うことになりそうなので、今後の開発がとても楽しみです！