BlazorのUI開発時間を短縮するため、BootStrapのUIフレームワークのBlazor用のフレームワークであるBlazorStrapをインストールする方法を紹介します。
今回の構築時の環境
Blazorのバージョンは、Blazor WebAssembly 3.2 Preview 5を利用しました。元々は、こちらの記事に書かれている方法でVisual Studioからテンプレート プロジェクトとして作成したWebAssemblyプロジェクトを利用しています。
BlazorStrapの公式サイトでは、インストール方法が記載されていますが、古いテンプレート で生成されたプロジェクトでの設定方法が記載されており、Preview 5のテンプレート では、生成されることのないStartup.csに行を追加するといった違いがあり、Blazor WebAssemblyのバージョンによって多少異なる点に注意が必要です。
プロジェクトへの追加方法
プロジェクトにBlazorStrapをインストールするためには、次のステップになります。
- NuGetパッケージを追加する
- 実行時にJSライブラリを読み込む様にindex.htmlを変更
- プロジェクト実行時にライブラリを読み込む様に内部に処理を追加
１．NuGetパッケージを追加
まず、NuGetパッケージをプロジェクトに追加する方法には、Visual Studio上でパッケージマネージャを活用する方法と、NuGetコンソールを用いてコマンドで追加する方法があります。Visual Studioで追加する方法については、こちらの公式ドキュメント で紹介されています。今回は、NuGetコンソールを用いてコマンドで追加する方法について紹介します。
次のコマンドをターゲットとなるプロジェクトのソリューションファイルが置かれたディレクトリ 上で実行することで、プロジェクトにBlazorStrapを追加できます。
$ Install-Package blazorstrap
２．実行時にJSライブラリを読み込む様にindex.htmlを変更
次にindex.htmlにもともと含まれている次の行を削除します。これは、テンプレート で利用しているBootStrapのCSSファイルですが、BlazorStrapのCSSと競合する可能性があるので、このタイミングで削除しておきます。
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
さらに、次の行をindex.htmlに追加します。
<script src="_content/BlazorStrap/blazorStrap.js"></script>
追加する場所は<head>タグ内に追加します。
３．プロジェクト実行時にライブラリを読み込む様に内部に処理を追加
次にBlazorアプリにBlazorStrapをインポートさせます。まず、Program.csを次の様に書き換えます。変更点は2箇所で、1つはusingでBlazorStrapを読み込む記述を追加し、もう1箇所はbuilder.Services.AddBootstrapCss();によりBlazorStrapをサービスとして読み込む記述を追加したことです。
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using BlazorStrap;
namespace BlazorApp
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddBootstrapCss();
builder.RootComponents.Add<App>("app");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
}
}
次に_imports.razorファイルに次の行を追加して、RazorファイルでBlazorStrapが利用できる様にします。
@using BlazorStrap
次にShared/MainLayout.razorを次の様に記述します。変更点は、まず、2行目でBootstrapCssへの依存関係を追加します。次に、最下部に@code {}を追加し、OnInitializedAsyncと呼ばれる初期関数を上書きしてSetBootstrapCssを実行する処理を追記します。
サーバサイドで実行しようとした場合、この関数SetBootStrapCssを実行すると例外を発生させるので、例外が起こったことを記録しておきます。そして、OnAfterRenderAsync内でサーバサイドレンダリング時にもSetBootStrapCssが1回だけ実行させます。
@inherits LayoutComponentBase
@inject IBootstrapCss BootstrapCss
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
@code {
private bool isServerSide = false;
protected override async Task OnInitializedAsync()
{
try
{
await BootstrapCss.SetBootstrapCss("4.3.1");
}
catch (Exception)
{
isServerSide = true;
}
}
protected override async Task OnAfterRenderAsync(bool firstrun)
{
if (isServerSide && firstrun)
{
await BootstrapCss.SetBootstrapCss("4.3.1");
}
}
}
以上でBlazorStrapが利用可能になります。例えば、次の行をPages/index.razorに追加して、ボタンが表示されれば、うまくインストールできていることを確認できます。
<BSButton Color="Color.Primary">primary</BSButton>
今回、BlazorStrapを設定する際に次の動画が参考になりました。
参考サイト
