スマホ向けアプリのお時間です

今回は、.NET MAUIを使用してスマホ向けアプリを作ってみたいと思います。

スマホ向けアプリってなんか難しそうなイメージありますよね。
スマホ向けというよりマルチプラットフォーム向けアプリを作るのは難しそうです。
それでも簡単にマルチプラットフォーム向けアプリが作れるもののうち、今回は.NET MAUIを使用してみたいと思います。

.NET MAUIとは

.NET MAUIは、.NET Multi-platform App UIの略で、.NETでマルチプラットフォーム向けアプリを作るためのフレームワークです。
まぁ簡単に言えば、HTMLみたいなXAMLでビューを書いて、C#で構造を書いてアプリを作れるよっていうやつです。

というわけで、作ってみよう

まずは何も考えずにVS23を開いて、新しいプロジェクトの作成、.NET MAUI アプリを選択します。
プロジェクト名やフォルダの場所をいい感じに決め、フレームワークもめんどくさいからデフォのままで作成します。

とりあえずこの画面まではもってこれましたかね？

とりあえず動かしてみよう

とりあえず動かしてみましょう。

こんな感じの画面が出てきたら成功です。

てかなんか前とデザイン違うなこれ...

じゃ、編集してみよう

アプリケーション本体はMainPage.xamlとMainPage.xaml.csに書かれています。
まずはMainPage.xamlを開いてみましょう。

なんかLabelって書いてあるやつがあると思います。
これはラベルというもので、テキストを表示するためのものです。

MainPage.xaml

  <Label
-     Text="Hello, World!"
+     Text="こんにちはあああああああああ"
      Style="{StaticResource Headline}"
      SemanticProperties.HeadingLevel="Level1" />

と、編集するだけでホットリロード機能によって、勝手に変更が反映されます。
結構便利ですね～！

次に、MainPage.xaml.csを開いてみましょう。

MainPage.xaml.cs

  private void OnCounterClicked(object sender, EventArgs e)
  {
      count++;
+     count++;

      if (count == 1)
          CounterBtn.Text = $"Clicked {count} time";
      else
          CounterBtn.Text = $"Clicked {count} times";

      SemanticScreenReader.Announce(CounterBtn.Text);
  }

count++;の下にcount++;を追加します。
このcountというのは、クリックした回数を記録するための変数です。
このインクリメントを2回にすることで、クリックした回数が2倍になります。クッキークリッカーみたい。

C#コードの編集には再コンパイルが必要なので、リビルドを行います。
リビルドしたらClick meのボタンを押してみましょう。
さっきまで1づつしか増えなかったのが、2づつ増えるようになっているはずです。

スマホ向けに発行する方法

残念ながら私は実機のスマートフォンを持っていないので検証はできないのですが一応

まずはビルドターゲットを指定します。
ビルドターゲットは画面上部からから選択できます。

android、ios、maccatalyst(macOS)、windowsですね。

次に発行をしていきます。
ソリューションエクスプローラーにあるプロジェクトを右クリックします。
「発行」を選択します。
発行のためのウィザードが出てくるので、適当に設定していくと発行できます。
（といっても、Windows環境で発行できるのはWindowsとAndroidのみですが...(さらに私はAndroidでの発行に苦戦した記憶があるから実質簡単に発行できるのはWindowsだけ)）

まとめ

というわけで、今回は.NET MAUIを使用してスマホ向けアプリを作ってみました。
あんま作ってませんが。

導入のための一歩となれば幸いです。

というわけで、「スマホ向けアプリでも作ってみない？」