LoginSignup
5
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@jp_enngawa

【第2章】C# + .NET 5.0 + Blazor WebAssemblyで簡単SPA開発【Syncfusion(UIコンポーネント)の導入】

Last updated at Posted at 2021-09-30

はじめに

AngularなどのSPAアプリケーションの作成が面倒だったが、BlazorでSPAが実装できると聞いてお試しメモ書きついでの手順化
TypeScriptやJavascriptを使わずに、C#とHTMLとCSSだけでレッツSPA!!!
最終目標は本番環境(Azure)での動作を目指して構築していきます。

--

今章ではUIコンポーネントであるSyncfusionの導入を行います。
第2章完了時のソースコード一式はこちら
https://github.com/enngawa/BlazorLerning/tree/第2章

全体目次

この章でやること

  1. Syncfusionとは何か
  2. SyncfusionBlazorの導入
  3. 動作確認
  4. 【参考情報】 Syncfusionコンポーネントの種類

1. Syncfusionとは何か

https://www.syncfusion.com/
image.png
Syncfusionは2001年に米国ノースカロライナ州で設立された会社で、今回使用するコンポーネントは同社の名前を冠する代表的なライブラリです。
ビジネス向けに限らず、様々なアプリケーションにリッチなユーザーインターフェースを提供する有償のコンポーネントライブラリを提供しています。
image.png

有償でsyncfusionライブラリを提供してきた同社ですが、Microsoftが「VisualStudio Community」と呼ばれる、無償版のVisualStudioの提供を始めたことに触発され、2014年11月に同社は有償ライブラリであるsyncfusionで「コミュニティーライセンス」の提供を発表、以下の条件に当てはまる開発者は「Essential Studio EnterpriseEdition」で利用可能な製品を用いて無料で開発を行えるうえ、商用利用も可能という大規模な方針の転換を行いました。

  • 年間総収入が100万米ドル(約1億円)以下であること
  • 開発者が5名以下の企業または個人開発者であること

有償のライブラリであるため、完成度が非常に高く、使いやすい為におすすめのライブラリとなっています。
今回はこちらのライセンスを利用して、開発を行っていきます。

ライセンスキー取得

登録に際して、LinkedInアカウントの登録が必須です。
(XINGアカウントでもよいが、中国のコミュニティサイトなので実質LinkedInしか使用できない・・・・)

  1. https://www.syncfusion.com/downloads/communitylicenseへアクセス
  2. 「Sign in With LinkedIn」をクリックし、アカウントを連携させる。
    image.png

Companyの入力を要求された場合は「Individual」でOK

  1. https://www.syncfusion.com/account/downloadsへアクセス

  2. 「Get License Key」をクリック
    image.png

  3. Platformで「ASP.NET Core」と「Blazor」を選択し、「GET LICENSE KEY」をクリック
    image.png

  4. 表示されたライセンスキーを取得します。
    image.png

2. SyncfusionBlazorの導入

では、まずSyncfusionの導入を行っていきましょう。
ソースコードは１章の続きを利用します。

コンポーネントの導入(追加するたびに実施)

2020年のv18.4.0.30リリース以降、統合されていたSyncfusionBlazorコンポーネントは、機能ごとに個別のNuGetパッケージとして再リリースされました。
必要なコンポーネントのみインストールすることで、レンダリング時間の短縮、アプリのサイズ削減などの利点があります。
なにが言いたいかというと、統合版であるSyncfusion.Blazorパッケージはインストールしないでください。

最新の情報は以下を参照してください。
https://blazor.syncfusion.com/documentation/introduction

次の頁で使用するコンポーネントから、例として「TextBox」をインストールします。
Nugetのパッケージ管理マネージャーを起動します。
image.png

参照で「Syncfusion.Blazor.Inputs」を検索し、コンポーネントを選択、インストール対象のプロジェクトを「****(プロジェクト名).Client」に設定、インストールを実施。
image.png

インストールしたいコンポーネントを探す際は公式ドキュメントを参照してください。
https://blazor.syncfusion.com/documentation/

「****(プロジェクト名).Client」プロジェクト直下の「_Imports.razor」を開き、インストールしたパッケージを読み込むように下記を追記します。

@using Syncfusion.Blazor.Inputs

