.NET MAUI チュートリアル | C# での最初のマルチプラットフォームアプリ

はじめに

目的

開発環境をセットアップし、最初の .NET Multi-platform App UI (.NET MAUI) アプリをビルドします。

前提条件

Visual Studio 2022 の _blank">システム要件を確認します。

完了までの時間

10分 + ダウンロード/インストール時間

シナリオ

Hello, World! メッセージを表示する、Windows または Android で実行されるモバイルおよびデスクトップアプリ。

ダウンロードしてインストール

Visual Studio 2022 をダウンロードしてインストールします。

Visual Studio 2022 のダウンロード

インストール中に、.NET マルチプラットフォームアプリの UI 開発ワークロードを選択する必要があります。上記のリンクを使用すると、次の画像に示されているように、すべての前提条件が正しく事前選択されるはずです。

Visual Studio 2022 を既にお使いですか?

Visual Studio 2022 を既にお持ちの場合は、インストールを更新して .NET MAUI サポートを追加できます:

Windows キーを選択し、Visual Studio インストーラー と入力して、Enter キーを押します。
プロンプトが表示された場合は、インストーラーが自分自身を更新することを許可します。
Visual Studio 2022 の更新プログラムが利用可能な場合は、Update ボタンが表示されます。それを選択して、インストールを変更する前に更新します。
Visual Studio 2022 のインストールを見つけて、[変更] を選択します。
[.NET マルチプラットフォームアプリの UI 開発] を選択します。
[変更] ボタンを選択します。

アプリを作成する

新しい.NET MAUI アプリの作成:

Visual Studio 2022 を開きます。
[新しいプロジェクトの作成] を選択します。
"新しいプロジェクトの作成" ウィンドウで、[すべてのプロジェクトの種類] ドロップダウンリストから [MAUI] を選択し、[.NET MAUI アプリ] テンプレートを選択して、[次へ] ボタンをクリックします。
[新しいプロジェクトの構成] ダイアログで、プロジェクト名として「BlazorApp」と入力し、[次へ] ボタンをクリックします。
追加情報 ウィンドウで、まだ選択していない場合はFramework ドロップダウンから .NET 7.0 (Standard Term Support) を選択し、作成ボタンをクリックします。

Visual Studio で新しいプロジェクトを作成します。ファイアウォールによって一部の機能がブロックされていることを警告する Windows セキュリティアラートが表示される場合は、[アクセスを許可] ボタンを選択します。

NuGet パッケージの復元プロセスを待機する

NuGet は、新しいアプリの依存関係を取り込んだパッケージマネージャーです。

パッケージの復元処理が自動的に開始されます。復元済み または 準備完了 のメッセージが画面左下のステータスバーに表示されるまでお待ちください。

アプリケーションを実行する

このチュートリアルでは、最初にローカル Windows コンピューターに .NET MAUIアプリケーションを展開する方法について詳しく説明します。その後で、Android デバイスまたはエミュレーターを設定できます。

[Visual Studio] ツールバーには、既定でWindows マシンがデバッグターゲットとして表示されます。[Windows マシン] ボタンを押して、アプリを構築して実行します:

開発者モードをまだ有効にしていない場合は、Visual Studio で有効にするように求められます。[Windows の開発者モードを有効にする] ダイアログで、開発者向け設定リンクをクリックして設定アプリを開きます。

[開発者モード] のトグルをオンにします。

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

設定アプリを閉じてから、[Windows 用に開発者モードを有効にする] ダイアログを閉じます。アプリの実行を開始する必要があります。

実行中のアプリで、[ここをクリック] ボタンを数回選択し、ボタンのクリック数が増加していることを確認します:

おめでとうございます。最初の .NET MAUI アプリを構築して実行しました。アプリをそのまま実行して、チュートリアルを続行します。

コードを編集する

.NET MAUI を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホットリロードを使用できます。これは、アプリケーションの実行中に XAML ユーザーインターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。

Visual Studio に戻り、アプリを実行したままにしておきます。ソリューションエクスプローラーで、MyFirstMauiApp プロジェクトの下にある MainPage.xaml ファイルをダブルクリックします。"ソリューションエクスプローラー" ウィンドウが表示されない場合は、メインメニューから [ビュー] > [ソリューションエクスプローラー] を選択します (または Ctrl + Alt + L キーを押します)。

現在、最初の Label の Text は、次のコードに示されているように Hello, World! と表示される設定になっています。:

MainPage.xaml

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

テキストを更新して、Hello, .NET MAUI! と表示します。

MainPage.xaml

<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 メソッドには、現在次のコードが含まれています:

MainPage.xaml.cs

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 ずつ増分するようにします。

MainPage.xaml.cs

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 ずつ増加して表示されます。完了しました。実行中のアプリを今すぐ閉じることができます。

Android デバイスを構成する

開発環境に基づいて、1 つ以上のプラットフォームに配置できます。アプリを実行して Windows に展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。

Android SDK のインストール

デバッグターゲットのドロップダウンメニューから、[フレームワーク] で [net7.0-android] を選択します。

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

メッセージをダブルクリックして、ライセンスへの同意プロセスを開始します。表示された各ライセンスに対して[同意する]をクリックすると、自動インストールが開始されます。

Android Emulator の設定

展開先の Android デバイスがない場合は、次のステップに従って Android エミュレーターを設定できます。既にこれを行っているか、独自の Android デバイスを使用する場合は、このステップをスキップできます。

.NET MAUI アプリケーションを初めてビルドする場合は、デバッグターゲットのドロップダウンメニューで Android Emulator が表示されます。クリックして作成プロセスを開始します。ライセンス受け入れダイアログが表示されたら、同意するを選択します。

