.NET MAUIBlazor Hybrid アプリを構築する

注意

これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の ASP.NET Core 8.0 バージョンを参照してください。

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

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

前提条件

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

.NET MAUIBlazor Hybrid アプリを作成する

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

New solution.

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

Filter templates to .NET MAUI.

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

Choose a template.

Note

.NET 7 以前では、テンプレートの名前は .NET MAUIBlazor App です。

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

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

Configure the project.

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

Additional information dialog for selecting the framework version and creating the project.

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

依存関係の復元中:

Restoring dependencies.

依存関係復元済み:

Restored dependencies.

Windows でアプリで実行する

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

Windows Machine button.

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

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

App running on Windows.

Android Emulator でアプリを実行する

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

Stop Debugging button.

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

Android Emulators dropdown selection for the Android Emulator button.

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

Visual Studio Error List with message asking you to click the message to install Android SDKs.

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

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

Visual Studio background tasks indicator.

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

Visual Studio background tasks indicator checked.

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

Android Emulator button.

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

Create a Default Android Device window.

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

Note

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

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

重要

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

The Android Emulator's Power button.

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

Pixel 5 API 30 emulator button.

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

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

配置中:

The first deploy-run indicator that appears in the Visual Studio footer bar.

アプリの起動時:

The second deploy-run indicator that appears in the Visual Studio footer bar.

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

App running in the Android Emulator.

次のステップ

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

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

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