入門者向け

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

blazor-syncfusion

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

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

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

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

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

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

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

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

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

Syncfusion への登録

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

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

blazor-syncfusion

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

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

blazor-syncfusion

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

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

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

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

blazor-syncfusion

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

blazor-syncfusion

ライセンスキーの用意

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

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

blazor-syncfusion

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

Project 名は任意です。

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

blazor-syncfusion

新規プロジェクトの準備

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

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

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

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

blazor-syncfusion

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

blazor-syncfusion

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." }
    };
}

 

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

動作確認

動作確認をしてみましょう。

デバッグ実行してみると、タスクの一覧がカンバン形式で表示されたことが確認できました。

blazor-syncfusion

ちなみにカンバンは、次のような感じで左右のタスクを移動できたりもします。

blazor-syncfusion

あとはタスクをダブルクリックすると詳細が見れたりするので、いろいろと触ってみてください。

最後に

Syncfusion を導入する具体的な手順について解説しました。

無料で高品質な UI が作れるので、とてもオススメです。

公式ドキュメントとデモサイトを表にしておくので、気になる方はチェックしてみてください。

公式ドキュメント https://blazor.syncfusion.com/documentation
デモサイト https://blazor.syncfusion.com/demos/

この記事が少しでも参考になれば幸いです。

参考文献
【無料】PDF書籍「猫でもわかるBlazor入門」
blazor-beginner-book

Blazor の入門書を書きました。

この本を読むことで、挫折することなくスムーズに入門できます。

「無料」で配布しているので、もしよければお受け取りください。