.NET MAUIBlazor アプリを構築する

このチュートリアルでは、.NET MAUIBlazor アプリを構築して実行する方法を示します。 以下の方法について説明します。

  • Visual Studio で .NET MAUIBlazor アプリ プロジェクトを作成する
  • Windows でアプリで実行する
  • Android Emulator で、エミュレートされたモバイル デバイスでアプリを実行する

前提条件

このチュートリアルの前提条件とソフトウェアのインストールの詳細については、.NET MAUI ドキュメントの次のリソースを参照してください。

.NET MAUIBlazor アプリを作成する

Visual Studio を起動します。 [スタート ウィンドウ] で、[新しいプロジェクトの作成] を選びます。

新しいソリューション。

[新しいプロジェクトの作成] ウィンドウで、[プロジェクトの種類] ドロップダウンを使って MAUI テンプレートをフィルター処理します。

.NET MAUI でテンプレートをフィルター処理します。

.NET MAUIBlazor App テンプレートを選び、[次へ] ボタンを選びます。

テンプレートを選択します。

[新しいプロジェクトの構成] ダイアログで、次のようにします。

  • [プロジェクト名]MauiBlazor に設定します。
  • プロジェクトに適した場所を選びます。
  • [次へ] ボタンを選択します。

プロジェクトを構成します。

[追加情報] ダイアログの [フレームワーク] ドロップダウン リストで、フレームワークのバージョンを選びます。 [作成] ボタンを選びます。

フレームワークのバージョンを選び、プロジェクトを作成するための [追加情報] ダイアログ。

Visual Studio でプロジェクトが作成され、プロジェクトの依存関係が復元されるまで待ちます。 ソリューション エクスプローラー[依存関係] エントリを開いて、進行状況を監視します。

依存関係の復元中:

依存関係の復元中。

依存関係復元済み:

復元された依存関係。

Windows でアプリで実行する

Visual Studio ツールバーで [Windows マシン] ボタンを選び、プロジェクトをビルドして開始します。

[Windows マシン] ボタン。

開発者モードが有効になっていない場合、[設定]>[開発者向け]>[開発者モード] (Windows 10) または [設定]>Privacy&[プライバシーとセキュリティ]>[開発者向け]>[開発者モード] (Windows 11) で有効にするように求められます。 スイッチを [オン] に設定します。

Windows デスクトップ アプリとして実行されているアプリ:

Windows で実行されているアプリ。

Android Emulator でアプリを実行する

Windows でアプリで実行する」セクションのガイダンスに従った場合は、ツールバーの [デバッグの停止] ボタンを選んで Windows アプリの実行を停止します。

[デバッグの停止] ボタン。

Visual Studio のツール バーで、構成開始ドロップダウン ボタンを選びます。 [Android Emulators](Android エミュレーター)>[Android エミュレーター] を選びます。

[Android エミュレーター] ボタンの [Android Emulators] (Android エミュレーター) ドロップダウンの選択項目。

Android SDK は、Android 用のアプリをビルドするために必要です。 [エラー一覧] パネルにメッセージが表示され、メッセージをダブルクリックして必要な Android SDK をインストールするように指示されます。

メッセージをクリックして Android SDK をインストールするよう促すメッセージが表示されている Visual Studio の [エラー一覧]。

[Android SDK - ライセンスの同意] ウィンドウが表示されます。表示されるライセンスごとに [承諾] ボタンを選びます。 Android Emulator および SDK Patch Applier のライセンスに関する別のウィンドウが表示されます。 [承諾] ボタンを選びます。

Visual Studio によって Android SDK と Android Emulator がダウンロードされるのを待ちます。 Visual Studio UI の左下隅にあるバックグラウンド タスク インジケーターを選択すると、進行状況を追跡できます。

Visual Studio のバックグラウンド タスク インジケーター。

バックグラウンド タスクが完了すると、インジケーターにチェックマークが表示されます。

チェックマーク付きの Visual Studio のバックグラウンド タスク インジケーター。

ツールバーで [Android エミュレーター] ボタンを選びます。

[Android エミュレーター] ボタン。

[Create a Default Android Device](既定の Android デバイスの作成) ウィンドウで [作成] ボタンを選びます。

