.NET MAUIを使用して Blazor HybridBlazor Web App アプリをビルドする

この記事では、.NET MAUI クラス ライブラリ (RCL) を介して共有ユーザー インターフェイスを使う、Blazor Hybrid による Blazor Web AppRazor アプリの構築方法を説明します。

前提条件と準備手順

前提条件と準備手順については、「.NET MAUIBlazor Hybrid アプリを構築する」をご覧ください。 この記事で示すガイダンスに従う前に、.NET MAUIBlazor Hybrid チュートリアルに従って .NET MAUI 開発用にローカル システムを設定することをお勧めします。

.NET MAUI Blazor Hybrid および Web アプリ ソリューション テンプレート

.NET MAUI Blazor Hybrid および Web アプリ ソリューション テンプレートは、UI を再利用する Android、iOS、Mac、Windows、Web を対象とするソリューションを設定します。 Web アプリに対して Blazor 対話型レンダリング モードを選択すると、Blazor Web App や .NET MAUIBlazor Hybrid アプリなどの、アプリに適したプロジェクトを作成できます。 共有 Razor クラス ライブラリ (RCL) は、アプリの UI の Razor コンポーネントを保持します。 このテンプレートには、依存性の注入を使用して、Blazor Hybrid と Blazor Web App のさまざまなインターフェイス実装を指定する方法を示すサンプル コードも用意されています。これは、この記事の「インターフェイスを使用してさまざまなデバイス実装をサポートする」セクションで説明します。

.NET MAUI ワークロードをまだインストールしていない場合は、今すぐインストールします。 .NET MAUI ワークロードには、次のプロジェクト テンプレートが用意されています。

dotnet workload install maui

次の .NET CLI コマンドを使用してプロジェクト テンプレートからソリューションを作成します。{INTERACTIVITY} プレースホルダーを、使用したいレンダリング モード Blazor に置き換えてください。

• Server: Interactive Server レンダリング モードを採用し、単一プロジェクトの Blazor アプリを生成します。
• WebAssembly: 対話型 WebAssembly レンダリング モードを採用し、サーバー プロジェクトとBlazor プロジェクトの 2 つの.Client プロジェクトを生成します。
• Auto: 対話型自動レンダリング モードを採用し、サーバー プロジェクトとBlazor プロジェクトの 2 つの.Client プロジェクトを生成します。

上記のレンダリング モードと生成されるプロジェクトの詳細については、ASP.NET Core Blazor レンダー モードと、この記事の後半の「Blazor レンダリング モードの使用」セクションを参照してください。

dotnet new maui-blazor-web -o MauiBlazorWeb -I {INTERACTIVITY}

上記のコマンドでは次のことが行われます。

• -o|--output オプションによって MauiBlazorWeb という名前のアプリ用の新しいフォルダーが作成されます。
• -I|--InteractivityPlatform オプションは、対話機能のレンダリング モードを設定します。 {INTERACTIVITY} プレースホルダーは、対話型のBlazor レンダリング モードです。 3 つの対話型 Blazor レンダリング モード (Server、WebAssembly、および Auto) はすべて、プロジェクト テンプレートでサポートされています。 詳細については、「コア Blazor レンダリング モードの ASP.NET」および「Blazor レンダリング モードの使用」セクションを参照してください。