image.png

初期設定(初回のみ実施)

SyncfusionBlazorを使用するための初期設定を実施します。(パッケージが１つでもインストールされていないとエラーになります。)
「****(プロジェクト名).Client」プロジェクト配下の「wwwroot/index.html」を開き、Syncfusion用のスタイルシートを読み込むように下記を追記します。

 <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />

image.png

「****(プロジェクト名).Client」プロジェクト直下の「Program.cs」を開き、Syncfusion用のライセンスキーの読み込みとサービスを追加します。
ライセンスキーは前の頁で取得した文字列を設定してください。

....
....
using Syncfusion.Blazor; //<= 追加
namespace BlazorLerning.Client
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("ライセンスキー");//<=追加
            ....
            ....
            builder.Services.AddSyncfusionBlazor(); //<= 追加
            await builder.Build().RunAsync();
        }
    }
}

image.png

動作テスト

「****(プロジェクト名).Client」プロジェクト配下の「Pages/Index.razor」を開き、テキストボックスのタグを追記します。

<SfTextBox Placeholder='First Name'></SfTextBox>

image.png

この時点で、一度デバッグ実行し起動することを確認してください。
無事に起動でき、テキストボックスが表示され、警告が表示されなければ導入完了です。
image.png

【参考情報】 Syncfusionコンポーネントの種類

Syncfusionのコンポーネントは以下のようなものがあります。
作成したいコンポーネントに合わせて選択して下さい。

コンポーネントの仕様はバージョンにより常に変化していきます。
最新の情報は各コンポーネントのリンク先を参照してください。

