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

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

トップ > 製品情報 > Infragistics Ultimate 2020 Vol.1 リリース！

Infragistics Ultimate 2020 Vol.1 リリース！

製品情報
Facebook Twitter Pocket Hatebu

f:id:mika-kura:20200608100447j:plain ソリューション・コンサルタントの山口です。本日、Web / デスクトップ / モバイル 様々な開発プラットフォームに対応するUI開発コンポーネントスイートの最新版「Infragistics Ultimate 2020 Vol.1」をリリースしました！

このエントリでは、今回のリリースでどのようなアップデートがあったのかを簡単にご紹介します。個別の機能については文中のリンクをご覧ください。

はじめに

今回のリリースを以下の５つのカテゴリに分けて紹介していきたいと思います。

  • Ignite UI パッケージ及び製品の名称変更
  • モダンWeb開発プラットフォームにおける機能拡充
  • NET Core 3.1 のサポート
  • Xamarin製品の機能拡充
  • Indigo Designのクラウドインターフェースの刷新

Ignite UI パッケージ及び製品の名称変更

これまで弊社ではWebフロントエンド開発向けのUIライブラリを「Ignite UI for JavaScript」というパッケージ名称で販売を行っておりました。この「Ignite UI for JavaScript」パッケージには、jQueryベースの製品である「Ignite UI for JavaScript」の他 「Ignite UI for Angular や「Ignite UI for React」 などが含まれていましたが、購入単位であるパッケージ製品名と内訳の個別製品名が同一であり分かり辛さがあったため、今回のリリースで以下のように名称を変更いたしました。

  • Ignite UI
    • Ignite UI for jQuery
    • Ignite UI for Angular
    • Ignite UI for React
    • Ignite UI for Web Components
    • Ignite UI for ASP.NET MVC
    • Ignite UI for ASP.NET Core
    • Ignite UI for Blazor

上記の「Ignite UI」が購入単位であるパッケージ製品名称となり、これまで「Ignite UI for JavaScript」と呼ばれていたjQueryベースの個別製品は「Ignite UI for jQuery」へ変更となりました。jQuery ベースの製品から始まったIgnite UIですが、上記の通り今では多種多様なフレームワークやライブラリに対応するUIライブラリとなっております。Webフロントエンドの技術変遷は非常に早く、毎年のように新しい技術やフレームワークが出てきておりますが、Ignite UI は今後も新しい技術に追従しつつ、フロントエンド開発者の生産性を上げるための各種部品やツールを提供していきます。 f:id:gdayori:20200608144736p:plain

モダンWeb開発プラットフォームにおける機能拡充

今回のリリースでは、特に Angular、React、Web Components 等のモダンWeb開発プラットフォームにおける製品のアップデートが多く含まれており、様々なフロントエンド技術への対応と各製品ごとの大幅な機能強化が行われました。

Angular

Angularは引き続き弊社が最も注力しているプラットフォームの一つで、今回のリリースでも多くの機能強化が行われています。Ignite UI for Angularはラッパークラスを介さないピュアな Angular Component として作られているため、Angular Way なコード記法による生産性の向上や、Angularのコンパイラによるパフォーマンスやバンドルサイズの最適化など様々な利点を享受することができます。

今回のアップデートの目玉として、レイアウトコントロールの DockManager が追加されました。Dock Manager は、Visual Studio のような IDE に備わっている、ウィジェットを任意移動しつつもウィンドウ枠に整列して収まる表示コントロールです。これによって開発者が作成した各種機能を複雑なレイアウトながらも管理しやすい画面に集約でき、まるでデスクトップアプリのような UX を Web ブラウザで実現することができます。 f:id:gdayori:20200608142732p:plain

その他、日付の範囲を選択するための DateRangePicker やレイアウトの領域に対するサイズ調整を可能とする Splitter などが追加されており、またグリッドコントロールについては多くの機能が追加されました。以下は、新機能のリストです。

  • グリッドコントロール
    • 選択セル値のデータ分析
    • マスター - ディテール表現
    • 折りたたみ可能な列グループ
    • 全列選択
    • キーボードナビゲーションの機能強化
    • 列の固定（右側固定にも対応）
    • 行の固定
    • 状態の永続性
    • Excelスタイルフィルター/高度なフィルター
    • ドラッグ時ゴースト表示のための Directive の追加
    • すべてのデータを含むカスタムサマリー
  • Splitter コンポーネントの追加
  • DateRangePickerコンポーネントの追加
  • TickMarks付きのスライダー
  • カルーセルコントロールの更新
  • Selectコンポーネントのヘッダー/フッター要素
  • カスタムCSSのテーマウィジェット
  • ブートストラップのサポート

