Ignite UI for Blazor - バージョン 22.1 最新情報

こんにちは、インフラジスティックス・ジャパンです。
本記事では Ignite UI for Blazor の最新バージョン 22.1 の最新情報についてご紹介します。

この 5ヶ月間、私たちは Ignite UI for Blazor を成長させるために努力を続けてきました。これらの努力の結果、10 個の新しいコンポーネント、現存する唯一の Blazor 用のドックマネージャー、データグリッドの新機能、新しいデータ凡例とデータツールチップを含むデータ可視化コンポーネントの UX の大幅な改良がなされました。

それでは、Ignite UI for Blazor 22.1 リリースに追加されたこれらの素晴らしい新機能について見ていきましょう。

Blazor ドックマネージャー (プレビュー版)

ひとつめは、きっとあなたをワクワクさせるに違いない、このコンポーネントの紹介から始めることにしましょう。
全く新しい Blazor 用のドックマネージャーコンポーネントを 22.1 でリリースします!
そのとおりです! Blazor のためのドックマネージャーです! この Blazor ドックマネージャーは、まだプレビュー版ですが、今日からすぐに使うことができます。Blazor ドックマネージャーが公式リリースに達するまでにはまだ多くの作業が残されていますが、今すぐご自由に試して頂き、ぜひともあなたのフィードバックをお寄せください。

さてところで、ドックマネージャーとは何でしょうか? Visual Studio を使ったことがある人なら、それが何であるかは既によく知っていると思いますが、これは、さまざまなサイズ、位置、動作を持つさまざまなタイプのペインを組み合わせて複雑なレイアウトを管理するコンポーネントです。ドックマネージャーを使うことで、エンドユーザーはアプリ内のさまざまな場所にペインをドッキングさせたり固定したりすることができ、さらに、サイズ変更、移動、フローティング、非表示にするといったカスタマイズが可能です。

Blazor グリッド

リリースのたびに、Ignite UI for Blazor のグリッドコンポーネントは改善を積み重ねてきました。過去数回のリリースでは、新しいフィルター行、対話的操作のグループ化、セルのマージ、レイアウトの保存/読み込み、編集体験の向上などの改善が行なわれてきました。そして今回の Ignite UI for Blazor 22.1 リリースでは、この素晴らしいグリッドコンポーネントの完成度を高めるため、さらにひとつ機能を追加しました。

ページネーション

開発者は、大量のデータをグリッドで表示する必要に迫られることがよくあります。アプリケーションの要件によっては、データグリッドに数万件もの行が含まれることもあります。幸い、Ignite UI for Blazor グリッドコンポーネントは、このような大規模のデータをスクロール表示することに何の問題もありません。しかしながら、"スクロール" という操作方法はこのような大量の行を見て回るのにいつも最適とは限りません。スクロールの代わりに使われる、大量のデータを往来するための別の一般的なアプローチは、ページネーション (ページ分割) を使用することです。グリッドページャーとも呼ばれます。

ページネーションは、大量のデータセットを一連のページに分割して操作する手法です。ページネーションでは、データを設定された行数ごとの "ページ" に表示することができ、ユーザーはスクロールバーなしでデータを "スクロール" することができます。テーブルのページネーションの UI には通常、現在のページ、総ページ数、前ページと次ページの矢印ボタンなどがあり、ユーザーはデータのページを "めくる" ことができるようになっています。

今回リリースされた Ignite UI for Blazor 22.1 では、グリッドコンポーネントがページングをサポートするようになりました。

Blazor データ可視化

データ可視化ツールが、大量のデータをリアルタイムに読み込む要求に応え、美しく対話的な体験を提供することは、とても重要です。そのため、私たちは、新しい既定のルック & フィールや、データ可視化コンポーネント全体の新機能を含むチャートの改善に多くの時間を費やしてきました。

それらの新機能としては以下が含まれます。

• ラベルの自動回転
• マージン計算の強化
• ラベルギャップのプロパティ
• コールアウトレイヤーでの位置決め
• スタイルイベント
• 新しいハイライトシリーズモード
• 水平および垂直スクロールバー
• マージン角のモード
• その他

既定のルック & フィールの改善点は、色、マージン、パディングだけにとどまりません。また、データ可視化コンポーネントをより洗練化しより良いエンドユーザー体験をもたらす 2 つの全く新しいコンポーネント、新しいデータ凡例とデータツールチップを導入しました。

データ凡例

データ凡例は、既存の凡例に似た新しいコンポーネントです。既存の凡例に対し、データ凡例は、シリーズの値、凡例バッジ、シリーズタイトルを表示することに焦点を当てています。データチャートコンポーネント内のプロットエリア内でマウスを移動させると、データ凡例は表示している値を逐次更新します。マウスポインタがプロットエリア外に出ると、最後にホバーしたポイントを維持します。データ凡例は、ユーザーに何を見せるかを制御するための API を公開しています。これには、表示する情報、表示する値、値に適用する書式、使用するスタイルが含まれます。

