ASP.NET Core Blazor Hybrid

この記事では、ASP.NET Core Blazor Hybrid について説明します。これは、ASP.NET Core アプリ内に .NET を使った対話型のクライアント側 Web UI を構築する方法です。

Blazor Hybrid を使って、デスクトップとモバイルのネイティブ クライアント フレームワークを .NET および Blazor と組み合わせます。

Blazor Hybrid アプリでは、Razor コンポーネントはデバイス上でネイティブに実行されます。 コンポーネントは、ローカルの相互運用チャネルを通して、埋め込まれた Web View コントロールにレンダリングします。 コンポーネントはブラウザーでは実行されず、WebAssembly は関与しません。 Razor コンポーネントによってコードがすばやく読み込まれて実行され、コンポーネントは .NET プラットフォームを介してデバイスのネイティブ機能に完全にアクセスできます。 Web View でレンダリングされるコンポーネント スタイルは、プラットフォームに依存するため、カスタム スタイルシートを使用してプラットフォーム間のレンダリングの相違点を考慮することが必要な場合があります。

Blazor Hybrid の記事では、ネイティブ クライアント フレームワークへの Razor コンポーネントの統合について説明されています。

.NET MAUI を使用した Blazor Hybrid アプリ

.NET Multi-platform App UI (.NET MAUI) フレームワークには、Blazor Hybrid のサポートが組み込まれています。 .NET MAUI には、埋め込まれた Web View に Razor コンポーネントをレンダリングできる BlazorWebView コントロールが含まれます。 .NET MAUI と Blazor を併用することにより、Web UI コンポーネントの 1 つのセットをモバイル、デスクトップ、Web で 再利用できます。

Blazor Hybrid アプリと WPF および Windows フォーム

Blazor Hybrid アプリは、Windows Presentation Foundation (WPF) と Windows フォームを使って構築できます。 Blazor によって、これら両方のフレームワーク (WPF BlazorWebView、Windows フォーム BlazorWebView) 用の BlazorWebView コントロールが提供されます。 Razor コンポーネントは Windows デスクトップでネイティブに動作し、埋め込まれた Web View にレンダリングします。 WPF と Windows フォームで Blazor を使うと、.NET MAUI または Web のプラットフォーム間で再利用できる既存の Windows デスクトップ アプリに新しい UI を追加できます。

Web View 構成

Blazor Hybrid では、BlazorWebView コントロールのイベントを通じて、さまざまなプラットフォーム用の基になる Web View 構成が公開されます。

• BlazorWebViewInitializing では、各プラットフォームでの Web View の作成に使用される設定にアクセスできます (設定が使用可能な場合)。
• BlazorWebViewInitialized では、Web View へのアクセスが提供され、設定をさらに構成できます。

各プラットフォームに望ましいパターンを使用して、イベントにイベント ハンドラーをアタッチし、カスタム コードを実行します。

API ドキュメント:

• .NET MAUI
  • BlazorWebViewInitializing
  • BlazorWebViewInitialized
• WPF
  • BlazorWebViewInitializing
  • BlazorWebViewInitialized
• Windows フォーム
  • BlazorWebViewInitializing
  • BlazorWebViewInitialized

Windows フォームおよび WPF アプリでの未処理の例外

このセクションは、Windows フォームおよび WPF Blazor Hybrid アプリにのみ適用されます。

System.AppDomain.CurrentDomain プロパティで UnhandledException のコールバックを作成します。 次の例では、コンパイラ ディレクティブを使用して、MessageBox を表示します。これにより、エラーの発生がユーザーに警告されたり、エラー情報が開発者に表示されたりします。 error.ExceptionObject でエラー情報をログします。

AppDomain.CurrentDomain.UnhandledException += (sender, error) =>
{
#if DEBUG
    MessageBox.Show(text: error.ExceptionObject.ToString(), caption: "Error");
#else
    MessageBox.Show(text: "An error has occurred.", caption: "Error");
#endif
    
    // Log the error information (error.ExceptionObject)
};

グローバリゼーションとローカライズ

"このセクションは .NET MAUIBlazor Hybrid アプリにのみ適用されます。"

.NET MAUI では、デバイスのアンビエント情報に基づいて CurrentCulture と CurrentUICulture を構成します。

IStringLocalizer および Microsoft.Extensions.Localization 名前空間内のその他の API は、ユーザーのカルチャに依存するグローバリゼーションの書式設定、解析、バインディングとともに、通常は期待どおりに動作します。

実行時にアプリ カルチャを動的に変更する場合は、カルチャの変更を反映するためにアプリを再読み込みする必要があります。これにより、ルート コンポーネントの再レンダリングが行われ、再レンダリングされた子コンポーネントに新しいカルチャが渡されます。

.NET のリソース システムでは、ローカライズされたイメージを (BLOB として) アプリに埋め込むことができますが、Blazor Hybrid では、現時点で、埋め込みイメージを Razor コンポーネントに表示することはできません。 ユーザーが ResourceManager を使用してイメージのバイトを Stream に読み込んだとしても、その取得したイメージを Razor コンポーネントでレンダリングすることは、現在、フレームワークでサポートされていません。

ローカライズされたイメージを取り込むためのプラットフォーム固有のアプローチは、.NET のリソース システムの機能ですが、.NET MAUIBlazor Hybrid アプリ内の Razor コンポーネントのブラウザー要素で、そのようなイメージとやりとりすることはできません。

詳細については、次のリソースを参照してください。

• Xamarin.Forms の文字列とイメージのローカライズ: このガイダンスは通常、Blazor Hybrid アプリに適用されます。 現時点では、すべてのシナリオがサポートされているわけではありません。
• Blazor HTTP エンドポイントを介してアクセスできないイメージを表示するイメージ コンポーネント (dotnet/aspnetcore #25274)

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

    if (!wasDispatchCalled)
    {
        ...
    }
}

その他の技術情報

• ASP.NET Core Blazor Hybrid チュートリアル
• .NET Multi-platform App UI (.NET MAUI)
• Windows Presentation Foundation (WPF)
• Windows フォーム