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 コンポーネントの統合について説明されています。

Blazor Hybrid アプリ（.NET MAUI 付き）

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

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

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

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 MAUI ドキュメント)
• 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 フォーム