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

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

前提条件と準備手順

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

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

.NET MAUIBlazor 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 コマンドを使用して、プロジェクト テンプレートからソリューションを作成します。

dotnet new maui-blazor-web -o MauiBlazorWeb -I Server

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.cs の MauiProgram.CreateMauiAppで、ConfigureBlazorHybridRenderModesを呼び出します:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

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

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

Note

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

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

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

プロジェクト参照:

• 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) されます。これは、ConfigureBlazorHybridRenderModes が呼び出されたときに MAUI プロジェクトによって明示的にレンダリング モードのプロパティが null に設定されるためです。

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.cs の MauiProgram.CreateMauiAppで、ConfigureBlazorHybridRenderModesを呼び出します:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

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

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

Note

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

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

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

プロジェクト参照:

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

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

<Router AppAssembly="@typeof(Routes).Assembly" 
        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.Web プロジェクトの Program.cs ファイル内で次の AddAdditionalAssemblies 呼び出しによって MauiBlazorWeb.Shared.Client プロジェクト アセンブリを追加します (その _Imports ファイルを使います):

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

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

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

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

InteractiveRenderSettings.cs (.Shared.Client RCL):

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

InteractiveRenderSettings.cs (.Shared RCL):

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.cs の MauiProgram.CreateMauiAppで、ConfigureBlazorHybridRenderModesを呼び出します:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

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

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

Note

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

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

次の例では、インターフェイスを使って 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 実装を持つ次の FormFactor.cs ファイルが含まれています。

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 実装を持つ次の FormFactor.cs ファイルが含まれています。 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 Blazor Hybrid アプリで Razor コンポーネントを再利用する