はじめに
AngularなどのSPAアプリケーションの作成が面倒だったが、BlazorでSPAが実装できると聞いてお試しメモ書きついでの手順化
TypeScriptやJavascriptを使わずに、C#とHTMLとCSSだけでレッツSPA!!!
最終目標は本番環境(Azure)での動作を目指して構築していきます。
--
今章ではUIコンポーネントであるSyncfusionの導入を行います。
第2章完了時のソースコード一式はこちら
https://github.com/enngawa/BlazorLerning/tree/第2章
全体目次
この章でやること
- Syncfusionとは何か
- SyncfusionBlazorの導入
- 動作確認
- 【参考情報】 Syncfusionコンポーネントの種類
1. Syncfusionとは何か
https://www.syncfusion.com/
Syncfusionは2001年に米国ノースカロライナ州で設立された会社で、今回使用するコンポーネントは同社の名前を冠する代表的なライブラリです。
ビジネス向けに限らず、様々なアプリケーションにリッチなユーザーインターフェースを提供する有償のコンポーネントライブラリを提供しています。
有償でsyncfusionライブラリを提供してきた同社ですが、Microsoftが「VisualStudio Community」と呼ばれる、無償版のVisualStudioの提供を始めたことに触発され、2014年11月に同社は有償ライブラリであるsyncfusionで「コミュニティーライセンス」の提供を発表、以下の条件に当てはまる開発者は「Essential Studio EnterpriseEdition」で利用可能な製品を用いて無料で開発を行えるうえ、商用利用も可能という大規模な方針の転換を行いました。
- 年間総収入が100万米ドル(約1億円)以下であること
- 開発者が5名以下の企業または個人開発者であること
有償のライブラリであるため、完成度が非常に高く、使いやすい為におすすめのライブラリとなっています。
今回はこちらのライセンスを利用して、開発を行っていきます。
ライセンスキー取得
登録に際して、LinkedInアカウントの登録が必須です。
(XINGアカウントでもよいが、中国のコミュニティサイトなので実質LinkedInしか使用できない・・・・)
-
https://www.syncfusion.com/downloads/communitylicenseへアクセス
- 「Sign in With LinkedIn」をクリックし、アカウントを連携させる。
Companyの入力を要求された場合は「Individual」でOK
-
https://www.syncfusion.com/account/downloadsへアクセス
-
「Get License Key」をクリック
-
Platformで「ASP.NET Core」と「Blazor」を選択し、「GET LICENSE KEY」をクリック
-
表示されたライセンスキーを取得します。
2. SyncfusionBlazorの導入
では、まずSyncfusionの導入を行っていきましょう。
ソースコードは1章の続きを利用します。
コンポーネントの導入(追加するたびに実施)
次の頁で使用するコンポーネントから、例として「TextBox」をインストールします。
Nugetのパッケージ管理マネージャーを起動します。
参照で「Syncfusion.Blazor.Inputs」を検索し、コンポーネントを選択、インストール対象のプロジェクトを「****(プロジェクト名).Client」に設定、インストールを実施。
「****(プロジェクト名).Client」プロジェクト直下の「_Imports.razor」を開き、インストールしたパッケージを読み込むように下記を追記します。
@using Syncfusion.Blazor.Inputs
初期設定(初回のみ実施)
SyncfusionBlazorを使用するための初期設定を実施します。(パッケージが1つでもインストールされていないとエラーになります。)
「****(プロジェクト名).Client」プロジェクト配下の「wwwroot/index.html」を開き、Syncfusion用のスタイルシートを読み込むように下記を追記します。
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
「****(プロジェクト名).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();
}
}
}
動作テスト
「****(プロジェクト名).Client」プロジェクト配下の「Pages/Index.razor」を開き、テキストボックスのタグを追記します。
<SfTextBox Placeholder='First Name'></SfTextBox>
この時点で、一度デバッグ実行し起動することを確認してください。
無事に起動でき、テキストボックスが表示され、警告が表示されなければ導入完了です。
【参考情報】 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)
対応ファイル形式
レイアウト
ダイアログ
![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)
次の章へ
導入したコンポーネントを実際に使用して、ページを作成します。(予定)