ASP.NET Core Razor で Blazor Hybrid コンポーネントを再利用する

この記事では、Razor アプリの Web および Web Views 用 Blazor Hybrid コンポーネントを作成および整理する方法について説明します。

Razor コンポーネントは、複数のホスティング モデル (Blazor WebAssembly、Blazor Server、および Web View の Blazor Hybrid) と複数のプラットフォーム (Android、iOS、Windows) で動作します。 各ホスティング モデルとプラットフォームには、コンポーネントで利用できる固有の機能がありますが、複数のホスティング モデルとプラットフォームで実行されるコンポーネントでは、次の例に示すように、固有の機能を個別に利用する必要があります。

• Blazor WebAssembly では、同期 JavaScript (JS) 相互運用がサポートされています。これは、JS アプリ内、および Blazor Server アプリの Web Views 内の厳密非同期 Blazor Hybrid 相互運用通信チャネルではサポートされません。
• Blazor Server アプリ内のコンポーネントは、Entity Framework データベース コンテキストなど、サーバー上でのみ使用できるサービスにアクセスできます。
• BlazorWebView 内のコンポーネントは、ネイティブ デスクトップ機能とモバイル デバイス機能 (位置情報サービスなど) に直接アクセスできます。 Blazor Server アプリと Blazor WebAssembly アプリは、同様の機能を提供するために、外部サーバー上のアプリの Web API インターフェイスに依存する必要があります。

設計原則

複数のホスティング モデルとプラットフォームでシームレスに動作できる Razor コンポーネントを作成するには、次の設計原則に従います。

• Razor クラス ライブラリ (RCL) に共有の UI コードを 配置します。RCL は、異なるホスティング モデルとプラットフォームで使用される再利用可能な UI を保持するために設計されたコンテナーです。
• 固有の機能の実装は、RCL には配置しないでください。 RCL では、ホスティング モデルとプラットフォームで実装する抽象化 (インターフェイスと基底クラス) を定義します。
• 固有の機能は、ホスティング モデルやプラットフォームごとにオプトインするようにしてください。 たとえば、Blazor WebAssembly では IJSInProcessRuntime と IJSInProcessObjectReference をコンポーネント内で最適化として使用することがサポートされていますが、これを使用するのは、すべてのホスティング モデルとプラットフォームでサポートされるユニバーサル IJSRuntime および IJSObjectReference 抽象化に依存した、条件付きキャストとフォールバックの実装を使用する場合に限定してください。 IJSInProcessRuntime の詳細については、「ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す」を参照してください。 IJSInProcessObjectReference の詳細については、「ASP.NET Core Blazor で JavaScript 関数 から .NET メソッドを呼び出す」を参照してください。
• 全般的なルールとして、コンポーネントでの HTML スタイル設定には CSS を使用します。 最も一般的な用途は、アプリの外観の一貫性を確保することです。 ホスティング モデルやプラットフォームによって UI スタイルを変える必要がある場合は、CSS を使って異なるスタイルを設定します。
• 一部の UI で、ターゲットのホスティング モデルやプラットフォームに追加のコンテンツや異なるコンテンツが必要な場合は、コンテンツをコンポーネント内でカプセル化し、DynamicComponent を使って RCL 内でレンダリングできます。 追加の UI は、RenderFragment インスタンスを介してコンポーネントに提供することもできます。 RenderFragment について詳しくは、「子コンテンツのレンダリング フラグメント」と「再利用可能なレンダリング ロジックのためのレンダリング フラグメント」を参照してください。

プロジェクト コードの編成

可能な限り、コードと静的コンテンツは Razor クラス ライブラリ (RCL) に配置してください。 各ホスティング モデルとプラットフォームは、RCL を参照し、Razor コンポーネントで必要となる可能性があるアプリのサービス コレクションに個々の実装を登録します。

各ターゲット アセンブリには、そのホスティング モデルやプラットフォームに固有のコードと、アプリのブートストラップに役立つコードのみを含めるようにしてください。

固有の機能に抽象化を使用する

次の例は、ホスティング モデルとプラットフォームごとに、位置情報サービス用の抽象化を使用する方法を示したものです。

• マップ上のユーザーの場所の位置情報データを取得するためにアプリによって使用される Razor クラス ライブラリ (RCL) では、MapComponentRazor コンポーネントによって ILocationService サービスの抽象化が挿入されます。
• App.Web および Blazor WebAssembly プロジェクト用の Blazor Server では、ILocationService が WebLocationService として実装されます。これは、Web API 呼び出しを使って位置情報データを取得するものです。
• App.Desktop、WPF、および Windows フォーム用の .NET MAUI では、ILocationService が DesktopLocationService として実装されます。 DesktopLocationService では、プラットフォーム固有のデバイス機能を使用して位置情報データが取得されます。

.NET MAUIBlazor のプラットフォーム固有コード

.NET MAUI での一般的なパターンは、プラットフォーム固有の実装を使った部分クラスを定義するなど、異なるプラットフォームごとに個別の実装を作成することです。 たとえば、次の図をご覧ください。CameraService 用の部分クラスが、CameraService.Windows.cs、CameraService.iOS.cs、CameraService.Android.cs、および CameraService.cs のそれぞれで実装されています。

プラットフォーム固有の機能を他のアプリで使用できるクラス ライブラリにパックしたい場合は、前の例で説明したのと同様の方法に従い、Razor コンポーネント用の抽象化を作成することをお勧めします。

• コンポーネントを Razor クラス ライブラリ (RCL) に配置します。
• .NET MAUI クラス ライブラリから RCL を参照し、プラットフォーム固有の実装を作成します。
• 使用元のアプリ内で、.NET MAUI クラス ライブラリを参照します。

次の例は、写真を整理するアプリでの、画像の概念を示したものです。

• .NET MAUIBlazor Hybrid アプリでは、参照先の RCL から InputPhoto を使用します。
• .NET MAUI アプリでは .NET MAUI クラス ライブラリも参照します。
• RCL 内の InputPhoto は、RCL で定義された ICameraService インターフェイスを挿入します。
• CameraService 用の ICameraService 部分クラス実装は、RCL を参照する .NET MAUI クラス ライブラリ (CameraService.Windows.cs、CameraService.iOS.cs、CameraService.Android.cs) 内にあります。

例については、「.NET MAUI を使用して Blazor HybridBlazor Web App アプリを構築する」を参照してください。

その他のリソース

• eShop 参照アプリケーション (AdventureWorks): .NET MAUIBlazor Hybrid アプリは src/HybridApp フォルダーにあります。
  • Azure ホスティングの場合: Azure-Samples/eShopOnAzure GitHub リポジトリ
  • Azure 以外の一般的なホスティングの場合: dotnet/eShop GitHub リポジトリ。