はじめに
AngularなどのSPAアプリケーションの作成が面倒だったが、BlazorでSPAが実装できると聞いてお試しメモ書きついでの手順化
TypeScriptやJavascriptを使わずに、C#とHTMLとCSSだけでレッツSPA!!!
最終目標は本番環境(Azure)での動作を目指して構築していきます。
--
今章ではUIコンポーネントであるSyncfusionの導入を行います。
第2章完了時のソースコード一式はこちら
https://github.com/enngawa/BlazorLerning/tree/第2章
全体目次
- 第1章 プロジェクトの作成と動作確認
- 第2章 SyncfusionBlazor(UIコンポーネント)の導入 <= この章はここ
- 第3章 画面の新規作成
- 第4章 SQLとの連動(Entity Framework経由でのCRUD)(予定)
- 以降 検討中・・・
この章でやること
- 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の導入を行っていきましょう。
ソースコードは１章の続きを利用します。
コンポーネントの導入(追加するたびに実施)
2020年のv18.4.0.30リリース以降、統合されていたSyncfusionBlazorコンポーネントは、機能ごとに個別のNuGetパッケージとして再リリースされました。 必要なコンポーネントのみインストールすることで、レンダリング時間の短縮、アプリのサイズ削減などの利点があります。 なにが言いたいかというと、統合版であるSyncfusion.Blazorパッケージはインストールしないでください。 最新の情報は以下を参照してください。 https://blazor.syncfusion.com/documentation/introduction
次の頁で使用するコンポーネントから、例として「TextBox」をインストールします。
Nugetのパッケージ管理マネージャーを起動します。
参照で「Syncfusion.Blazor.Inputs」を検索し、コンポーネントを選択、インストール対象のプロジェクトを「****(プロジェクト名).Client」に設定、インストールを実施。
インストールしたいコンポーネントを探す際は公式ドキュメントを参照してください。 https://blazor.syncfusion.com/documentation/
「****(プロジェクト名).Client」プロジェクト直下の「_Imports.razor」を開き、インストールしたパッケージを読み込むように下記を追記します。
@using Syncfusion.Blazor.Inputs
初期設定(初回のみ実施)
SyncfusionBlazorを使用するための初期設定を実施します。(パッケージが１つでもインストールされていないとエラーになります。)
「****(プロジェクト名).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のコンポーネントは以下のようなものがあります。
作成したいコンポーネントに合わせて選択して下さい。
コンポーネントの仕様はバージョンにより常に変化していきます。 最新の情報は各コンポーネントのリンク先を参照してください。
図形
次の章へ
導入したコンポーネントを実際に使用して、ページを作成します。（予定）