詳しく各機能のアップデートを確認されたい方は、以下のリンクより各種サンプルを参照ください。 Angular Data Grid | マテリアル テーブル | Ignite UI for Angular | Infragistics - Native Angular | Ignite UI for Angular

React

React製品のアップデートとしてはこれが４回目となりますが、今回が最も大きなアップデートとなります。グリッドの大幅な機能強化に加えて、Angular 同様に DockManager がリリースされました。以下は、新機能のリストです。

  • グリッドコントロール
    • 列の集計
    • 列の固定
    • 列の選択
    • 列のフィルタリング
    • 列のグループ化
    • 列の非表示
    • 列のオプション設定ダイアログ
    • グリッドツールバーの表示
    • ＵＸ再設計
  • DockManager の追加
  • デフォルトテーマの変更（Denali Light）

今回、列設定に関する機能が大幅に増えたことで、列オプションを設定するためのダイアログが追加され、エンドユーザ自身で列の設定を行うことができるようになっています。

f:id:gdayori:20200605111553p:plain

詳しく各機能のアップデートを確認されたい方は、以下のリンクより各種サンプルを参照ください。 Data Grid | Table | Ignite UI for React | Infragistics - Native React | Ignite UI for Angular

Web Components

Web Componentsは、Webアプリケーションの中で再利用可能な独自のHTMLタグを扱えるようにするための技術です。１つのWebページを１枚の大きなHTML/CSSで書き上げるのではなく、共通化できるUIセットをコンポーネントとして切り出して定義し、それらを組み合わせて画面を開発することができます。なお、この技術は、Web標準の規格に沿っているため主要なモダンブラウザで利用することができ、また特定のライブラリやフレームワークに依存することもありません。 Web Components製品については、React製品と同様のコードベースを共有しているため、React製品と同様のアップデートが追加されています。以下は、新機能のリストです。

  • グリッドコントロール
    • 列の集計
    • 列の固定
    • 列の選択
    • 列のフィルタリング
    • 列のグループ化
    • 列の非表示
    • 列のオプション設定ダイアログ
    • グリッドツールバーの表示
    • ＵＸ再設計
  • DockManager の追加
  • デフォルトテーマの変更（Denali Light）

f:id:gdayori:20200605112134p:plain

詳しく各機能のアップデートを確認されたい方は、以下のリンクより各種サンプルを参照ください。 Data Grid | Table | Ignite UI for Web Components | Infragistics - Native WebComponents | Ignite UI for Angular

ASP.NET Core / MVC

ASP.NET Core や MVC については Ignite UI for jQuery (旧称 Ignite UI for JavaScript) が利用できるよう.NET向けのアセンブリを提供しておりましたが、引き続き.NETのアップデートに追従していっております。グリッドやピボット、チャートやレイアウトコントロール、更にExcelのスプレッドシートUIといった利用価値の高い大型のコントロールも.NET Core や MVC で利用できるようになっています。

f:id:gdayori:20200605171458p:plain

詳しく各機能のアップデートを確認されたい方は、以下のリンクより各種サンプルを参照ください。

Data Grid Control - jQuery Data Grid Component - Ignite UI for jQuery™

ASP.NET Core Blazor

Blazorは、.NETでインタラクティブなクライアントWeb UIを構築するためのフレームワークです。これまでASP.NETをベースとしたアプリケーションでは、クライアントサイドをインタラクティブにするためにJavaScriptを書いて処理させる必要がありました。また、SPA(Single Page Application)を構築する場合は、例えばASP.NET API + Angular といった構成で.NETはあくまでサーバ側のデータを返すAPIのためのモジュールとして利用され、クライアントサイドはJavaScriptフレームワークで開発される形となっていました。BlazorはそういったSPAアプリケーション開発を.NET & C# ベースで行うことができます。