上記のコマンドでは、グローバル対話機能を採用する Blazor アプリが生成されます。これは、MAUI アプリが常に対話形式で実行され、レンダリング モードを明示的に指定すると Razor コンポーネント ページでエラーがスローされるため重要です。 詳しくは、「BlazorWebView では ResolveComponentForRenderMode のオーバーライドを有効にする方法が必要 (dotnet/aspnetcore #51235)」をご覧ください。

Blazor レンダリング モードを使う

Blazor 内の指定された対話機能の場所に対して Blazor Web Appを適用するために、お客様のアプリの仕様に一致する次のいずれかのサブセクションで示すガイダンスに従います。ただし、MAUI プロジェクトでのレンダリング モード割り当ては無視します。

レンダリング モード仕様のサブセクション:

• グローバルなサーバー対話機能
• グローバルな自動または WebAssembly 対話機能
• ページ/コンポーネントごとのサーバー対話機能
• ページ/コンポーネントごとの自動対話機能
• ページ/コンポーネントごとの WebAssembly 対話機能

グローバルなサーバー対話機能

• 対話型レンダリング モード:サーバー
• 対話機能の場所: グローバル
• ソリューション プロジェクト
  • マウイ島 (MauiBlazorWeb)
  • Blazor Web App (MauiBlazorWeb.Web)
  • RCL (MauiBlazorWeb.Shared): 各コンポーネントでレンダリング モードを設定しない、共有 Razor コンポーネントを含みます。

プロジェクト参照: MauiBlazorWeb と MauiBlazorWeb.Web には MauiBlazorWeb.Sharedへのプロジェクト参照があります。

グローバルな自動または WebAssembly 対話機能

• 対話型レンダリング モード: 自動または WebAssembly
• 対話機能の場所: グローバル
• ソリューション プロジェクト
  • マウイ島 (MauiBlazorWeb)
  • Blazor Web App
    • サーバー プロジェクト: MauiBlazorWeb.Web
    • クライアント プロジェクト: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): 各コンポーネントでレンダリング モードを設定しない、共有 Razor コンポーネントを含みます。

プロジェクト参照:

• MauiBlazorWeb、MauiBlazorWeb.Web、MauiBlazorWeb.Web.Client プロジェクトには、MauiBlazorWeb.Sharedへのプロジェクト参照があります。
• MauiBlazorWeb.Web には、MauiBlazorWeb.Web.Client へのプロジェクト参照があります。

ページ/コンポーネントごとのサーバー対話機能

• 対話型レンダリング モード:サーバー
• 対話機能の場所: ページ/コンポーネントごと
• ソリューション プロジェクト
  • MAUI (MauiBlazorWeb): InteractiveRenderSettings.ConfigureBlazorHybridRenderModes で MauiProgram.cs を呼び出します。
  • Blazor Web App (MauiBlazorWeb.Web): @rendermode コンポーネント (HeadOutlet) の Routes コンポーネントおよび App コンポーネントに Components/App.razor ディレクティブ属性を設定しません。
  • RCL (MauiBlazorWeb.Shared): 各コンポーネントで Razor レンダリング モードを設定する、共有 InteractiveServer コンポーネントを含みます。

MauiBlazorWeb と MauiBlazorWeb.Web には MauiBlazorWeb.Shared へのプロジェクト参照があります。

次の InteractiveRenderSettings クラスをこの RCL に追加します。 このクラスのプロパティは、コンポーネントのレンダリング モードを設定するために使われます。

MAUI プロジェクトは既定では対話形式であるため、MAUI プロジェクト内のプロジェクト レベルでは、InteractiveRenderSettings.ConfigureBlazorHybridRenderModes を呼び出す以外のアクションは実行されません。

Web クライアント上の Blazor Web App の場合、それらのプロパティ値は RenderMode から割り当てられます。 MAUI プロジェクトのネイティブ クライアントの場合にコンポーネントが BlazorWebView に読み込まれると、レンダリング モードは割り当て解除 (null) されます。これは、null が呼び出されたときに MAUI プロジェクトによって明示的にレンダリング モードのプロパティが ConfigureBlazorHybridRenderModes に設定されるためです。

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } =
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } =
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

MauiProgram.CreateMauiApp の MauiProgram.csで、ConfigureBlazorHybridRenderModesを呼び出します:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor RCL の.Shared ファイルで、@usingのMicrosoft.AspNetCore.Components.Web.RenderMode ステートメントを、@using クラスのプロパティをコンポーネントで使用できるようにするためのInteractiveRenderSettingsのInteractiveRenderSettings ステートメントに置き換えます。

- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings

Note

