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

[アーティクル]
11/06/2024

注意

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

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。詳細については、「.NET および .NET Core サポートポリシー」を参照してください。現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

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

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

前提条件

サポートされているプラットフォーム (.NET MAUI のドキュメント)
Visual Studio と .NET Multi-platform App UI 開発ワークロード。
Microsoft Edge WebView2: ネイティブアプリを実行する場合、Windows では WebView2 が必要です。 .NET MAUIBlazor Hybrid アプリを開発し、それを Visual Studio のエミュレーターで実行するだけであれば、WebView2 は必要ありません。
Android Emulator のパフォーマンスを向上させるため、ハードウェアの高速化を有効にします。

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

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

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

新しいソリューション。

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

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

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

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

Note

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

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

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

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

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

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

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

依存関係の復元中:

依存関係の復元中。

依存関係復元済み:

復元された依存関係。

Windows でアプリで実行する

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

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

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

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

Android Emulator でアプリを実行する

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

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

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

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

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

Note

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

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

重要

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

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 フッターバーに表示される最初の配置実行インジケーター。