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

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

トップ > Blazor > オープンソース版の Ignite UI for Blazor "Lite" を使ってみよう

オープンソース版の Ignite UI for Blazor "Lite" を使ってみよう

Blazor Web開発 製品情報

先日、インフラジスティックスが開発・提供する UI コンポーネントライブラリ Ignite UI の一部がオープンソース化され、MIT License のもと、商用・非商用を問わず無償で利用できるようになりました。

Blazor 向けである Ignite UI for Blazor もその対象に含まれています。

そこで本記事では、Ignite UI の一部オープンソース化を機会に、オープンソース版の Ignite UI for Blazor を使った Blazor アプリケーションの作成手順を紹介したいと思います。

はじめに

本記事では Windows 上で Visual Studio 2026 を使用して Blazor WebAssembly アプリケーションを新規作成し、その上にオープンソース版の Ignite UI for Blazor をインストールして使用する手順を、ステップ・バイ・ステップで解説します。

なお、本記事では作業手順を具体的にするために、Blazor WebAssembly アプリケーションを対象とした解説を行いますが、Blazor Server アプリケーションでも同様の手順でオープンソース版の Ignite UI for Blazor を利用できます。

それでは始めていきましょう。

Blazor WebAssembly のプロジェクトを新規作成する

Visual Studio 2026 を起動し、[新しいプロジェクトの作成 (N)] をクリックします。

Visual Studio の開始ダイアログで新しいプロジェクトの作成をクリックする

[新しいプロジェクトの作成] ダイアログが表示されたら、検索ボックスに「Blazor WebAssembly」と入力し、表示されたテンプレートの中から [Blazor WebAssembly スタンドアロン アプリ] を選択して [次へ (N)] をクリックします。

新しいプロジェクトの作成ダイアログで、Blazor WebAssembly スタンドアロンアプリを選ぶ

[プロジェクトの構成] ダイアログが表示されたら、プロジェクト名と保存場所を指定して [次へ (N)] をクリックします。

プロジェクトの構成ダイアログで、プロジェクトの名前と保存場所を指定

[追加情報] ダイアログが表示されたら、[フレームワーク (F)] に「.NET 10.0 (長期的なサポート)」を指定し、[認証 (A)] は「認証なし」を選択します。[HTTPS 用の構成(H)] 以外のオプションはすべてチェックを外して、[作成 (C)] をクリックして、プロジェクトを作成します。

追加情報ダイアログで各種オプションを指定する

これでまずはまっさらな状態の Blazor WebAssembly アプリケーションのプロジェクトが作成されました。

オープンソース版の Ignite UI for Blazor をインストールする

続けてオープンソース版の Ignite UI for Blazor をプロジェクトにインストールします。

NuGet パッケージ参照の追加

オープンソース版の Ignite UI for Blazor は "IgniteUI.Blazor.Lite" という、有償版とは別の名前の NuGet パッケージとして nuget.org から配布されています。具体的には以下の手順でインストールします。

  1. Visual Studio 上で、ソリューションエクスプローラーからプロジェクトを右クリックし、[NuGet パッケージの管理 (M)...] をクリックします。
  2. NuGet パッケージマネージャー GUI が表示されたら、[参照] タブをクリックし、検索ボックスに "IgniteUI.Blazor.Lite" と入力して検索します。
  3. 表示された検索結果の中から "IgniteUI.Blazor.Lite" パッケージを選択し、右側のペインで [インストール] をクリックします。
  4. 利用規約の確認ダイアログが表示されたら、内容を確認の上、[同意する (A)] をクリックしてインストールを完了します。

Visual Studio の NuGet パッケージマネージャー GUI で、オープンソース版の Ignite UI for Blazor のパッケージを検索しインストールする

サービス登録

次に Program.cs を編集し、Ignite UI for Blazor を使用するための初期化コードを追加します。Program.cs を開き、以下のコードを追加します。

/* Program.cs */
...
var builder = WebAssemblyHostBuilder.CreateDefault(args);
...
// 👇️ この 1行を追加
builder.Services.AddIgniteUIBlazor();

await builder.Build().RunAsync();

名前空間のインポート

さらに Ignite UI for Blazor を使用するための名前空間を開くために、_Imports.razor を編集します。_Imports.razor を開き、末尾に以下のコードを追加します。

@* _Imports.razor *@
...
@using IgniteUI.Blazor.Controls @* 👈️追加 *@

スタイルシートの参照

最後に、wwwroot/index.html を開き、Ignite UI for Blazor のスタイルシートを読み込むためのコードを追加します。<head> タグ内に以下のコードを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <link rel="preload" id="webassembly" />

  <!-- 👇️ この行を追加 -->
  <link rel="stylesheet" href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" />

  <link rel="stylesheet" href="css/app.css" />
  ...
</head>
...

コンポーネントを使ってみる

以上でオープンソース版の Ignite UI for Blazor のインストールは完了です。早速ですが試しに、オープンソース版の Ignite UI に含まれているカードコンポーネントを使ってみましょう。Pages/Home.razor を開き、内容を以下のコードに置き換えます。

<IgbCard style="width:350px">
    <IgbCardMedia>
        <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
    </IgbCardMedia>
    <IgbCardHeader>
        <h4>山田 花子</h4>
        <h6>プロフェッショナルフォトグラファー</h6>
    </IgbCardHeader>
    <IgbCardContent>
        はじめまして！写真家・映像作家の花子です。
        写真は、感じること、触れること、愛することの表現です。
        フィルムに収めた瞬間は永遠に残ります...
        すべてを忘れてしまった後も、
        小さな思い出を覚えていてくれるのです。
    </IgbCardContent>
    <IgbCardActions>
        <IgbButton>詳細を見る</IgbButton>
    </IgbCardActions>
</IgbCard>

これでこの Blazor WebAssembly プログラムを実行・ブラウザで開いてみると、以下のようにカードコンポーネントが表示されるはずです。

オープンソース版の Ignite UI for Blazor に含まれるカードコンポーネントを配置したページを表示した様子

以上で、オープンソース版の Ignite UI for Blazor を使用することのできる、Blazor WebAssembly アプリケーションプロジェクトを作成することができました。

おわりに

本記事では、オープンソース版の Ignite UI for Blazor を使った Blazor WebAssembly アプリケーションプロジェクトを作成する方法について解説しました。

本記事では Blazor WebAssembly における実装手順を解説しましたが、Ignite UI シリーズは Angular、React、WebComponents 版も用意されており、それらプラットフォームでもオープンソース版が利用可能です。

Ignite UI の一部オープンソース化により、これまで有償版でしか利用できなかった多くのコンポーネントが無償で利用できるようになりました。その中には本記事で紹介したカードコンポーネントのほかにも、“タイルマネージャー” のような高度で自由度の高いレイアウトコンポーネントも含まれています。タイルマネージャーを使えば、ユーザーが自由にカスタマイズできるダッシュボードを構築できます。具体的な作成手順は、以下の記事で解説していますので、あわせてご覧ください。

blogs.jp.infragistics.com

Blazor はもちろん、Angular や React、Vue や Svelte といったライブラリ/フレームワークで構築された皆さんの Web アプリケーションに、このような洗練されたコンポーネントを商用利用を含め無償で組み込めることは、驚くべきことです。

ぜひこの機会に Ignite UI をお試しください!

参考情報