この RCL の InteractiveRenderSettings クラス プロパティによるレンダリング モードの割り当ては、一般的なスタンドアロン Blazor Web App とは異なります。 Blazor Web Appでは、レンダリング モードは通常、RenderModeのBlazor Web App ファイル内の_Importによって提供されます。

ページ/コンポーネントごとの自動対話機能

• 対話型レンダリング モード: 自動
• 対話機能の場所: ページ/コンポーネントごと
• ソリューション プロジェクト
  • MAUI (MauiBlazorWeb): InteractiveRenderSettings.ConfigureBlazorHybridRenderModes で MauiProgram.cs を呼び出します。
  • Blazor Web App
    • サーバー プロジェクト: MauiBlazorWeb.Web: @rendermode コンポーネント (HeadOutlet) の Routes および App コンポーネントに Components/App.razor ディレクティブ属性を設定しません。
    • クライアント プロジェクト: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): 各コンポーネントで Razor レンダリング モードを設定する、共有 InteractiveAuto コンポーネントを含みます。

プロジェクト参照:

• MauiBlazorWeb、MauiBlazorWeb.Web、MauiBlazorWeb.Web.Client には、MauiBlazorWeb.Shared へのプロジェクト参照があります。
• MauiBlazorWeb.Web には、MauiBlazorWeb.Web.Client へのプロジェクト参照があります。

この RCL に追加される、次の InteractiveRenderSettings クラスを追加します。 このクラスのプロパティは、コンポーネントのレンダリング モードを設定するために使われます。

MAUI プロジェクトは既定では対話形式であるため、MAUI プロジェクト内のプロジェクト レベルでは、InteractiveRenderSettings.ConfigureBlazorHybridRenderModes を呼び出す以外のアクションは実行されません。

Web クライアント上の Blazor Web App の場合、それらのプロパティ値は RenderMode から割り当てられます。 MAUI プロジェクトのネイティブ クライアントの場合にコンポーネントが BlazorWebView に読み込まれると、レンダリング モードは割り当て解除 (null) されます。これは、null が呼び出されたときに MAUI プロジェクトによって明示的にレンダリング モードのプロパティが ConfigureBlazorHybridRenderModes に設定されるためです。

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } =
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } =
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

MauiProgram.CreateMauiApp の MauiProgram.csで、ConfigureBlazorHybridRenderModesを呼び出します:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor RCL の.Shared.Client ファイルで、@usingのMicrosoft.AspNetCore.Components.Web.RenderMode ステートメントを、@using クラスのプロパティをコンポーネントで使用できるようにするためのInteractiveRenderSettingsのInteractiveRenderSettings ステートメントに置き換えます。

- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings

Note

この RCL の InteractiveRenderSettings クラス プロパティによるレンダリング モードの割り当ては、一般的なスタンドアロン Blazor Web App とは異なります。 Blazor Web Appでは、レンダリング モードは通常、RenderModeのBlazor Web App ファイル内の_Importによって提供されます。

ページ/コンポーネントごとの WebAssembly 対話機能

• 対話型レンダリング モード: WebAssembly
• 対話機能の場所: ページ/コンポーネントごと
• ソリューション プロジェクト
  • マウイ島 (MauiBlazorWeb)
  • Blazor Web App
    • サーバー プロジェクト: MauiBlazorWeb.Web: @rendermode コンポーネント (HeadOutlet) の Routes および App コンポーネントに Components/App.razor ディレクティブ属性を設定しません。
    • クライアント プロジェクト: MauiBlazorWeb.Web.Client
  • RCL
    • MauiBlazorWeb.Shared
    • MauiBlazorWeb.Shared.Client: 各コンポーネントで Razor レンダリング モードを設定する、共有 InteractiveWebAssembly コンポーネントを含みます。 .Shared.Client RCL は、.Shared RCL とは別に保持されます。これは、アプリで、WebAssembly で実行する必要があるコンポーネントを、サーバーで実行しサーバーに留まるコンポーネントとは別に保持する必要があるためです。

プロジェクト参照:

