【Blazor】無料で使える「Syncfusion」を導入する手順

UI の部品を自分で実装するのは大変ですよね。

ありがたいことに、かんたんに UI まわりを実装できるように無料で使えるフレームワークが用意されています。

以前書いた【無料】Blazor 対応の「使える」UI フレームワーク５選の記事では、「Syncfusion がオススメですよ」と書きました。

本来は有料ですが、次の条件を満たせばなんと「無料」で使うことができます。

年間の収入が100万ドル以下
開発者が5人以下

100万ドルはざっくり「1億円」なので、超えることはありません。

ということは、個人開発においてはずっと無料で使えるということです。

この記事では、Syncfusion を導入する具体的な手順について解説しています。

では、早速みていきましょう。

Contents

Syncfusion への登録
ライセンスキーの用意
新規プロジェクトの準備
動作確認
最後に

Syncfusion への登録

まずは、Syncfusion のサイトにアクセスして、下の方の「CLAIM FREE LICENSE」を押しましょう。

コミュニティライセンスを取得することで、無料で使うことができるようになります。

アカウント登録には、LinkedIn か XING のアカウントが必要です。

私は LinkedIn のアカウントでサインインしました。

次に、メールアドレス、会社名、電話番号を入力します。

会社名は、個人の場合は Individual でいいと思います。

一番下のチェックは、利用規約やプライバシーポリシーに同意するのに必要です。

入力できたら、「CREATE ACCOUNT」を押しましょう。

無事にアカウント登録をすることができました。

ライセンスキーの用意

続いて、ライセンスキーを作成します。

管理画面にログインして、「Get License Key」を押します。

Platform は Blazor、Version は最新を選んでおけば問題ありません。

Project 名は任意です。

入力ができたら、「GET LICENSE KEY」を押して、ライセンスキーをコピーしておきましょう。

新規プロジェクトの準備

Visual Studio で新規プロジェクトを作成して、動作確認をしてみましょう。

まだ作成したことがない人は、【入門者向け】Blazor のはじめかた【環境構築から初回実行まで】を参照してください。

NuGet パッケージのインストール

Client 側のプロジェクトを右クリックして、「NuGet パッケージの管理」を選択します。

「Syncfusion.Blazor.Kanban」を探して追加します。

Syncfusion では、全部のコンポーネントを一括でインポートするのではなく、必要に応じて個別にインポートするようになっています。

ペンギンくん

なるほど、容量を削減するためだね。

今回は、タスク管理でよく使われるカンバンを導入してみます。

スタイルシートの読み込み

Syncfusion のスタイルシートを読み込みます。

wwwroot フォルダにある index.html に1行追加してください。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>TodoApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="TodoApp.Client.styles.css" rel="stylesheet" />
    <!--以下を追加-->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

今回は Bootstrap4を読み込みましたが、その他にもさまざまなテーマが用意されています。

Bootstrap 4
Bootstrap
Google’s Material
Microsoft Office’s Fabric
High Contrast

他のテーマを使用したい場合は、公式ドキュメントの Built-in Themes を参照してください。

Program.cs の修正

次に、クライアント側の Program.cs でライセンスキーを読み込む処理と、Syncfusion を使う処理を追加します。

Program.cs

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 Syncfusion.Blazor;

namespace TodoApp.Client
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            // 追記！！
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("XXXXXXXXXX");
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // 追記！！
            builder.Services.AddSyncfusionBlazor();
            await builder.Build().RunAsync();
        }
    }
}

Index.razor の修正

クライアント側の Pages フォルダ下にある index.razor を次のように書き換えます。

index.razor

@page "/"
@using Syncfusion.Blazor.Kanban

<h1>タスク管理</h1>

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

@code {
    public class TasksModel
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Status { get; set; }
        public string Summary { get; set; }
    }

    public List<TasksModel> Tasks = new List<TasksModel>()
    {
        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer." },
        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "Open", Summary = "Show the retrieved data from the server in grid control." },
        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "InProgress", Summary = "Improve application performance" },
        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer." },
        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Testing", Summary = "Fix the issues reported in Safari browser." },
        new TasksModel { Id = "Task 6", Title = "BLAZ-29006", Status = "Close", Summary = "Analyze SQL server 2008 connection." },
        new TasksModel { Id = "Task 7", Title = "BLAZ-29007", Status = "Close", Summary = "Analyze grid control." },
        new TasksModel { Id = "Task 8", Title = "BLAZ-29008", Status = "Close", Summary = "Stored procedure for initial data binding of the grid." }
    };
}

これでひととおり準備が完了しました。