インストールから最初のアプリケーションの実行まで - Ignite UI for Blazor で始めるSPA開発 - ① #C#

本記事は、インフラジスティックスが2020年10月に新たにリリースした Blazor アプリケーション対応のコンポーネントライブラリーである Ignite UI for Blazor の各種コンポーネントの実装を通してモダンWEBアプリケーションの開発に触れてみようという趣旨で作成しております。

Blazor 及び Ignite UI for Blazor については、以下のブログ記事も有用ですので是非ご参照ください。

https://blogs.jp.infragistics.com/entry/2020/10/12/133447
https://blogs.jp.infragistics.com/entry/igniteui-blazor-release

本記事では、新たに Blazor のプロジェクトを作成し、Ignite UI for Blazor をインストールした上で、Blazor にデフォルトで用意されているサンプルページを表示するまでを順を追って説明いたします。
（Visual Studio 2019 を使用しております。）

新しい Blazor プロジェクトを作成する

まずは Visual Studio で Blazor プロジェクトを新規作成していきます。
Visual Studio を立ち上げて「新しいプロジェクトの作成」をクリックします。

プロジェクトテンプレートの選択画面に移動したら、「Blazor アプリ」を探して選択状態にし、「次へ」ボタンをクリックします。

プロジェクト名を設定し、「作成」ボタンをクリックします。

以下のようにホスティングモデルを選択する画面が表示されます。
この選択肢は簡単にいうと、アプリの実行をサーバー側で行うか、クライアント側で行うかという違いがあります。
今回はクライアント側で処理を行う「Blazor WebAssembly App」を選択し、「作成」ボタンをクリックしたら、新規プロジェクト作成は完了です。

Blazor のホスティングモデルの詳細は以下をご参照ください。

ASP.NET Core Blazor のホスティングモデル

Ignite UI for Blazor をインストールする

Visual Studio でインフラジスティックス NuGet フィードを追加する

※トライアル版でご利用される場合はこのセクションは飛ばして、次の「ソリューションに Ignite UI for Blazor を追加する」セクションの「トライアル版でのご利用の場合」をご参照ください。

NuGet パッケージマネージャーを介して Ignite UI for Blazor をインストールするためにインフラジスティックス NuGet フィードを追加します。

Visual Studio のメニューバーから順に「ツール」、「NuGet パッケージマネージャー」、「パッケージマネージャー設定」と選択し、パッケージマネージャー設定パネルを開きます。

左側のツリーメニューの「パッケージソース」をクリックし、パネル上部のアイコン群の中のプラスアイコンをクリックします。その後、パネル下部の名前およびソースフィールドに以下のように入力して「OK」ボタンをクリックします。

名前：Infragistics

ソース：https://packages.infragistics.com/nuget/licensed

初めてこの作業を行う場合、インフラジスティックスのアカウント認証を求められますので、以下のページにログインする際に使用するメールアドレスとパスワードで認証します。

ソリューションに Ignite UI for Blazor を追加する

Visual Studio のソリューションエクスプローラーで、ソリューションを右クリックしてコンテキストメニューを表示し、「ソリューションの NuGet パッケージの管理」をクリックします。

「参照」タブをクリックし、右側のパッケージソースを選択するセレクトボックスでは先ほど追加した「Infragistics」を選びます。IgniteUI.Blazorを探してクリックし、インストールします。

トライアル版でのご利用の場合

トライアル版でご利用になられる場合は、右側のパッケージソースを選択するセレクトボックスでは「nuget.org」を選択し、「プレリリースを含める」のチェックボックスにチェックを入れていただくとトライアル版の Ignite UI for Blazor を見つけることができます。（将来的にはプレリリース版ではなく、通常のリリース版として提供となりますのでその際はチェックは不要となります。）

各種ファイルへの追記

wwwroot/index.html に Ignite UI for Blazor の app.bundle.js を以下のように追記します。

<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>

Program.cs の Main メソッドで AddIgniteUIBlazor メソッドを呼び出してサービスとコンポーネントモジュールを登録します。

public static async Task Main(string[] args)
{
    // ...

    builder.Services.AddIgniteUIBlazor(
                typeof(DataGridModule)
    );
}

_Imports.razor に IgniteUI.Blazor.Controls 名前空間を追加します。

@using IgniteUI.Blazor.Controls;

以上で準備は完了です。

サンプルページを確認する。

最後にデバッグを実行して、サンプルページを確認してみましょう。

このようなページが表示されたら最初の Blazor アプリケーションの作成は完了です。次回はこのアプリケーションをベースに Ignite UI の DataGrid の組み込みを行っていきたいと思います。

Ignite UI for Blazor トライアル版を利用するには

Ignite UI for Blazor はトライアル板での試用が可能です。
トライアル版を利用するためには以下のページよりアカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。

https://iam.infragistics.com/Account/Register

また、製品をご購入をご検討のお客様は以下のページよりお気軽にお問い合わせください。

https://jp.infragistics.com/about-us/contact-us

インストールから最初のアプリケーションの実行まで - Ignite UI for Blazor で始めるSPA開発 - ①