• MauiBlazorWeb と MauiBlazorWeb.Web には MauiBlazorWeb.Shared へのプロジェクト参照があります。
• MauiBlazorWeb.Web には、MauiBlazorWeb.Web.Client へのプロジェクト参照があります。
• MauiBlazorWeb.Web.Client と MauiBlazorWeb.Shared には MauiBlazorWeb.Shared.Client へのプロジェクト参照があります。

AdditionalAssemblies プロジェクトの Router ファイル内で、MauiBlazorWeb.Shared.Client プロジェクト アセンブリに関して _Imports コンポーネント インスタンスに次の MauiBlazorWeb.Shared パラメーターを追加します (その Routes.razor ファイルを使います):

<Router AppAssembly="@typeof(Routes).Assembly" NotFoundPage="typeof(Pages.NotFound)" 
        AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

MauiBlazorWeb.Shared.Client プロジェクトの _Imports ファイル内で次の AddAdditionalAssemblies 呼び出しによって MauiBlazorWeb.Web プロジェクト アセンブリを追加します (その Program.cs ファイルを使います):

app.MapRazorComponents<App>()    
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly); 

InteractiveRenderSettings RCL に追加される、次の .Shared.Client クラスを追加します。 このクラスのプロパティは、サーバーベースのコンポーネントについてコンポーネントのレンダリング モードを設定するために使われます。

MAUI プロジェクトは既定では対話形式であるため、MAUI プロジェクト内のプロジェクト レベルでは、InteractiveRenderSettings.ConfigureBlazorHybridRenderModes を呼び出す以外のアクションは実行されません。

Web クライアント上の Blazor Web App の場合、それらのプロパティ値は RenderMode から割り当てられます。 MAUI プロジェクトのネイティブ クライアントの場合にコンポーネントが BlazorWebView に読み込まれると、レンダリング モードは割り当て解除 (null) されます。これは、null が呼び出されたときに MAUI プロジェクトによって明示的にレンダリング モードのプロパティが ConfigureBlazorHybridRenderModes に設定されるためです。

InteractiveRenderSettings.cs (RCL .Shared.Client ):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } =
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } =
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } =
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

InteractiveRenderSettings クラスの少し異なるバージョンが .Shared RCL に追加されます。 .Shared RCL に追加されたクラスでは、InteractiveRenderSettings.ConfigureBlazorHybridRenderModes RCL の .Shared.Client が呼び出されます。 これにより、MAUI クライアントでレンダリングされる WebAssembly コンポーネントのレンダリング モードが必ず割り当て解除 (null) されます。これは、それらがネイティブ クライアントで既定では対話形式であるためです。

InteractiveRenderSettings.cs (RCL .Shared ):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared
{
    public static class InteractiveRenderSettings
    {
        public static IComponentRenderMode? InteractiveServer { get; set; } = 
            RenderMode.InteractiveServer;
        public static IComponentRenderMode? InteractiveAuto { get; set; } = 
            RenderMode.InteractiveAuto;
        public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
            RenderMode.InteractiveWebAssembly;

        public static void ConfigureBlazorHybridRenderModes()
        {
            InteractiveServer = null;
            InteractiveAuto = null;
            InteractiveWebAssembly = null;
            MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
                .ConfigureBlazorHybridRenderModes();
        }
    }
}

MauiProgram.CreateMauiApp の MauiProgram.csで、ConfigureBlazorHybridRenderModesを呼び出します:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

_Imports.razor RCL の.Shared.Client ファイルで、@usingのMicrosoft.AspNetCore.Components.Web.RenderMode ステートメントを、@using クラスのプロパティをコンポーネントで使用できるようにするためのInteractiveRenderSettingsのInteractiveRenderSettings ステートメントに置き換えます。

- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings

Note

この RCL の InteractiveRenderSettings クラス プロパティによるレンダリング モードの割り当ては、一般的なスタンドアロン Blazor Web App とは異なります。 Blazor Web Appでは、レンダリング モードは通常、RenderModeのBlazor Web App ファイル内の_Importによって提供されます。

