演習: 始めての .NET MAUI アプリを作成する

5 分

この演習では、食料品店チェーン向けの .NET MAUI (マルチプラットフォームアプリケーションユーザーインターフェイス) アプリの構築を始めます。テンプレートを使って既定アプリを生成し、Windows と Android エミュレーターで実行します。後の演習では、このアプリを変更してユーザーインターフェイスをカスタマイズし、食品店チェーンアプリに必要な機能を追加します。

新しいプロジェクトを作成する

Visual Studio を開き、新しいソリューションを作成します。この操作により、Visual Studio で [新しいプロジェクト] ウィザードが開きます。

ヒント

Visual Studio 2022 v17.3 以降 (.NET 8 では v17.8 が最適です) で .NET MAUI ワークロードがインストールされていることを確認します。詳細については、こちらを参照してください。
[MAUI] というプロジェクトの種類を選択し、[.NET MAUI アプリ] テンプレートを選んで [次へ] を選択します。
[新しいプロジェクトの構成] ページで、プロジェクトに「Phoneword」という名前を付けて、任意の場所に保存します。 [次へ] を選択します。
[フレームワーク] ドロップダウンで [.NET 8.0 (長期サポート)] を選択した後、[作成] を選択してアプリを作成します。

ソリューション構造の確認

ソリューションエクスプローラーウィンドウで、Phoneword プロジェクトを展開します。 リソース フォルダーとそのサブフォルダーを展開し、App.xaml ノードと AppShell.xaml ノード、および MainPage.xaml ノードを展開します。
プロジェクトでは、次の項目に注意してください。
- リソース フォルダーには、すべてのプラットフォームで使われる共有フォント、画像、資産が含まれています。
- MauiProgram.cs ファイルには、アプリケーションを構成するコードが含まれており、アプリケーションの実行に App クラスを使う必要があることを指定します。
- App.xaml.cs ファイルでは、App クラスのコンストラクターが AppShell クラスの新しいインスタンスを作成し、それをアプリケーションウィンドウに表示します。
- AppShell.xaml ファイルには、アプリケーションのメインレイアウトと MainPage の開始ページが含まれています。
- MainPage.xaml ファイルには、ページのレイアウトが含まれています。このレイアウトには、[Click me] というキャプションを含むボタンの XAML (Extensible Application Markup Language) コードと、dotnet_bot.png ファイルを表示する画像が含まれます。他にも 2 つのラベルがあります。
- MainPage.xaml.cs ファイルには、このページのアプリケーションロジックが含まれています。具体的には、MainPage クラスには、OnCounterClicked という名前のメソッドがあり、ユーザーが [ここをクリック] ボタンをタップすると実行されます。

Windows でアプリケーションをビルドして実行する

Visual Studio ツールバーで、[Windows マシン] プロファイルを選びます。フレームワークのドロップダウンリストボックスの一覧から [.net8.0-windows] を選びます。
[デバッグ] メニューの [デバッグの開始] をクリックします。この操作により、Windows でアプリがビルド、デプロイ、実行されます。
Windows 版アプリが起動することを確認します。 [Click me](ここをクリック) ボタンを数回選びます。ボタンのテキストが更新され、タップするたびにカウントがインクリメントされます。
[表示] メニューの [ソリューションエクスプローラー] を選択します。ソリューションエクスプローラーウィンドウで、MainPage.xaml ノードを展開し、MainPage.xaml.cs 分離コードファイルを開きます。

OnCounterClicked メソッドで、count 変数をインクリメントするステートメントを、代わりにこの変数に 5 を追加するように変更します。

private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

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

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Visual Studio ツールバーで、[ホットリロード] ボタンを選びます。
アプリに戻り、[Click me](ここをクリック) ボタンを選びます。 count が 5 ずつ増えるようになることを確認します。

Note

Visual Studio のホットリロード機能を使うと、アプリをデバッグモードで実行している間のコード変更が有効になります。アプリを停止することなく、変更を確認できます。コードを変更するだけでなく、ページの XAML マークアップを変更することもでき、これらの変更は実行中のアプリで表示されます。
アプリを閉じ、Visual Studio に戻ります。

Android でアプリケーションをビルドして実行する

Visual Studio ツールバーで、[Phoneword] プロジェクトを選びます。
[ツール] メニューから [Android] を選び、[Android デバイスマネージャー] を選びます。 Android デバイスマネージャーコンピューターへの変更を許可するよう求められた場合は、[はい] を選択します。
[Android デバイスマネージャー] ウィンドウで [+ 新規] を選びます。 [新しいデバイス] ウィンドウで [Pixel 3a (+ Store)] ベースデバイスを選び、[API 30] OS を選んで、[作成] を選択します。各種ライブラリがダウンロードされ、デバイスが構成されるまで待ちます。

Note

この演習の例では、Pixel 3a (+ Store) ベースデバイスを使いますが、さらに新しいデバイスを使ってもかまいません。たとえば、Pixel 5 - API 31 や Pixel 5 - API 34 などです。
デバイスを作成すると、Visual Studio に戻ります。
Visual Studio ツールバーの [デバッグ] 構成ドロップダウンリストボックスで、[Android Emulators] プロファイルを選びます。作成した pixel_3a-api_30 デバイスを選びます。
デバッグを開始するには、pixel_3a-api_30 プロファイルを使用します。この操作により、Android デバイスでアプリがビルド、デプロイ、実行されます。
エミュレーター上でアプリの実行が開始されたら (このアクションには数分かかる場合があります)、[Click me] ボタンを選んで、Windows 上とまったく同じようにアプリが動作することを確認します。
Visual Studio に戻り、デバッグを停止します。

演習: 始めての .NET MAUI アプリを作成する

新しいプロジェクトを作成する

ソリューション構造の確認

Windows でアプリケーションをビルドして実行する

Android でアプリケーションをビルドして実行する

フィードバック