ナレッジベースで学ぶ Ignite UI for Blazor その2🎃

サポートBlazor入門・はじめて実装・ハウツー
この記事を書いた人
Mori
テクニカルサポートエンジニア

Web・ECの開発・編集(なんでも屋)を経て、現在はお客様の技術サポートを担当。技術だけでなくチームやお客さまの抱える問題の本質を見ることを大切にしている。終業後が本職(👧のなんでも屋)

公開:2025年10月21日

こんにちは!インフラジスティックス・ジャパンの Mori です。

今回は、前回に引き続き弊社ナッレジベースの記事の中から、Ignite UI for Blazor の入門にぴったりのコンテンツをピックアップしました!この記事を読んで実際にサンプルをさわっていただくだけで、製品にスムーズに慣れていただけること間違いなしです!(前も言ってた!)

というわけで、まずは全体のラインナップをご紹介します。今回はその2!

(その1)

  • 導入・セットアップ 編
  • 基本コンポーネント操作 編
  • IgbGrid:基本表示 編

(その2)

  • IgbGrid:カスタマイズ 編
  • IgbDataChart:基本と応用 編
  • IgbGrid:ローカライズ 編

前回はその1で、導入から IgbGrid の表示までのファーストステップを見ていただきましたので、その2ではちょっとした応用ステップを見ていただきたいと思います!

では早速いってみましょー!

その2 🏀

IgbGrid:カスタマイズ 編 (๑•̀ㅂ•́)و✧

ご紹介する記事はこちら!

行数に応じて高さを自動調整するサンプル。不要なスクロールバーを出さないテクニックを学べます。

グリッド表示って、データ量や画面構成によって高さの調整が必要になることが多いんです。この記事では、IgbGrid を使って、グリッドの高さを状況に応じて動的に変える方法を丁寧に解説してくれています。IgbGrid を使って、柔軟に高さを管理したいときに非常に役立つ内容ですね!特に、行数が可変のグリッドでは、スクロールバーの有無を制御しつつ表示の整合性を保つのにぴったりのテクニックです。この記事に限らずですが、実装の手順と内容が詳しく載っているので、迷わず実装できそうです!

そしてお次はこちら!

BodyTemplateを使って任意の HTML 要素を埋め込む方法。セルのカスタマイズ入門としておすすめです。

グリッドを使った資料やリストの中に、URL リンクを載せたいってご要望、結構あるんじゃないでしょうか。こちらの記事では BodyTemplate を使ったサンプルのほか、高パフォーマンスが必要になる場合の対処方法など、詳細な解説がありますので、ハイパーリンクに限らず学習記事としてもぜひご覧になっていただきたい記事となっております!

見た目にも慣れ親しんだリンクになっていいですね!

IgbDataChart:基本と応用 編 ٩(ˊᗜˋ*)و

ご紹介する記事はこちら!

チャートをクリックした際のイベントをキャッチしてチャートの詳細データを取得し画面に表示したり、データを使った処理を行うことができます。

チャートをクリックして取得したデータをもとに、具体的な操作や次の処理を実行したいことってありますね。クリックしたデータを別の領域にコピーしたり、データそのものを加工して別の見せ方をしたり。この記事では取得したデータを詳細に表示する機能を実装しています。視覚的なチャートからデータを取得するだけでいろいろな展開をすることができますね!

続いての記事はこちら

IgbValueLayerの

ValueModeで統計情報を重ねて表示します。チャートの次ステップ学習に最適です。

こちらの記事では視認もしやすくなるプロパティのご紹介をしています。複数チャートを表示して、データポイントもたくさんあると、最大値、最小値を目視で確認するのは大変です。平均値なんてものすごい計算力をもってしても厳しいでしょう!IgbDataChart では視覚的にもわかりやすくそれらを表示する機能が備わっています。

ぜひ試してみてください!

つづいてはこちら!

**軸ラベルフォーマットのカスタマイズ例をご紹介。見やすいチャート作成の基本を学べます。**こちらの記事では、数値ラベルを 3 桁ごとにカンマ区切りにしたい。という非常に非常に多いお問い合わせに向けた内容となっています。やはり大きな数値になると必須の機能ですね。チャートを扱う際にはとても利用頻度が高いので、ブログでもご案内させていただきました! 大きな数値でこれがないと困りますね チャートの必須科目?としてぜひ一度お試しください!

IgbGrid:ローカライズ 編 (ง🔥Д🔥)ง

ご紹介する記事はこちら!

IgbGrid のロケール設定と CSS による表示形式調整の方法により、少々複雑な設定に対応しています。

Tue と Thu は単体だと何曜日だっけとなるのは僕だけか

こちらの記事ではデフォルトでは日本語対応していない(ほんとごめん!) IgbGrid のポップアップカレンダーの日本語化対応の方法を詳しく解説しています!英語と日本でって単純に訳するだけでなく、順序が異なるものも多いですね。日本語にしてもカレンダーって色々な表記があって大変だと気づかされます。

オーケーイ!!

まとめ

いかがでしたでしょうか!!

今回は その2 として、3つのセクションにわけて6つの記事をご紹介しました!

(その2)

  • IgbGrid:カスタマイズ 編
  • IgbDataChart:基本と応用 編
  • IgbGrid:ローカライズ 編

お問い合わせの多い機能についてもご紹介しておりますが、どれも Ignite UI for Blazor を扱う際のお手本になるものばかりですので、学習だけでなく実際のアプリケーション作成にもお役立ていただけたらと思います。

その1では、以下のラインナップでご紹介しておりますので、まだご覧いただいていない方、ぜひ見てみてくださいね!

(その1)

  • 導入・セットアップ 編
  • 基本コンポーネント操作 編
  • IgbGrid:基本表示 編