前回の2019 Vol.2 のリリースでプレビュー版として製品をリリースしましたが、引き続き今回もプレビュー版として製品提供を行っています。UI部品のベースは React や Web Components 製品のものと同様となりますが、引き続き正式リリースに向けて開発を続けております。なお、Blazor Server と Blazor WebAssembly の両方に対応する予定となっております。現在のところ７月ごろに Blazor 製品をリリースする予定となっておりますので、皆様ご期待ください。

以下画像はプレビュー版のサンプルブラウザで動作している金融向けチャートコントロールのイメージ。

f:id:gdayori:20200605172430p:plain

.Net Core 3.1 のサポート

昨年 .Net Core 3.0 がリリースされたタイミングで弊社の.NET系製品についても Core 3 のサポートをすぐに行いましたが、今回のリリースでは最新版の .Net Core 3.1 のサポートが追加されました。なお、Windows Forms のポトペタができるデザイナーへの対応については未だサポートされておりませんが、Visual Studioや .Net Core 更には .Net 5.0 のアップデートでデザインタイムの体験がどのように変わっていくのかを注視しつつ、デザイナーのサポートを検討していきたいと考えています。アップデートが入り次第、ブログ等で情報発信していきますので、こちらも是非ご期待ください。

Xamarin

Xamarin.Formsは、.NetおよびVisual Studioを使用してクロスプラットフォームのネイティブモバイルアプリケーションを構築するためのフレームワークです。今回のリリースでは、最新バージョンのXamarinへのサポートに加えて、代表的なコントロールであるグリッドとチャートの機能が強化されました。

  • Xamarinの最新バージョンのサポート
  • グリッド
    • 列の集計
    • 列の固定
  • チャート
    • カテゴリーチャート
    • 吹き出しレイヤー
    • 十字線レイヤー
    • 最終値レイヤー
    • レイヤーをハイライト
    • ツールチップレイヤー
    • DataChart
    • AxisAnnotation
    • 吹き出しレイヤー
    • 最終値レイヤー

f:id:gdayori:20200605182910p:plain

Indigo Designのクラウドインターフェースの刷新

Indigo.Designは、デザイン〜プロトタイピング / ユーザテスト〜コード生成をシームレスに繋ぐソリューションです。今回のリリースでは特にクラウド上でのプロトタイピングやユーザテスト（記録、再生、分析）のUXがアップデートされています。

ビジュアルインスペクターのアップデート

クラウド上で取り込んだUIデザインの仕様を視覚化するビジュアルインスペクターがアップデートされ、CSS、間隔、フォント、サイズの制約など、開発者がデザインからより具体的な開発に必要な情報を取得するために最適なUXへとアップデートされました。以下画像は、Sketchで作成されたデザインファイルを取り込み、ビジュアルインスペクターでスペックを確認しているイメージです。

f:id:gdayori:20200605185635p:plain

ユーザーテストのアップデート

ユーザーテスト機能は、作成したプロトタイプにシナリオを与えて実際に被験者に操作させることで、プロトタイプのユーザビリティを評価するための仕組みです。シナリオ作成から被験者のテストをすべてオンラインで行うことができ、更に被験者の操作手順をクリックマップで表示したり録画することもでき、更にはChromeのアドインを有効化することで被験者の表情や声も同時に録画することができます。

今回のアップデートではこのテストシナリオの作成と結果の分析をより簡単に行えるように、UIが刷新されました。

f:id:gdayori:20200605193659p:plain

まとめとウェビナーのお知らせ

今回のアップデートでは、特にAngularなどのJavaScriptベースのモダンWeb開発向け製品のアップデートが、非常に多い内容となりました。それ以外にもBlazorなど新しいプラットフォームへの対応や、各主要な製品においても機能拡張を続けております。今後も弊社製品のアップデートにご期待下さい！

最後にセミナーのお知らせとなりますが、今回のリリース内容をデモを交えてご紹介するウェビナーを6月19日(金)に開催します。オンライン開催と言うことで非常に参加しやすくなっておりますので、以前のバージョンを利用されている方、過去に利用されていた方は是非ご参加くださいませ。

jp.infragistics.com

また、6月30日に年に１回の弊社イベントをオンライン開催致します。今年は「アフターコロナの開発」をテーマに各種セッションを用意しております。是非ご参加くださいませ。

jp.infragistics.com