このタイプの凡例は、金融や株式取引のアプリケーションで頻繁に使われています。

データツールチップ

データツールチップは、値、凡例バッジ、シリーズタイトルなどのシリーズについての詳細情報を表示する、新しいタイプのツールチップレイヤーです。基本的にこのツールチップは、そのコンテンツとしてデータ凡例を表示します。そのため、データツールチップもデータ凡例コンポーネントと同様に、スタイル、書式、フィルタリングのプロパティを持ちます。

Blazor チップ

Blazor チップコンポーネントは、情報を表示する小さなコンテナです。チップには、テキスト、アバター、画像、アイコンなどを表示することができます。通常、チップは、タグやフィルター、選択肢、アプリケーションへの入力として使用されます。Blazor チップコンポーネントは高度なカスタマイズが可能で、選択と削除の操作をサポートし、および他のコンポーネントをプレフィックスまたはサフィックスとして追加することもできます。

選択

削除

Blazor ドロップダウン

Blazor ドロップダウンコンポーネントは、あらかじめ定義された値のリストを表示し、ユーザーがクリック1つで簡単にオプション項目を選択できるコンポーネントです。シンプルなドロップダウンメニューとして手軽に使うことも、あるいはまた、データのグループ化を構成して視覚的にリッチに情報を表示することもできます。グループ化においては、フラットなデータと階層的なデータのいずれにも対応しています。

Blazor マスク入力

Blazor マスク入力コンポーネントは、堅実なユーザー入力を容易に実現可能にする、拡張された入力コンポーネントです。マスク入力では、入力の特定の位置に特定の文字のタイプの入力を求める、入力の仕様を定義することができます。このことにより、マスク入力を使用することで、ユーザーによる入力値が適切か否かを簡単に検出できます。つまり、マスク入力を使うことで、ユーザー入力にエラーがあればユーザーに通知できるようになります。例えば、電話番号やクレジットカード番号、社会保障番号、日付などの入力に、マスク入力が便利に使えます。

Blazor プログレスバー - 線形および丸形

Blazor プログレスバーコンポーネントは、アプリケーションの処理状況を視覚的に表示するコンポーネントです。例えば、データベースからのデータ取得、ファイルのアップロード、Web サービスの呼び出しなどの処理の状況を表示するために使えます。プログレスバーを使用することで、これらのような長時間に渡って実行される処理や、一連のステップの進行状況を視覚的に表現することができます。一般的には、処理の進捗状況のパーセンテージを表示します。

いっぽうで、処理が完了するまでの時間が不明で進捗状況をパーセンテージで表すことができない場合があります。このような場合のために、プログレスバーには「不確定」モードが用意されています。「不確定」モードのプログレスバーでは、処理が完了するまでアニメーションを表示し続けます。

Blazor レーティング

Blazor レーティングコンポーネントは、シンプルでありながら非常に便利なコンポーネントです。レーティングコンポーネントでは、星マークなどのシンボルの並びを使って、ユーザーによる評価スコアの入力を行います。レーティングコンポーネントは、ユーザーが使用または購入した製品やサービスに対する意見や経験に関する知見を、評価のスコアとして入力するためによく使われます。

Blazor スライダーと範囲スライダー

Blazor スライダーコンポーネントは、指定された範囲のトラックに沿ってツマミを動かすことで値を選択することができる、入力コントロールの一種です。トラックは、連続またはステップ刻みに設定することができます。また、スライダーコンポーネントには、ラベル、目盛り、ツールチップ、制約、カスタムスタイリングなどの各種設定項目が備わっています。

Blazor 範囲スライダーコンポーネントは、スライダーコンポーネントとほぼ同じですが、単一の値ではなく、値の範囲を選択できます。具体的には、範囲指定されたトラック上にある 2 つのツマミを動かすことによって、値の範囲を選択します。1つ目のツマミは選択範囲の開始値を意味し、2つ目のツマミは選択範囲の終了値を意味します。

Blazor スナックバー

Blazor スナックバーコンポーネントは、ユーザーからの応答が必要となるかもしれない短いメッセージや通知を表示するために使われます。よくあるスナックバーコンポーネントの使用例としては、レコードが削除されたことをエンドユーザーに通知しつつ、ユーザーはそのスナックバーに応答することで削除操作を撤回してレコードを復元することができる、といった使い方があります。

Blazor トースト

Blazor トーストコンポーネントは、ページ上に警報や通知を表示する目的で使われます。一般的な通知には、システムメッセージ、プッシュ通知、警告メッセージ、情報、その他の非対話的な通知があります。トーストコンポーネントは通常、画面の下部に表示され、指定された時間後に自動的に消えます。トーストコンポーネントは、エンドユーザーの操作によって明示的に表示を閉じることはできないことに留意してください。

最後に

今後追加すべきコンポーネント、新機能、修正が必要な問題などに関してアイデアがあればお気軽にインフラジスティックス・ジャパン営業部（japansalesgroup@infragistics.com）までご連絡ください。