開発環境をセットアップし、最初の .NET Multi-platform App UI (.NET MAUI) アプリをビルドします。
Visual Studio 2022 の _blank">システム要件を確認します。
10分 + ダウンロード/インストール時間
Hello, World!
メッセージを表示する、Windows または Android で実行されるモバイルおよびデスクトップ アプリ。
Hello, World!
メッセージを表示する、Mac または Android で実行されるモバイルおよびデスクトップ アプリです。
Visual Studio 2022 をダウンロードしてインストールします。
インストール中に、.NET マルチプラットフォーム アプリの UI 開発ワークロードを選択する必要があります。上記のリンクを使用すると、次の画像に示されているように、すべての前提条件が正しく事前選択されるはずです。
Visual Studio 2022 を既にお持ちの場合は、インストールを更新して .NET MAUI サポートを追加できます:
Visual Studio 2022 for Mac をダウンロードしてインストールします。
Visual Studio 2022 for Mac のダウンロード
インストール中に、次のワークロードが選択されていることを確認します。
最後の 2 つのワークロード (Android と iOS) は、.NET MAUI を選択すると自動的に選択されます。
このチュートリアルは、最新バージョンの Visual Studio for Mac 向けに最適化されています。既に Visual Studio 2022 for Mac をお持ちの場合は、更新プログラムを確認してください:
.NET MAUI アプリをビルドするには、次の項目も必要です:
Apple ID:
Apple ID をまだお持ちでない場合は、https://appleid.apple.com で新しい ID を作成できます。Xcode をインストールしてサインインするには、Apple ID が必要です。
Xcode をインストールした後、Xcode を開き、サービス使用条件に同意し、ダイアログが表示された場合は、オプションのコンポーネントをインストールする必要があります。
新しい.NET MAUI アプリの作成:
"新しいプロジェクトの作成" ウィンドウで、[すべてのプロジェクトの種類] ドロップダウンリストから [MAUI] を選択し、[.NET MAUI アプリ] テンプレートを選択して、[次へ] ボタンをクリックします。
[新しいプロジェクトの構成] ダイアログで、プロジェクト名として「BlazorApp」と入力し、[次へ] ボタンをクリックします。
追加情報 ウィンドウで、まだ選択していない場合はFramework ドロップダウンから .NET 7.0 (Standard Term Support) を選択し、作成 ボタンをクリックします。
Visual Studio で新しいプロジェクトを作成します。ファイアウォールによって一部の機能がブロックされていることを警告する Windows セキュリティ アラートが表示される場合は、[アクセスを許可] ボタンを選択します。
NuGet は、新しいアプリの依存関係を取り込んだパッケージ マネージャーです。
パッケージの復元処理が自動的に開始されます。復元済み または 準備完了 のメッセージが画面左下のステータス バーに表示されるまでお待ちください。
"新しいプロジェクトのテンプレートを選択" ウィンドウで、[マルチプラットフォーム] > [アプリ] を選択し、.NET MAUI アプリ テンプレートを選択して [続行] ボタンをクリックします。
".NET MAUI アプリ" ウィンドウの [ターゲット フレームワーク] ドロップダウンで [.NET 7.0] を選択します。すでに選択されている場合は、[続行] ボタンをクリックします。
プロジェクト名として 「MyFirstMauiApp」と入力し [作成] を選択します。
このチュートリアルでは、最初にローカル Windows コンピューターに .NET MAUIアプリケーションを展開する方法について詳しく説明します。その後で、Android デバイスまたはエミュレーターを設定できます。
[Visual Studio] ツール バーには、既定でWindows マシンがデバッグ ターゲットとして表示されます。[Windows マシン] ボタンを押して、アプリを構築して実行します:
開発者モードをまだ有効にしていない場合は、Visual Studio で有効にするように求められます。[Windows の開発者モードを有効にする] ダイアログで、開発者向け設定リンクをクリックして設定アプリを開きます。
[開発者モード] のトグルをオンにします。
[開発者向け機能を使う] ダイアログが表示されます。開発者モードを有効にすることを確認するには、[はい] を選択します。
設定アプリを閉じてから、[Windows 用に開発者モードを有効にする] ダイアログを閉じます。アプリの実行を開始する必要があります。
実行中のアプリで、[ここをクリック] ボタンを数回選択し、ボタンのクリック数が増加していることを確認します:
このチュートリアルでは、最初にローカルの Mac コンピューターに .NET MAUIアプリケーションを展開する方法について詳しく説明します。その後で、Android デバイスまたはエミュレーターを設定できます。
Visual Studio ツール バーに、既定で、My Mac がデバッグ ターゲットとして表示されます。アプリを構築して実行するには、再生アイコン (▶) を押します。
実行中のアプリで、[ここをクリック] ボタンを数回選択し、ボタンのクリック数が増加していることを確認します:
おめでとうございます。最初の .NET MAUI アプリを構築して実行しました。アプリをそのまま実行して、チュートリアルを続行します。
.NET MAUI を使用してアプリケーションを開発している場合、アプリケーションをデバッグするときに XAML ホット リロードを使用できます。これは、アプリケーションの実行中に XAML ユーザー インターフェイス (UI) を変更できることを意味し、UI は自動的に更新されます。
Visual Studio に戻り、アプリを実行したままにしておきます。ソリューション エクスプローラーで、MyFirstMauiApp
プロジェクトの下にある MainPage.xaml
ファイルをダブルクリックします。"ソリューション エクスプローラー" ウィンドウが表示されない場合は、メイン メニューから [ビュー] > [ソリューション エクスプローラー] を選択します (または Ctrl + Alt + L キーを押します)。
Visual Studio に戻り、アプリを実行したままにしておきます。"ソリューション" ウィンドウで、MyFirstMauiApp
プロジェクトの下にある MainPage.xaml
ファイルをダブルクリックします。"ソリューション" ウィンドウが表示されない場合は、メイン メニューから [ビュー] > [ソリューション] を選択してください。
現在、最初の Label
の Text
は、次のコードに示されているように 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 ずつ増加して表示されます。完了しました。実行中のアプリを今すぐ閉じることができます。
開発環境に基づいて、1 つ以上のプラットフォームに配置できます。アプリを実行して Windows に展開しました。次に、Android デバイスまたはエミュレーターを設定しましょう。
デバッグ ターゲットのドロップダウン メニューから、[フレームワーク] で [net7.0-android] を選択します。
プロジェクトをビルドするには、Android SDK の特定のバージョンが必要です。Android SDK ライセンスに同意していない場合は、[エラー一覧] ウィンドウに次のエラー メッセージが表示されます。
メッセージをダブルクリックして、ライセンスへの同意プロセスを開始します。表示された各ライセンスに対して[同意する]をクリックすると、自動インストールが開始されます。
展開先の 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 デバイスを使用して開発するには、USB デバッグを有効にする必要があります。デバイスで以下の手順に従い、Visual Studio に接続します。Android デバイスをお持ちでない場合は、このセクションはスキップしても構いません。
開発者モードを有効にする
USB デバッグ状態の確認
デバイスを信頼する
デバイスが構成され、配置ターゲットとして Visual Studio に表示されるようになりました。
問題はありませんか? ドキュメントを確認します。
これで、エミュレーターやデバイスが展開用に構成されているはずです。
デバイスまたはエミュレーターがデバッグ ターゲットとして選択されていることを確認します。
メニューから、[デバッグ] > [デバッグの開始]を選択します (またはF5 キーを押す)。このオプションが無効になっている場合は、エミュレーターまたはデバイスが選択されていることを確認してください。
メニューから、[デバッグ] > [デバッグの開始] を選択します。このオプションが無効になっている場合は、エミュレーターまたはデバイスが選択されていることを確認してください。
アプリケーションがビルドされ、選択された Android デバイスまたは Android Emulator に展開されて実行されます。
おめでとうございます。初めての .NET MAUI アプリをビルドして実行しました。
基本を習得したので、Microsoft Learn のセルフガイド学習パスを使用して .NET MAUI アプリをビルドする方法を引き続き学習します。
James が .NET MAUI アプリのビルド方法を始めから終わりまで説明します。
あなたは下記にもご興味がおありかもしれません...