.NET MAUI を使用してモバイルアプリを作成する——Get Start

1、IDE のダウンロードとインストール

まだ Visual Studio 2022 プレビュー版をインストールしていない場合

ダウンロードをクリックできます

インストール中に、.NET クロスプラットフォームアプリケーション UI 開発を選択する必要があります。以下の図を参照してください：

既に Visual Studio 2022 プレビュー版を所有している場合

既に Visual Studio 2022 プレビュー版をお持ちの場合は、更新して .NET MAUI サポートを追加できます。

2、アプリの作成

Visual Studio 2022 プレビュー版を開きます。
新しいプロジェクトの作成ボタンを選択します。
プロジェクトタイプのドロップダウンリストから MAUI を選択します。
.NET MAUI App テンプレートを選択し、次へボタンを選択します。

プロジェクト名としてMyFirstMauiAppを入力し、作成ボタンを選択します。

NuGet パッケージの復元

NuGet がアプリケーションの依存関係を自動的に復元するのを待ち、画面左下のステータスバーに「復元されました」または「準備完了」というメッセージが表示されるのを確認します。

3、アプリの実行

このチュートリアルでは、まず .NET MAUI アプリケーションをローカルの Windows コンピューターに展開することに焦点を当てます。後で、Android デバイスまたはエミュレーターをセットアップすることもできます。

開発のための Windows のセットアップ

Windows アプリケーションを開発するには、Windows 11 または Windows 10 でアプリケーションをサイドロードするために開発者モードを有効にする必要があります。

開発者モードを有効にする

Windows で、設定アプリに移動します。
Windows 11 の「プライバシーとセキュリティ」、Windows 10 の「更新とセキュリティ」で「開発者向け設定」を検索します。
開発者モードの下にあるトグルスイッチをオンにします。

「開発者機能を使用する」ダイアログが表示されます。「はい」を選択して、開発者モードを有効にすることを確認します。

Windows 上での実行

これで、.NET MAUI アプリを実行して Windows に展開する準備が整いました。ツールバーでは、デフォルトで Windows マシンがデバッグターゲットとして扱われます。

「デバッグ」 > 「デバッグの開始（F5）」を選択します（または F5 キーを押します）

4、コードの編集

.NET MAUI を使用した開発では、デバッグ中に XAML ホットリロードを使用できます。つまり、実行時に XAML ユーザーインターフェイスを変更すると、UI が自動的に更新されます。

ソリューションエクスプローラーで、プロジェクト MyFirstMauiApp の下にある MainPage.xaml ファイルをダブルクリックします。

現在、最初のラベルのテキストは、次のコードのように Hello, World! に設定されています：

<Label
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

テキストを Hello, .NET MAUI! に更新します：

<Label
    Text="Hello, .NET MAUI!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

UI が自動的に更新されます：

.NET MAUI を使用した開発では、.NET ホットリロードを使用して C# コードをリロードすることもできます。プログラムのロジックを変更して、カウントを 1 ではなく 10 ずつ増やします。

MainPage.xaml.cs を開きます（このファイルは MainPage.xaml の下にネストされているか、右クリックしてメニューからコードの表示を選択できます）。

そのファイルの OnCounterClicked メソッドには現在、次のコードがあります：

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

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

    SemanticScreenReader.Announce(CounterBtn.Text);
}

count++ を count += 10; に変更して、10 ずつ増やすように更新します：

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

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

    SemanticScreenReader.Announce(CounterBtn.Text);
}

コード変更を適用するには、Visual Studio でホットリロードボタンを選択するか、ALT+F10 キーを押します。

「クリックしてください」ボタンを選択すると、10 ずつ増加することが確認できます。

5、Android デバイスの構成

開発環境に応じて、複数のプラットフォームに展開することを決定できます。先ほど Windows に実行および展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。

Android SDK のインストール

デバッグドロップダウンメニューから、フレームワークの下にある net6.0-android を選択します。

プロジェクトをビルドするには、特定のバージョンの Android SDK が必要です。Android SDK ライセンスにまだ同意していない場合、エラーリストウィンドウに次のエラーメッセージが表示されます。

メッセージをダブルクリックして、ライセンス承認プロセスを開始します。存在する各ライセンスについて「同意する」をクリックすると、自動インストールが開始されます。

Android エミュレーターのセットアップ

展開する Android デバイスがない場合は、Android エミュレーターをセットアップできます。既に行っている場合は、この手順をスキップできます。

これが初めての .NET MAUI アプリケーションのビルドである場合、デバッグメニューに「Android Emulator」が表示されます。それをクリックして作成プロセスを開始します。

これにより、ユーザーアカウント制御のプロンプトが表示されます。「はい」ボタンを選択すると、エミュレーターの作成プロセスが開始されます。「作成」ボタンを選択して、デフォルト設定でエミュレーターを作成します。

この時点で、Android エミュレーターのライセンス契約に同意するよう求められる場合があります。「同意する」を選択してプロセスを続行し、エミュレーターイメージをダウンロードしてエミュレーターの作成を完了します。エミュレーターが作成されると、「開始」と表示されるボタンが表示されます。それをクリックします。