インターフェイスを使ってさまざまなデバイス実装をサポートする

次の例では、インターフェイスを使って Web アプリとネイティブ (MAUI) アプリにわたりさまざまな実装を呼び出す方法を示します。 次の例では、デバイスのフォーム ファクターを表示するコンポーネントを作成します。 ネイティブ アプリには MAUI 抽象化レイヤーを使い、Web アプリには実装を提供します。

Razor クラス ライブラリ (RCL) では、Services フォルダーにIFormFactor インターフェイスが含まれています。

Services/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Services
{
    public interface IFormFactor
    {
        public string GetFormFactor();
        public string GetPlatform();
    }
}

RCL の Home コンポーネント (Components/Pages/Home.razor) には、フォーム ファクターとプラットフォームが表示されます。

Components/Pages/Home.razor:

@page "/"
@using MauiBlazorWeb.Shared.Services
@inject IFormFactor FormFactor

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app running on <em>@factor</em> using <em>@platform</em>.

@code {
    private string factor => FormFactor.GetFormFactor();
    private string platform => FormFactor.GetPlatform();
}

Web アプリとネイティブ アプリに、IFormFactor の実装が含まれます。

Blazor Web App で、Services という名前のフォルダーに、Web アプリが使用するための FormFactor.cs 実装を持つ次の FormFactor ファイルが含まれています。

Services/FormFactor.cs (MauiBlazorWeb.Web プロジェクト):

using MauiBlazorWeb.Shared.Services;

namespace MauiBlazorWeb.Web.Services
{
    public class FormFactor : IFormFactor
    {
        public string GetFormFactor()
        {
            return "Web";
        }

        public string GetPlatform()
        {
            return Environment.OSVersion.ToString();
        }
    }
}

MAUI プロジェクトの Services という名前のフォルダーに、ネイティブで使用するための FormFactor.cs 実装を持つ次の FormFactor ファイルが含まれています。 MAUI 抽象化レイヤーは、すべてのネイティブ デバイス プラットフォームで動作するコードを記述するために使われます。

Services/FormFactor.cs (MauiBlazorWeb プロジェクト):

using MauiBlazorWeb.Shared.Services;

namespace MauiBlazorWeb.Services
{
    public class FormFactor : IFormFactor
    {
        public string GetFormFactor()
        {
            return DeviceInfo.Idiom.ToString();
        }

        public string GetPlatform()
        {
            return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
        }
    }
}

これらのサービスの実装の取得には、依存性の注入が使われます。

MAUI プロジェクトの MauiProgram.cs ファイルには、ファイルの先頭に次の using ステートメントがあります。

using MauiBlazorWeb.Services;
using MauiBlazorWeb.Shared.Interfaces;

builder.Build() の呼び出しの直前に、FormFactor が登録されて、RCL で使われるデバイス固有サービスが追加されます:

builder.Services.AddSingleton<IFormFactor, FormFactor>();

Blazor Web App で、Program ファイルには、ファイルの先頭に次の using ステートメントがあります。

using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;  

builder.Build() の呼び出しの直前に、FormFactor が登録されて、Blazor Web App で使われるデバイス固有サービスが追加されます。

builder.Services.AddScoped<IFormFactor, FormFactor>();

また、このソリューションで .Web.Client プロジェクトを介して WebAssembly をターゲットにする場合は、 .Web.Client プロジェクトでも上記の API の実装が必要です。

RCL でコンパイラのプリプロセッサ ディレクティブを使って、このアプリが実行されるデバイスに応じて、異なる UI を実装することもできます。 このシナリオでは、アプリで、MAUI アプリと同様に、RCL を複数ターゲットにする必要があります。 例については、BethMassi/BethTimeUntil GitHub リポジトリを参照してください。

その他のリソース

• ASP.NET Core Blazor Hybrid の認証と認可
• ASP.NET Core Blazor のレンダー モード
• ASP.NET Core Razor アプリで Blazor Hybrid コンポーネントを再利用する