BlazorWebView を使用して .NET MAUI アプリで Blazor Web アプリをホストする

[アーティクル]
02/13/2024

.NET マルチプラットフォームアプリ UI (.NET MAUI) BlazorWebView は、.NET MAUI アプリで Blazor Web アプリをホストできるコントロールです。 Blazor ハイブリッドアプリと呼ばれるこれらのアプリを使用すると、Blazor Web アプリをプラットフォームの機能や UI コントロールと統合できます。 BlazorWebView コントロールは、.NET MAUI アプリのどのページにも追加でき、Blazor アプリのルートを指します。 Razor コンポーネントは、.NET プロセスでネイティブに動作し、Web UI を埋め込み Web ビューコントロールにレンダリングします。 .NET MAUI では、Blazor ハイブリッドアプリは、.NET MAUI でサポートされているすべてのプラットフォームで実行できます。

BlazorWebView には、次のプロパティが定義されています。

HostPage は string? 型であり、Blazor Web アプリのルートページを定義します。
RootComponents (RootComponentsCollection 型) - コントロールに追加できるルートコンポーネントのコレクションを指定します。

HostPage (string? 型) - Blazor Web アプリのルートページを定義します。
RootComponents (RootComponentsCollection 型) - コントロールに追加できるルートコンポーネントのコレクションを指定します。
StartPath (string 型) - Blazor コンポーネントの読み込み完了時における Blazor ナビゲーションコンテキスト内の初期ナビゲーションのパスを定義します。

RootComponent クラスには、次のプロパティが定義されています。

Selector は string? 型であり、ドキュメント内のコンポーネントを配置する場所を指定する CSS セレクター文字列を定義します。
ComponentType は Type? 型であり、ルートコンポーネントの型を定義します。
IDictionary<string, object?>? 型の Parameters は、ルートコンポーネントに渡すパラメーターの省略可能なディクショナリを表します。

また、BlazorWebView には次のイベントが定義されています。

BlazorWebViewInitializing は、BlazorWebView が初期化される前に発生する付随 BlazorWebViewInitializingEventArgs オブジェクトを含みます。このイベントにより、BlazorWebView 構成のカスタマイズが可能になります。
BlazorWebViewInitialized は、付随する BlazorWebViewInitializedEventArgs オブジェクトと共に、BlazorWebView が初期化された後、コンポーネントがレンダリングされる前に発生します。このイベントにより、プラットフォーム固有の Web ビューインスタンスを取得できます。
UrlLoading は、関連する UrlLoadingEventArgs オブジェクトと共に、ハイパーリンクが BlazorWebView 内でクリックされたときに発生します。このイベントを使用すると、ハイパーリンクを BlazorWebView 内で開くか、外部アプリで開くか、URL の読み込み試行を取り消すかをカスタマイズできます。

.NET MAUI Blazor アプリで既存の Razor コンポーネントを使用するには、コードをアプリに移動するか、コンポーネントを含む既存のクラスライブラリまたはパッケージを参照します。詳細については、「ASP.NET Core Blazor Hybrid での Razor コンポーネントの再利用」をご覧ください。

ブラウザー開発者ツールを使用して、.NET MAUI Blazor アプリを検査できます。詳細については、「ASP.NET Core Blazor Hybrid でブラウザー開発者ツールを使用する」をご覧ください。

Note

Visual Studio は、.NET MAUI Blazor アプリの開発に必要なツールをすべてインストールしますが、Windows 版の .NET MAUI Blazor アプリのエンドユーザーは WebView2 ランタイムをインストールする必要があります。

Blazor Hybri アプリの詳細については、「ASP.NET Core Blazor Hybrid」をご覧ください。

.NET MAUI Blazor アプリを作成する

.NET MAUI Blazor アプリは、.NET MAUI Blazor アプリ テンプレートを使用して Visual Studio で作成できます。

.NET MAUI Blazor app project template screenshot.

このプロジェクトテンプレートを使用すると、Android、iOS、macOS、Windows に配置できる複数ターゲットの .NET MAUI Blazor アプリが作成されます。 .NET MAUI Blazor アプリを作成する手順については、「.NET MAUI Blazor アプリをビルドする」をご覧ください。

このプロジェクトテンプレートで作成された BlazorWebView は、MainPage.xaml に定義され、Blazor アプリのルートを指します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlazorWebViewDemo"
             x:Class="BlazorWebViewDemo.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

