MAUIでMasa Blazorコンポーネントライブラリを使用する

前回(クリックして読む)では、UIをWeb側(Blazor Server/Wasm)とクライアント側(Windows/macOS/Android/iOS)で共有しました。今回は、Masa Blazorコンポーネントライブラリを追加し、数ヶ月前に作成したタイムスタンプ変換ツールを組み込みます。

1. 事前知識

Masa Blazorについては、Masa Blazor公式サイトをご参照ください：

MASA Blazor

Material DesignとBlazorComponentのインタラクティブ機能に基づいた、標準的な基本コンポーネントライブラリです。レイアウト、ダイアログ標準、Loading、グローバル例外処理などの標準シナリオ向けのプリセットコンポーネントを提供します。

2. コンポーネントライブラリの追加

コンポーネントライブラリの追加は、Masa公式サイトを参考にしてください。以下は、Dotnet9バックエンドでの追加記録です：

2.1 UI共有ライブラリDotnet9.WebAppの修正

1. UI共有ライブラリDotnet9.WebAppにMasa.Blazorパッケージを追加します。本日(21日)、Masaが0.5.0-preview.3をリリースしたので、こちらを使用します：

Install-Package Masa.Blazor -Version 0.5.0-preview.3

2. Masa.Blazorコンポーネント参照のカプセル化

./MasaExtensions/MasaSetup.csファイルを追加し、以下のコードを記述します：

using Microsoft.Extensions.DependencyInjection;

namespace Dotnet9.WebApp.MasaExtensions;

public static class MasaSetup
{
    public static void AddMasaSetup(this IServiceCollection services)
    {
        if (services == null) throw new ArgumentNullException(nameof(services));

        services.AddMasaBlazor();   // この1行がキーコード
    }
}

キーとなるコードはservices.AddMasaBlazor();の1行のみです。拡張クラスを追加することで機能拡張が容易になり、他のプロジェクトでも使いやすくなります。

3. _Imports.razorにMasa.Blazor名前空間を追加

@using Masa.Blazor

以上がDotnet9.WebAppへの3つの修正です。

2.2 クロスプラットフォームプロジェクトDotnet9.MAUIの修正

1. MauiProgram.csファイルを修正し、上記でカプセル化した拡張メソッドAddMasaSetup()を追加：

using Dotnet9.WebApp.MasaExtensions;    // 第1箇所：この名前空間を追加

namespace Dotnet9.MAUI;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif
        builder.Services.AddMasaSetup();    // 第2箇所：拡張メソッドを追加してMasa Blazorを導入

        return builder.Build();
    }
}

2. Masa.Blazorリソースファイルの追加

wwwroot/index.htmlファイルを修正し、以下のスタイルを追加します(Masa.Blazor Blazor WebAssemblyで使用するリソースファイルをそのままコピー)：

<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />

<link
  href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/materialicons/materialicons.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css"
  rel="stylesheet"
/>

<script src="_content/BlazorComponent/js/blazor-component.js"></script>

2.3 Blazor WebAssemblyプロジェクトDotnet9.Wasmの修正

1. Program.csファイルを修正し、上記でカプセル化した拡張メソッドAddMasaSetup()を追加：

using Dotnet9.WebApp;
using Dotnet9.WebApp.MasaExtensions;        // 第1箇所：この名前空間を追加
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<Main>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddMasaSetup();            // 第2箇所：拡張メソッドを追加してMasa Blazorを導入
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

2. Masa.Blazorリソースファイルの追加

Dotnet9.MAUIと同様です。

2.4 Blazor ServerプロジェクトDotnet9.Serverの修正

1. Program.csファイルを修正し、上記でカプセル化した拡張メソッドAddMasaSetup()を追加：

using Dotnet9.WebApp.MasaExtensions;        // 第1箇所：この名前空間を追加

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddMasaSetup();            // 第2箇所：拡張メソッドを追加してMasa Blazorを導入

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

2. Masa.Blazorリソースファイルの追加

Pages/_Layout.cshtmlファイルを修正し、以下のスタイルを追加します(Masa.Blazor Blazor Serverで使用するリソースファイルをコピー)：

<!-- masa blazor css style -->
<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />

<!--icon file,import need to use-->
<link
href="https://cdn.masastack.com/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css"
rel="stylesheet">
<link
  href="https://cdn.masastack.com/npm/materialicons/materialicons.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css"
  rel="stylesheet"
/>

<!--js(should lay the end of file)-->
<script src="_content/BlazorComponent/js/blazor-component.js"></script>

注意：MAUI BlazorとBlazor WebAssemblyの2つのプロジェクトでは、Masa Blazorリソースファイルの追加コードは同じです。Blazor Serverはこれらと主にmaterialdesignicons.min.cssファイルが異なります：

以上でMasa.Blazorの導入説明は終了です。重要な3ステップをまとめます：

1. Masa.Blazor NuGetパッケージの追加：Install-Package Masa.Blazor；
2. Masa.Blazorコンポーネントの登録：services.AddMasaBlazor();；
3. Masa.Blazorリソースファイルの追加：Wasmはwwwroot/index.html、Blazor Serverは_Layout.cshtmlです。リソースファイルの追加箇所が異なる点に注意してください。

3. タイムスタンプ機能の追加

Blazor Serverバージョンのサイト作成時に、タイムスタンプ機能の開発について一度紹介しました(クリックして読む)。コードは非常にシンプルなので、ここでは詳細は割愛します。これ以上水増しはできませんので…。

4. まとめ

Masa.Blazorコンポーネントライブラリを追加し、タイムスタンプ機能も復元しました。次は、Masa.Blazorを使ってサイトのバックエンドを構築していきます。

• 本記事のBlazor Serverサイトプレビュー：https://server.dotnet9.com/
• 本記事のBlazor Wasmサイトプレビュー：https://wasm.dotnet9.com/
• MAUI(Android/Windows/macOS/iOS)プレビュー：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（配布ファイルは未作成のため、ソースコードから自身でビルドする必要があります）