[Create a Default Android Device] (既定の Android デバイスの作成) ウィンドウ。

Visual Studio によって Android Emulator がダウンロード、解凍、作成されるのを待ちます。 Android 電話機エミュレーターの準備ができたら、[開始] ボタンを選びます。

Note

Android Emulator のパフォーマンスを向上させるため、ハードウェアの高速化を有効にします

[Android デバイス マネージャー] ウィンドウを閉じます。 エミュレートされた電話機のウィンドウが表示され、Android OS が読み込まれて、ホーム画面が表示されるまで待ちます。

重要

デバッガーでアプリを読み込んで実行するには、Android OS が読み込まれた状態で、エミュレートされた電話機の電源をオンにする必要があります。 エミュレートされた電話機が稼働していない場合は、Ctrl+P キーボード ショートカットを使用するか、UI で [電源] ボタンを選択して、電話機をオンにします。

Android Emulator の [電源] ボタン。

Visual Studio ツール バーの Pixel 5 - {VERSION} ボタンを選び、プロジェクトをビルドして実行します。{VERSION} プレースホルダーは Android のバージョンです。 次の例の Android のバージョンは API 30 (Android 11.0 - API 30) であり、インストールされている Android SDK によってはさらに新しいバージョンが表示されます。

Pixel 5 API 30 エミュレーター ボタン。

Visual Studio によって、プロジェクトがビルドされて、アプリがエミュレーターに配置されます。

エミュレーターの起動、エミュレートされた電話機と OS の読み込み、アプリの配置と実行には、システムの速度と、ハードウェア アクセラレーションが有効になっているかどうかに応じて、数分かかる場合があります。 UI の下部にある Visual Studio のステータス バーを調べることで、配置の進行状況を監視できます。 アプリの実行中は、[準備完了] インジケーターにチェックマークが付き、エミュレーターの配置とアプリの読み込みインジケーターが消えます。

配置中:

Visual Studio フッター バーに表示される最初の配置実行インジケーター。

アプリの起動時:

Visual Studio フッター バーに表示される 2 番目の配置実行インジケーター。

Android Emulator で実行されているアプリ:

Android Emulator で実行されているアプリ。

次のステップ

このチュートリアルでは、以下の内容を学習しました。

  • Visual Studio で .NET MAUIBlazor アプリ プロジェクトを作成する
  • Windows でアプリで実行する
  • Android Emulator で、エミュレートされたモバイル デバイスでアプリを実行する

このチュートリアルでは、.NET MAUIBlazor アプリを構築して実行する方法を示します。 以下の方法について説明します。

  • Visual Studio for Mac で .NET MAUIBlazor アプリ プロジェクトを作成する
  • Mac Catalyst を使用して macOS でアプリを実行する
  • Android Emulator で、エミュレートされたモバイル デバイスでアプリを実行する

前提条件

重要

Visual Studio for Mac をインストールする前に、Apple Xcode をインストールします。

IDE が逆の順序でインストールされている場合は、次の手順を使用して、Visual Studio for Mac で Apple SDK を設定します。

  1. Visual Studio for Mac のメニュー バーから [Visual Studio]>[基本設定] を選択します。
  2. [SDK の場所]>[Apple] で、[Apple SDK]>[場所] パスを Xcode アプリの物理的な場所に設定します。
  3. [Visual Studio を再起動] ボタンを選択します。

このチュートリアルの前提条件と macOS へのソフトウェアのインストールの詳細については、.NET MAUI ドキュメントの次のリソースを参照してください。

.NET MAUIBlazor アプリを作成する

Visual Studio for Mac を起動します。 スタート ウィンドウが開いていない場合は、[ファイル] メニューから [スタート ウィンドウを表示する] を選択します。

[新規] ボタンを選択して、新しいアプリを作成します。

Visual Studio for Mac のスタート。

[.NET MAUIBlazor アプリ] プロジェクト テンプレートを選択し、[続行] ボタンを選択します。

.NET MAUIBlazor アプリ プロジェクト テンプレートが選択された状態で、新しいプロジェクト ダイアログのテンプレートを選択する。

[ターゲット フレームワーク] ドロップダウンでターゲット フレームワークを選択し、[続行] ボタンを選択します。

