Daizen Ikehara

インフラジスティックス・ジャパン株式会社の元デベロッパー エバンジェリスト、現製品担当の Blog
Ignite UI for JavaScript 2017 Vol.1 新機能

Ignite UI Banner

先日リリースを発表しました Infragistics Ultimate 2017 Vol.1 には JavaScript/HTML5、Angular、React、ASP.NET MVC に対応するライブラリー、Ignite UI が含まれています。この新機能についてより詳しく解説します。

新機能のハイライト

  • グリッドの新機能 – テキスト フィルタリング、GroupBy 集計、グリッドのキャプション機能が高機能、高速グリッドである igGrid に追加
  • 新コントロール: スプレッドシートコントロール – Microsoft Excel ライクなスプレッドシート UI を実現
  • 新コントロール: スケジュール コントロール – レスポンシブレイアウトに対応するJavaScript/HTML5 版スケジュール コントロール

それでは早速見ていきましょう。

グリッドの新機能

テキスト検索とフィルタリング

Ignite UI で提供している高速 JavaScript グリッド、igGrid に新たに複数列を跨いでのテキスト検索およびフィルタリング機能が追加されました。これまで行のフィルタリングを行う際には各列ごとにフィルター条件を設定する必要がありましたが、この機能を活用することでグリッドにバインドされているデータの全ての列をテキスト検索し、絞り込むことができるようになります。

image

GroupBy 集計機能の拡張 - グループごとの集計

igGrid でよく利用される機能の一つは Outlook において差出人や日付で項目をグループ化できる機能を模した GroupBy 機能です。この機能を利用することで都道府県など特定の列の値をもとに平面グリッドをグループごとに階層表示することができるようになります。2017 Vol.1 ではこの GroupBy に個々のグループごとの集計機能を追加しました。

image

この機能を利用することで、個数、合計や平均、最小、最大など一般的な集計機能をグループごとに適用することができます。また、開発者が独自の集計機能を組み込むことができるようにもなっています。

グリッド キャプション テンプレート

igGrid において、グリッドのキャプション(タイトル)表示がより強力になりました。単純なテキストだけではなく、画像や任意の HTML 要素を組み込むことができるようなったため、グリッドがどのようなデータを表示しているかを提示しやすくなりました。

image

さらに、2017 Vol.1 において、UTC ISO 8061 日付 シリアライゼーションが新たにサポートされ、タイムゾーンを加味した表現がグリッド、エディターで可能になりました。また、数値エディターにおける値の丸め機能についても選択肢が増えています。

新スプレッドシート コンポーネント

Microsoft Excel のようなスプレッドシートは今日、世界各国のビジネスで多用されています。また、このデータを Web アプリケーションで表示させたい!というニーズは日本に限らず世界各国からご要望としていただいていました。今回、2017 Vol.1 では Ignite UI にこのスプレッドシートコンポーネントが追加されました。

image

このバージョンでは Microsoft Excel データのロードやエクスポートをリモートのサーバー、サービス上、あるいはローカルのメモリから行うことができます。

数式バー

スプレッドシートでは値を直接入力する方法以外に、他のセルを参照し、計算結果を表示する数式をサポートしています。このスプレッドシートコントロールではセルに設定されている数式を確認することができます。

画面の構成

スプレッドシートの表示についてもカスタマイズが可能です。Excel の外観に似せた標準の構成から、罫線や、ヘッダ、数式バーの表示・非表示を制御できます。

更にプログラミングコードを使用することにより、シートの拡大・縮小やデータの書式の変更を可能とします。

image

新スケジュールコンポーネント

これまで、多くのお客様からスケジュールコンポーネントについてご質問いただきました。業務アプリケーションでは予定の管理と確認は重要かつ、共通の要件という風に捉えています。今回、2017 Vol.1 にモバイルにフォーカスしたスケジュールコントロールを追加しました。もちろん、デスクトップ環境でもご利用いただけます。

image

予定

予定はスケジュール管理において一番重要なものになります。開始・終了時刻や件名、関連リソースなど特定の時間帯をブロックするための情報を有しています。このスケジュールコンポーネントでは予定を管理するデータ構造を我々が定義しているため、その形式に則って、あるいは既存の予定情報をマッピングすることでスケジュール表示を行うことができます。また、繰り返しの予定もサポートしています。

リソース

予定のスケジューリングに加え、会議室などのリソースも併せてこのスケジュールコンポーネントで管理することができます。個々のリソースはそれぞれ色分けされているので一目で同じ時間帯において重複がないかどうかを確認できます。標準で紫、赤、水色、緑など 11 色が用意されており、更に個別に追加することもできます。

image

ビュー

スケジュールコンポーネントでは 2 つのビューを提供しています。

月ビュー

月ビューはカレンダーのように1月単位で予定を表示します。この表示では画面サイズが大きければ詳細な情報を提示しますが、モバイルなど限られた領域で使用する場合は最低限の情報を提示するように自動的に表示が切り替わります。

image  image

アジェンダ ビュー

アジェンダ ビューでは予定をリストとして表示し、日、開始、終了時刻と件名を表示するシンプルなビューです。ユーザーは垂直方向へのスクロールにより今後の予定を一連の流れとして確認することができます。

image

その他の機能

ここまで紹介させていただいたもの以外にも様々な機能が利用いただけます。

  • Ignite UI インテリセンス サポート: Visual Studio と Visual Studio Code でのインテリセンスに対応しました。インストーラーで提供している NuGet パッケージ、Visual Studio マーケットプレイス、あるいは Github リポジトリから取得することができます。
  • Ignite UI Angular 2 クイック スタート アプリケーション – Ignite UI を Angular で利用するための設定が行われているアプリケーションを Github で公開しています。
  • Angular ER ダッシュボード リファレンス アプリケーション – 以前から提供してきた ER ダッシュボード サンプルアプリケーションをベースとして、Angular + Ignite UI の組み合わせて実装されたリファレンス アプリケーションを新たに公開しています。

ぜひ、お試しください!

Comments

No Comments

Anonymous comments are disabled