インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

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

f:id:cleverdog:20201022143631j:plain

こんにちは、テクニカルコンサルティングチームの中江です。

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

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

blogs.jp.infragistics.com

blogs.jp.infragistics.com

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

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

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

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

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

Image from Gyazo

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

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

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

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

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

Image from Gyazo

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

名前:Infragistics
ソース:https://packages.infragistics.com/nuget/licensed

Image from Gyazo

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

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

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

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

Image from Gyazo

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

Image from Gyazo

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

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

Image from Gyazo

各種ファイルへの追記

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

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

Image from Gyazo

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

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

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

Image from Gyazo

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

@using IgniteUI.Blazor.Controls;

Image from Gyazo

以上で準備は完了です。

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

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

Image from Gyazo

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

blogs.jp.infragistics.com

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

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

また、製品をご購入をご検討のお客様は以下のページよりお気軽にお問い合わせください。
https://jp.infragistics.com/about-us/contact-us