.NET 7.0 ターゲット フレームワークを選択して、新しい .NET MAUIBlazor アプリ ダイアログを構成する。

[プロジェクト名] フィールドでプロジェクトに名前を付け、[作成] ボタンを選択します。 このデモのプロジェクト名は MauiBlazor です。

新しい .NET MAUIBlazor アプリ ダイアログをプロジェクト名 Maui を使用して構成するBlazor。

Mac Catalyst を使用して macOS でアプリを実行する

再生ボタン (▶) を選択して、アプリをビルドおよび実行します。

再生ボタンの位置を示す MauiBlazor ウィンドウ。

再生ボタンを使用してアプリをビルドおよび起動する代わりに、[デバッグ] メニューから [デバッグなしで開始] を選択します。

Mac Catalyst を使用して macOS で実行されているアプリ:

Apple Safari で実行されている .NET MAUIBlazor アプリ。

Android Emulator でアプリを実行する

[デバッグ]>[自分の Mac (MacCatalyst)] ボタンのデバイス部分を選択します。

ボタンの [自分の Mac (MacCatalyst)] 部分が表示されている [デバッグ] のデバイス ボタン。

ドロップダウンから [Android Emulator] を選択します。

[デバッグ] のデバイス ボタンのデバイス部分の後に表示されるデバイスの一覧が UI で選択され、Android Emulator がデバイスの選択として表示されている。

再生ボタン (▶) を選択します。

[デバッグ] のデバイス ボタンの横に表示されている再生ボタン。

Android デバイスが存在しないため、[新しいデバイス] ウィンドウが表示され、既定の Android モバイル デバイスが読み込まれます。 次の例は、既定のデバイスが、API 33 を使用する Google Pixel 5 モバイル デバイスとして表示されています。 推奨される既定のデバイスまたは別のデバイスの選択に関係なく、[作成] ボタンを選択します。

既定の Android モバイル デバイスが読み込まれた [新しいデバイス] ウィンドウ。

[ライセンスの同意] ウィンドウが表示され、ライセンスの条項に同意する場合は、[同意する] ボタンを選択します。

Android ソフトウェア開発キットを使用するためのご契約条件を説明する [ライセンスの同意] ダイアログ。

[Android デバイス マネージャー] ダイアログが表示され、新しい Android モバイル デバイスのダウンロード、解凍、インストールの進行状況が表示されます。

Google Pixel 5 モバイル デバイスのダウンロードの進行状況 8% を示す [Android デバイス マネージャー] ダイアログ。

Android デバイスがインストールされるまで待ちます。

[再生] (▶) ボタンを選択して、エミュレートされたモバイル デバイスを起動します。

[Android デバイス マネージャー] ダイアログの Google Pixel 5 モバイル デバイスの [再生] ボタン。

エミュレートされた Android モバイル デバイスが表示されます。 デバイスのエミュレートされた OS が読み込まれるまで待ちます。

Android Emulator で実行されている Google Pixel 5 モバイル デバイス。

Visual Studio for Mac で、[デバッグ] のデバイス ドロップダウンを使用して、新しい Android モバイル デバイスを選択します。

Google Pixel 5 モバイル デバイス エントリを示す [デバッグ] のデバイス ドロップダウン。

Android デバイスが [デバッグ] のデバイス ボタンに表示されるようになりました。 [再生] (▶) ボタンを選択して、モバイル デバイスでアプリをビルドおよび起動します。

Visual Studio for Mac UI の [デバッグ] のデバイス ボタンの横にある [再生] ボタン。

Visual Studio のステータス バーに、アプリが、エミュレートされたモバイル デバイスに配置されていることが示されます。

ステータス バーの [デバイスに配置しています] メッセージ。

エミュレートされた Android モバイル デバイスで実行されているアプリ:

エミュレートされた Google Pixel 5 モバイル デバイスで実行されているアプリ。

次のステップ

このチュートリアルでは、以下の内容を学習しました。

  • Visual Studio for Mac で .NET MAUIBlazor アプリ プロジェクトを作成する
  • Mac Catalyst を使用して macOS でアプリを実行する
  • Android Emulator で、エミュレートされたモバイル デバイスでアプリを実行する

Blazor Hybrid アプリについてさらに学習してください。