"新しいデバイス" ウィンドウが表示されます。[作成] ボタンを選択して、既定の設定でエミュレーターを作成します。これにより、エミュレーターイメージがダウンロードされ、Visual Studio で使用するエミュレーターの作成が完了します。このステップには時間がかかる場合があります。

エミュレーターが作成されると、スタート というボタンが表示されます。それをクリックします。

Windows ハイパーバイザープラットフォームを有効にするように求めるメッセージが表示されることがあります。ドキュメントにしたがって、高速化を有効にしてパフォーマンスを向上させてください (エミュレーターを起動して実行する必要です)。

Android エミュレーターが起動します。起動が完全に完了するまで待つと、Visual Studio のデバッグメニューに表示されます。これには時間がかかることがあります。

Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグターゲットウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップドキュメントをお読みください。

開発環境に基づいて、1 つ以上のプラットフォームに配置できます。アプリを実行して Mac に展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。

.NET MAUI アプリケーションを初めてビルドする場合は、新しい Android Emulator を作成する必要があります。デバッグメニューに Android Emulator が表示されます。再生アイコン (▶) を押して作成プロセスを開始します。

オプションは、ベースエミュレーターに対して自動的に設定されます。必要に応じて、オプションを変更し [作成] を選択します。

この時点で、Android Emulator の使用許諾契約書に同意するよう促すメッセージが表示される場合があります。ご覧頂き、、同意を選択してプロセスを続行します。これでエミュレーター画像がダウンロードされ、Visual Studio で使用するエミュレーターの作成が完了します。

エミュレーターが作成されると、[再生] というボタンが表示されます。それをクリックします。

Android エミュレーターが起動します。起動が完全に完了するまで待つと、Visual Studio のデバッグメニューに表示されます。ハードウェアアクセラレーションを使用していない場合、これには時間がかかることがあります。

Android emulator が作成され、使用できるようになりました。次回 Visual Studio を実行するときに、エミュレーターはデバッグターゲットウィンドウに直接表示され、選択すると開始します。エミュレーターの使用中に問題が発生した場合やパフォーマンスの問題が発生した場合は、完全なセットアップドキュメントをお読みください。

Android デバイスの設定

Android デバイスを使用して開発するには、USB デバッグを有効にする必要があります。デバイスで以下の手順に従い、Visual Studio に接続します。Android デバイスをお持ちでない場合は、このセクションはスキップしても構いません。

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

[設定] 画面に移動します。
設定画面の上部にある検索を使用してビルド番号を検索するか、[携帯電話情報] で検索します。
"開発者になりました!" と表示されるまで、ビルド番号 を 7 回から 10 回タップします。

USB デバッグ状態の確認

[設定] 画面に移動します。
設定画面の上部にある検索を使用して [USB デバッグ] を検索するか、[開発者向け] オプションで検索します。
USB デバッグ が有効になっていない場合は、有効にします。

デバイスを信頼する

デバイスをコンピューターに接続します。
USB デバッグを許可するかどうか確認するメッセージが表示されます。
このコンピューターで常に許可 であることを確認します。
[許可] をクリックします。

デバイスが構成され、配置ターゲットとして Visual Studio に表示されるようになりました。

問題はありませんか? ドキュメントを確認します。

これで、エミュレーターやデバイスが展開用に構成されているはずです。

Android で実行

デバイスまたはエミュレーターがデバッグターゲットとして選択されていることを確認します。

メニューから、[デバッグ] > [デバッグの開始]を選択します (またはF5 キーを押す)。このオプションが無効になっている場合は、エミュレーターまたはデバイスが選択されていることを確認してください。

アプリケーションがビルドされ、選択された Android デバイスまたは Android Emulator に展開されて実行されます。

次の手順

おめでとうございます。初めての .NET MAUI アプリをビルドして実行しました。

学習を続ける

基本を習得したので、Microsoft Learn のセルフガイド学習パスを使用して .NET MAUI アプリをビルドする方法を引き続き学習します。

.NET MAUI ラーニングパス

.NET MAUI for Beginners

James が .NET MAUI アプリのビルド方法を始めから終わりまで説明します。

あなたは下記にもご興味がおありかもしれません...

開発者向けドキュメント

.NET MAUI のドキュメントによる専門的な情報

.NET MAUI のサンプル

GitHub 上の .NET MAUI サンプルを確認する

.NET MAUI チュートリアル - C# で初めてのマルチプラットフォームアプリを構築する

はじめに

目的

前提条件

完了までの時間

シナリオ

ダウンロードしてインストール

Visual Studio 2022 を既にお使いですか?

Visual Studio の更新プログラムを確認する

Xcode のインストール

アプリを作成する

NuGet パッケージの復元プロセスを待機する

アプリケーションを実行する

コードを編集する

Android デバイスを構成する

Android SDK のインストール

Android Emulator の設定

Android デバイスの設定

Android で実行

次の手順

学習を続ける

.NET MAUI for Beginners

開発者向けドキュメント

.NET MAUI のサンプル

問題の報告

フィードバックを提供する

.NET MAUI チュートリアル - C# で初めてのマルチプラットフォーム アプリを構築する

はじめに

目的

前提条件

完了までの時間

シナリオ

ダウンロードしてインストール

Visual Studio 2022 を既にお使いですか?

Visual Studio の更新プログラムを確認する

Xcode のインストール

アプリを作成する

NuGet パッケージの復元プロセスを待機する

アプリケーションを実行する

コードを編集する

Android デバイスを構成する

Android SDK のインストール

Android Emulator の設定

Android デバイスの設定

Android で実行

次の手順

学習を続ける

.NET MAUI for Beginners

開発者向けドキュメント

.NET MAUI のサンプル

.NET MAUI チュートリアル - C# で初めてのマルチプラットフォームアプリを構築する