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

[アーティクル]
11/10/2023

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

BlazorWebView は次の特性を定義します。

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

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

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

さらに、 BlazorWebView 次のイベントを定義します。

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

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

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

Note

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

Blazor ハイブリッドアプリの詳細については、「ASP.NET Core Blazor ハイブリッド」を参照してください。

.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 フォルダーと共有プロジェクトフォルダーにあり、既定の Blazor Web テンプレートで使用されるコンポーネントと同じです。アプリの静的 Web アセットは wwwroot フォルダーにあります。

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

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

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

BlazorWebView.NET MAUI アプリのページに a を追加し、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>

クラスのメソッドをCreateMauiAppMauiProgram変更して、BlazorWebViewアプリで使用するコントロールを登録します。これを行うには、オブジェクトでメソッドをIServiceCollectionAddMauiBlazorWebView呼び出して、コンポーネント 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();
    }
}

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

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

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

フィードバック

その他のリソース

その他のリソース