LoginSignup
30
26

More than 1 year has passed since last update.

@yoshi_782(yoshi)

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

Last updated at Posted at 2022-09-19

経緯

たまたま.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
確認してみたら去年から更新してませんでした:sweat_smile:

.NET MAUIをインストール

今度はVS2022の変更を行います。
image.png

.NET マルチプラットフォーム アプリのUI開発にチェックを付け、右下の変更をクリックします。
image.png
インストールが完了したら、.NET MAUIの準備ができました。

Androidアプリの作成

プロジェクトの新規作成

VS2022を起動し、新しいプロジェクトの作成をクリック
テンプレートは.NET MAUIアプリを選択し、次へ
(上のプルダウンからMAUIを選択すると見つけやすいかも)
image.png

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

image.png

フレームワークはそのまま .NET 6 にし、作成します。
image.png

プロジェクト作成後、以下のような画面が出てくるかもしれません。(初回のみ？)
そのままアクセスを許可するをクリックします。
image.png

Androidアプリの実行

いよいよアプリの実行です。
とりあえずはテンプレートそのままをエミュレーターで実行してみます。
実行ボタンの横にある▼をクリックし、Android Emulator -> Pixel5...を選択します。
image.png

実行後、エラーが出ると思います。
文章の通り、メッセージをダブルクリックします。
ライセンス同意の画面が表示されるので同意します。
image.png

同意後、Androidデバイスマネージャーが表示されます。
Pixel 5 - API31をインストールします。
image.png
完了したらもう一度実行ボタンをクリックします。
しばらくすると、Androidエミュレーターが起動します。
さらに待つと、自動的にアプリが起動します。
image.png

とりあえずAndroidアプリの実行までできました。
試しにClick meのボタンをクリックしてみましょう。
app.gif

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

コードの追加

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

MainPage.xamlの修正

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

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

Clickedは、ダブルクオートを挿入すると、候補が出てくるので、新しいイベントハンドラーでTabを押すと、
イベント関数がMainPage.xaml.csに追加されます。便利ですね。
image.png

MainPage.xaml.csの修正

最初から開かれているMainPage.xaml.csを修正します。
閉じてしまった場合は…以下略
先程の新しいイベントハンドラーで自動的にButton_Clickedメソッドが作成されていると思います。
そのメソッドに処理を追加します。
今回はClick meボタンをクリックした後の文字列をそのまま表示させます。
※asyncを付け忘れないように

MainPage.xaml.cs
private async void Button_Clicked(object sender, EventArgs e)
{
	await DisplayAlert("タイトル", $"Clicked {count} times", "はい");
}

アプリを実行して動作確認してみます。
app2.gif

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

実機にてアプリを実行する

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

準備

端末の開発者向けオプションにて、以下の2つをオンにします。

  • USBデバッグ
  • USB経由でインストール(あれば)
    image.png

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

実機にインストール→実行

USBで端末をPCに繋ぐと、実行ボタンの▼をクリックすると、Android Local Device -> Xiaomiが追加されるので、これをクリック
image.png
この時、先程の「USB経由でインストール」がオンになっていないと、以下のエラーが発生し、インストールできませんでした。
(インストールのキャンセルなんてしてないんだけど！！！！！！！！！:rage::rage::rage::rage:)

エラー		ADB0010: Mono.AndroidTools.InstallFailedException: Failure [INSTALL_FAILED_USER_RESTRICTED: Install canceled by user]

インストールが成功すると、自動的にアプリが起動します。
ダークモードのせいか、背景が黒になってますね。
3454.jpg

動作確認も普通にOKでした。
(「はい」がめちゃくちゃ見づらい…)
3455.jpg

感想

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

疑問点

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

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

参考サイト

おまけ

せっかくなので、Windowsアプリでも実行してみたいと思います。
実行ボタンの▼をクリックし、Windows Maschine を選択し、もう一度実行ボタンをクリックします。
image.png

初回は(設定していないと)以下のポップアップが出ると思います。
開発者向けの設定 がリンクになっているのでクリックします。
image.png

開発者モードをオンにします。
「開発者モードをオンにしますか？」と聞かれるので、「はい」をクリック。
image.png

VS2022に戻り、閉じるをクリックすると、アプリが起動します。
なんかバカでかいけど普通に起動できました。
app3.gif

おわり。:sleeping:

30
26
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
30
26