グリッド
データグリッド ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/c3670c98-4761-cb36-df1c-88a0c9aefbe9.png)
ピボットテーブル ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/91bc9545-6aa2-ef49-21a1-f34077af3a0c.png)
ツリーグリッド ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1800f629-9f8f-f28b-888a-595b1cd0ea35.png)
ファイルビューアとエディタ
リッチテキストエディタ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/cce4bd14-661c-0100-2d79-a98f6dea79e7.png)
対応ファイル形式
PDF
レイアウト
ダイアログ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f64d36e8-cbfd-6823-83ab-54fb554ae74d.png)
リストビュー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/75eece73-3413-56a9-847e-a3e4c4c0ccaf.png)
ツールチップ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/15f336e9-c59a-86f8-4855-9fe2d92e8984.png)
スプリッター ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/68b17298-5e62-9f2e-a396-1aa50eb4af5e.png)
ダッシュボード ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1a290381-81e0-2512-d120-0ceecdcc17ab.png)
カード ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8bb23a19-44f6-2246-5b67-261262679717.png)
アバター ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/5b137b02-18cb-0e3f-1b45-40b9b0ca10ff.png)
図形
グラフ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/0e78d13a-1199-ca96-bc7a-608913421e05.png)
株価チャート ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/49880354-cb6e-8175-b6a8-cf2d8ec32d02.png)
円形メータ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/dec5a9ac-396b-80c0-2555-ee2d7f096fe0.png)
直線メータ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/6679670b-5217-bd6c-c797-5c0c1fdeef7d.png)
ダイアグラム ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/d6955458-fd33-9cf4-d7d7-9ff36ea2380b.png)
ヒートマップ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/de637164-3f54-0907-f54c-df20af7cd8b1.png)
世界地図 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1830a402-f5ee-682b-f939-2f052119def4.png)
レンジセレクター ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8b538203-7f9d-a9bd-a97f-ba890dec4deb.png)
スミスチャート ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/74df7241-8641-2383-2d7a-d59fe3ac0aab.png)
スパークラインチャート ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/95c4e672-d6d3-27b9-5364-25b217ec2da1.png)
バーコード ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f65975f8-7f5f-1ab5-c62a-d4189bcb2e65.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e1b1a844-fc24-9312-81cc-7dc1d26bd5f5.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1c8ea046-fe10-a1fd-ff91-0f944beaf381.png)
ツリーマップ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e8ee7296-20bf-a65e-b29a-47fe57a7465c.png)
バレットグラフ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/99ccc2c4-051e-a580-6774-a9bd2bdf9134.png)
かんばん(ボード) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/7185b9cf-55ca-0195-7885-2cdfed17c2fa.png)
ボタン
ボタン ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/603c2075-bfd3-7201-a5e3-a60b0a173a23.png)
グループボタン ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e53bb70e-089e-e7a1-5d7a-f0577e0e69cf.png)
ドロップダウンメニュー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/56030238-96e0-b153-0382-9ba1960a2619.png)
進捗表示付きボタン ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/6be0d820-4f21-0339-0469-6ce897140961.png)
ドロップダウン型ボタン ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/34b371e0-7acb-de63-93a4-a1e9612f297f.png)
チップ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/214d7399-8710-1300-64c3-8a1c851366fc.png)
カレンダー
スケジューラー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8f7faffd-3332-b193-01ae-b6ef427f5761.png)
ガントチャート ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/993e1eb8-a4e4-dcbc-56fe-7b8e944d42b5.png)
カレンダー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/5661ff8f-510e-480f-361e-2b70cbda981b.png)
日付選択 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/24edc44b-ad81-bf42-db44-bc21410b75d2.png)
日付範囲選択 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/132fac53-3919-eebb-ae2f-ba4b5bb0fd05.png)
日時選択 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8d8599e6-2020-934b-0f56-98d605231a5b.png)
時刻選択 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/3fc32ad9-2e00-d869-948c-831f1f7a5a56.png)
入力
テキストボックス ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/567dfafb-e686-5c5a-b2d4-6084ade2e528.png)
入力マスク ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/54617863-f923-6e8c-b358-77561fdc67f2.png)
数値テキストボックス ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/1bc79315-de3e-f0cf-88de-b4af521a6a49.png)
ラジオボタン ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/32fcad5c-f254-8d35-87f6-64cd8ed5a362.png)
チェックボックス ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/bd21724b-5130-e33d-5e42-731770cf8c57.png)
カラーピッカー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/902acb72-45ee-6016-4f60-47fa0932ba68.png)
ファイルアップロード ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/393fce28-0415-a77e-6057-663d598c9d93.png)
レンジスライダー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8adcc7a7-c9d3-a691-c9dd-57b99fb332b5.png)
トグルスイッチ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/67626883-c97f-1683-ee4c-2b25fe3fbf15.png)
フォーム
直接編集 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/09744170-2c86-3876-c76f-3f7b3e72a68f.png)
クエリビルダー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8417fbb1-54d4-b8d5-2095-f0b40ed7eab0.png)
ドロップダウン
オートコンプリート ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/b3787fdb-9f27-b918-d1e7-9aeff3b1b7e2.png)
リストボックス ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f13eafb0-bbae-6181-9e9d-e6904cd1e166.png)
コンボボックス ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/d793f427-71a4-6100-cf2d-59e85ea98b25.png)
ドロップダウンリスト ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/4642e20c-3a49-1f23-982c-39634b61655b.png)
ドロップダウンリスト(複数選択) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/8fa92e5d-835b-0df3-9905-39a7d91786b1.png)
ナビゲーション
アコーディオン ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/db1e8e6c-1611-2e06-f33d-e229996f5dc6.png)
コンテキストメニュー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f7ca2777-3866-8234-744e-878574a8514b.png)
メニューバー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/3776141e-d328-4869-d5ad-9a57e7d45da3.png)
サイドバー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/420f9819-1bd3-a06d-5e3f-b9b36edbea4d.png)
タブ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/19866cea-7a51-b5e9-3a0b-f25e70de52e6.png)
ツールバー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e37550ed-8776-93f9-586f-a9298d3985f8.png)
ツリー表示 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/f0625a10-852f-60d9-c358-b352a77ca785.png)
ファイルマネージャー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/58d8bed0-f205-1761-8301-41ca0eca3e33.png)
通知
トースト ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/33f65086-ca73-b427-de36-52f3b0a13b15.png)
プログレスバー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/31a4a5e8-76e9-8be0-d443-071eaccc7506.png)
スピナー ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/4f0452fb-1ec8-969b-e3f8-05d1197ea96a.png)
バッジ ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423799/e5ae375a-d1e6-7952-7d8a-fe85a7387d29.png)

次の章へ

導入したコンポーネントを実際に使用して、ページを作成します。（予定）

5
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?