アプリのルート Razor コンポーネントは Main.razor にあり、Razor はこれをアプリケーションのルート名前空間の Main という名前の型にコンパイルします。残りの Razor コンポーネントは Pages および Shared プロジェクトフォルダーにあり、既定の Blazor Web テンプレートで使用されるコンポーネントと同じです。アプリの静的 Web アセットは wwwroot フォルダーにあります。

BlazorWebView を既存のアプリに追加する

既存の .NET MAUI アプリに BlazorWebView を追加するプロセスは次のとおりです。

CSPROJ プロジェクトファイルの最初の行を編集して、Microsoft.NET.Sdk.Razor という Razor SDK をプロジェクトに追加します。
```
<Project Sdk="Microsoft.NET.Sdk.Razor">
```
Razor SDK は、Blazor プロジェクト用の Razor ファイルを含んだプロジェクトのビルドとパッケージ化に必要です。
アプリのルート Razor コンポーネントをプロジェクトに追加します。
Razor コンポーネントを、Pages と Shared という名前のプロジェクトフォルダーに追加します。
静的 Web アセットを wwwroot という名前のプロジェクトフォルダーに追加します。
オプションの _Imports.razor ファイルをプロジェクトに追加します。

.NET MAUI アプリのページに BlazorWebView を追加し、Blazor アプリのルートを参照させます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyBlazorApp"
             x:Class="MyBlazorApp.MainPage">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

MauiProgram クラスの CreateMauiApp メソッドを変更して、アプリで使用できるように BlazorWebView コントロールを登録します。これを行うには、IServiceCollection オブジェクトで AddMauiBlazorWebView メソッドを呼び出して、コンポーネント Web ビューサービスをサービスコレクションに追加します。

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif
        // Register any app services on the IServiceCollection object
        // e.g. builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

ネイティブ UI からスコープ付きサービスにアクセスする

BlazorWebView には、指定した Action<ServiceProvider> を非同期に呼び出し、Razor コンポーネントで使用できるスコープ付きサービスを渡す TryDispatchAsync メソッドがあります。これを使うと、ネイティブ UI のコードから NavigationManager などのスコープ付きサービスにアクセスできます。

private async void OnMyMauiButtonClicked(object sender, EventArgs e)
{
    var wasDispatchCalled = await blazorWebView.TryDispatchAsync(sp =>
    {
        var navMan = sp.GetRequiredService<NavigationManager>();
        navMan.CallSomeNavigationApi(...);
    });

    if (!wasDispatchCalled)
    {
        // Consider what to do if it the dispatch fails - that's up to your app to decide.
    }
}

問題の診断

BlazorWebView には、Blazor Hybrid アプリの問題を診断するのに役立つ組み込みのログ記録があります。このログ記録を有効にするには、次の 2 つの手順があります。

診断情報をログに記録するために、BlazorWebView と関連コンポーネントを有効にする。
ログ出力を表示できる場所に書き込むロガーを構成します。

ログ記録に関する詳細については、「C# と .NET でのログ記録」を参照してください。

BlazorWebView のログ記録を有効にする

すべてのログ記録構成は、依存関係挿入システムのサービス登録の一部として実行できます。 Microsoft.AspNetCore.Components.WebView 名前空間の BlazorWebView と関連コンポーネントの最大ログを有効にするには、アプリのサービスが登録されている場所に次のコードを追加します。

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
});

または、Microsoft.Extensions.Logging を使用するすべてのコンポーネントの最大ログを有効にするには、次のコードを使用します。

services.AddLogging(logging =>
{
    logging.SetMinimumLevel(LogLevel.Trace);
});

ログ出力を構成し、出力を表示する

ログ情報を書き込むコンポーネントを構成した後、ロガーがログ情報を書き込む場所を構成し、次にログの出力を表示する必要があります。

デバッグ ログプロバイダーは、Debug ステートメントを使用して出力を書き込み、Visual Studio から出力を表示できます。

デバッグ ログプロバイダーを構成するには、まずプロジェクトのリファレンスを Microsoft.Extensions.Logging.Debug NuGet パッケージに追加します。次に、AddDebug 拡張メソッドを呼び出して、前の手順で追加した AddLogging の呼び出し内にプロバイダーを登録します。

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
    logging.AddDebug();
});

デバッグが有効になっている Visual Studio からアプリを実行すると、Visual Studio の [出力] ウィンドウにデバッグ出力が表示されます。