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

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

Ultimate 2020 Vol.2新機能 - Ignite UI for Blazor編

f:id:IGJP:20201215101053j:plain

こんにちは、インフラジスティックス株式会社です!10月に公式リリースされたばかりの「Ignite UI for Blazor」ですが、今回の「Infragistics Ultimate 2020 Vol.2」でも機能が追加されました。本記事では、今回のリリースで追加または機能拡充されたコンポーネントについて紹介します。

Ultimate 2020 Vol.2で追加、機能拡充されたBlazorコンポーネント

Blazor 日付ピッカー

Blazor 日付ピッカーは、エンドユーザーが入力欄をクリックしたときにドロップダウン表示されるカレンダーから日付を選択できるようにするコンポーネントです。エンドユーザーは直感的で使いやすいインタラクティブなカレンダーを使って、年月日を選択して入力することができます。

blazor-date-picker

Blazor Excelライブラリー

Blazor Excelライブラリーは、Microsoft Excelスプレッドシートを操作できるライブラリーです。Blazor Excelライブラリーを使用すると、Excelに依存することなく、ワークブック、ワークシート、セル、数式など使い慣れたMicrosoft Excelスプレッドシートオブジェクトを使用してスプレッドシートデータを操作できます。Excelをインストールする必要はありません。

Blazor Excelライブラリーを使用すると、Excelファイルの読み取りと変更、アプリケーションデータのExcelスプレッドシートへのエクスポート、Excelからアプリケーションへのデータの解析を簡単に行うことができます。それに加えて、Blazor Excelライブラリーを使用してアプリケーションのデータからグラフやスパークラインを生成することもできます。

Blazor Excelチャート

Blazor Excelライブラリーのチャートを使って、ワークシートのセル領域のデータトレンドを可視化することができます。棒グラフ、折れ線グラフを含む70種類以上のチャートタイプがサポートされています。

blazor-excel-charts

Blazor Excelスパークライン

Blazor Excelライブラリーでは、Excelワークシートへのスパークライン追加もサポートしています。Blazor Excelスパークラインを使用して、ワークシート内のデータセルの領域全体のデータトレンドをシンプルに視覚的に表示できます。一例として、特定のセル領域全体のExcelデータをシンプルな棒や折れ線のスパークライングラフとして視覚化することができます。

以下は、サポートされている定義済みスパークラインの種類です。

  • Line
  • Column
  • Stacked

blazor-excel-sparklines

Blazor グリッド

データグリッドは、インフラジスティックスが提供しているコンポーネントの中でも最も人気のあるコンポーネントです。10月のIgnite UI for Blazor公式リリース時に登場した、使いやすく高パフォーマンスで機能豊富なBlazorデータグリッドコンポーネントですが、以下について機能拡充がなされました。

アクセシビリティ (ARIA)

2020 Vol.2リリースで、インフラジスティックスのBlazorデータグリッドは現在利用可能な他のBlazorグリッドと比較してよりアクセシビリティのサポートが充実しました。視覚障害のあるユーザーは通常、グリッドベースのアプリケーションを理解して操作するためにスクリーンリーダーの利用が必要になります。 スクリーンリーダーにBlazorグリッドを理解して操作するのに必要なコンテキスト情報を提供するために、すべてのグリッドDOM要素に適切なARIA属性を追加しました。

これらのARIA属性によって、スクリーンリーダーがBlazorグリッドの列と行を解釈して操作できるようになります。

行編集

10月の公式リリース時、Blazorグリッドはセル編集とセル一括編集に対応していましたが、今回のリリースでは行編集機能も追加されました。 行編集は、セルの編集を開始するとそのセルが存在する行全体が編集モードになるという点で、セル編集機能とは異なります。データを確定せずに、元に戻す機能を使用して、同じ行の他のセルに変更を加えることができます。 Enterキーを押すか、行の外側をクリックして編集モードを終了することで、行にある全てのセルで行われた値がいっぺんに変更されます。変更が確定されていないセルの値は、下記の画像にあるように薄い灰色の斜体の文字で表示されます。

blazor-row-editing

Blazor 複数列コンボボックス

最後に、複数列コンボボックスをご紹介します。このコンポーネントは10月のリリース時にはプレビュー版として収録されていましたが、今回正式リリースとなりました。一般的なコンボボックスでは単一の情報からアイテムを選択することになりますが、大量のデータをグリッドUIでドロップダウンリストに表現するコンボボックスであるという点が特徴です。Blazor複数列コンボボックスは、オートサジェストによるフィルタリング、マテリアルベースのラベル、プレースホルダーテキスト、列の定義、列ヘッダーの表示の制御、並べ替えなどの機能をサポートしています。

blazor-multi-column-combobox

まとめ

今回のアップデートはIgnite UI for Blazor公式リリースから3ヶ月ということもあり、追加されたコンポーネントや機能拡充は多くはありませんでしたが、今後も随時製品アップデートを続けて参りますのでご期待下さい!

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

Ignite UI for Blazorをお試しいただいて何か問題やご要望がございましたら、お手数ですが弊社までご連絡いただけますと幸いです。また、今後の最新情報については本ブログのほか弊社Twitter(@IGJP)、シニアプロダクトマネージャーであるBrian LagunasがTwitter(@brianlagunas)やYouTube channelTwitchで発信して参りますので、よろしければフォローをお願いします!