2017 年 12 月 12 日に開催いたしました、「Infragistics Web Day 2017」において弊社テクニカル コンサルティング エンジニアの桐生達嗣 (@tatsushikiryu) がお話させていただいた際の資料です。Ignite UI for JavaScript / Ignite UI for Angular につきましては下記をご覧ください。https://jp.infragistics.com/products/ignite-ui

1. Infragistics Proprietary1
Web 開発 x インフラジスティックス
Now & Future

2. Infragistics Proprietary2
自己紹介
桐生 達嗣（きりゅうたつし）
 インフラジスティックス・ジャパン
 Technical Consulting Engineer
 略歴
 SI Company：Web アプリケーション開発
 UI・UX Tech Company：Web フロントエンド開発
 Mail：tkiryu@infragistics.com
 Twitter：@TatsushiKiryu

3. Infragistics Proprietary3
アジェンダ
1. インフラジスティックス（IG）のご紹介
2. これまでの Web、これまでの IG
3. これからの Web、これからの IG
4. IGの今後のロードマップ

4. Infragistics Proprietary4
インフラジスティックス
のご紹介

5. Infragistics Proprietary5
インフラジスティックス
イノベーションの歴史
全ての開発を行うお客様が、より良いユーザー エクスペリエンスを実現
するためのツール、ソリューションを提供
全世界で 200 万人以上の開発者の支持を獲得
ｚ
1989年創立
米国
本社オフィス
開設
2000年
Windows
Forms &
ASP.NET
対応製品
販売開始
2006 年
東京オフィス
開設
WPF 対応製品
販売開始
2008年
UX サービス
部門設立
2011年
HTML5/
Javascript
対応製品
販売開始
2012年
iOS 対応製品
販売開始
Indigo Studio
販売開始
2014年
Xamarin &
Android 対応
製品
販売開始
継続する
イノベー
ション
2016年
ReportPlus
Embedded
提供開始
2017年
Xamarin &
JavaScript 向け
Productivity
Packs 提供開始

6. Infragistics Proprietary6
1. UI コントロール
2. プロダクティビティ
ツール
3. エンタープライズ
サポート
コントロール、ツール、サポートで開発を支援
 高機能な UI コントロールで作りこみの工数を削減
 グリッド、チャート、エディター、ツリー
 プロダクティビティ ツールを利用し即座に
開発を開始、学習コスト、作業コストの低減
 グローバル、ローカルにおける
エンタープライズに対応したサポート
 優先/電話サポートに加え各種有償サービスをご提案
• テクニカル アカウント マネージャー
• オンサイト サポート
• 各種コンサルティング
• 延長サポート
 さまざまな業種のお客様へのサポート経験

7. Infragistics Proprietary7
これまでのWeb
これまでのIG

8. Infragistics Proprietary8
Browser
1990 1995 2000 2005 2010 2015 2017現在
Server  Java Servlet
 ASP
 JavaScript
 Java Applet
 DHTML
 PHP
 HTML 1.0
Client
1993 – 1999 年頃
Web黎明期
世界初Webブラウ
ザ
JavaScriptの誕生

9. Infragistics Proprietary9
 prototype.js
Browser
1990 1995 2000 2005 2010 2015 2017現在
Server  Struts
ASP.NET
 Flex
Silverlight
 FLASH
 Spring
 jQuery / UI
 Ruby on Rails
 Ajax HTML 4.01
Client
NetAdvantage for
Silverlight
NetAdvantage for
ASP.NET
1999 – 2009 年頃
RIAの隆盛
Ajaxの普及
jQueryの誕生

10. Infragistics Proprietary10
Browser
1990 1995 2000 2005 2010 2015 2017現在
Server
 ASP.NET MVC
 ASP.NET
Core
HTML5
 AngularJS
KnockoutJS ext
 Grunt ◆Gulp ◆Webpack
 React Angular
 Vue.js
Node.js
 TypeScript
 BACKBORN.JS
Ignite UI
Client
AngularJS ext React ext
Angular ext
 KnockoutJS
2009 年頃 - 現在
Node.jsの登場
HTML5の普及
JavaScript ライブラリ
戦国時代

11. Infragistics Proprietary11
これからのWeb
これからのIG

12. Infragistics Proprietary12
これからのWeb

13. Infragistics Proprietary13
これからの Web
 ますます Web で実現できることが増えていく
 Web 技術がどんどん高度化、複雑化していく
Progressive Web Apps
Web Assembly
WebVR
Web Payments
Offline対応・Push通知
C/C++バイナリの実行
Web上で3Dコンテンツ
Web上の決済
Web Components カスタムタグの作成

14. Infragistics Proprietary14
これからの Web
 今後ますます求められるもの
マルチデバイス対応 外部システム・クラウドサービス連携

15. Infragistics Proprietary15
これからの Web
 従来のアプリケーションアーキテクチャでは対応が難しい
マルチデバイス対応
UI描画 / データ入力
ビジネスロジック /
UI構築 / 画面遷移 / 状態管理
外部システム・クラウドサービス連携

16. Infragistics Proprietary16
これからの Web
 Web API 利用をベースとしたアプリケーションアーキテクチャ
 クライアントサイドの役割増大
マルチデバイス対応
ビジネスロジック
外部システム・クラウドサービス連携
UI描画 / データ入力 / UI構築 / 画面遷移 /
状態管理 / Web API 呼出
Web API ＝ データ連携

17. Infragistics Proprietary17
これからの Web
 Web 技術の高度化、複雑化
 クライアントサイドの役割増大
生産性
向上
開発
効率化
開発
標準化
保守性
向上
フレームワーク
開発支援ツール
＋
課題
コントロール
開発サイクル
の短期化

18. Infragistics Proprietary18
これからのIG

19. Infragistics Proprietary19
1. UI コントロール
2. プロダクティビティ
ツール
3. エンタープライズ
サポート
コントロール、ツール、サポートで開発を支援
 高機能な UI コントロールで作りこみの工数を削減
 グリッド、チャート、エディター、ツリー
 プロダクティビティ ツールを利用し即座に
開発を開始、学習コスト、作業コストの低減
 グローバル、ローカルにおける
エンタープライズに対応したサポート
 優先/電話サポートに加え各種有償サービスをご提案
• テクニカル アカウント マネージャー
• オンサイト サポート
• 各種コンサルティング
• 延長サポート
 さまざまな業種のお客様へのサポート経験

20. Infragistics Proprietary20
Angular への投資

21. Infragistics Proprietary21
Angular
 エンタープライズ開発での利用に最適
 Web アプリケーション開発のためのプラットフォーム（オールインワンフレー
ムワーク）
 コンポーネント指向アーキテクチャ。部品を作って組み合わせる。
 TypeScriptで開発。実装時の型チェック、IDEのコード補完。
 Angular CLI。ビルド/デバッグ/テスト環境、ひな形生成機能などの提供
 セマンティックバージョニング（SemVer：Semantic Versioning）
 メジャー、マイナー、パッチバージョンに意味を持たせる
 長期サポート（LTS：Long Term Support）

22. Infragistics Proprietary22
Component
Angular と エンタープライズ
生産性向上
開発効率化
開発標準化
保守性向上
TypeScript
LTS
Angular CLI
SemVer
開発サイクル
の短期化

23. Infragistics Proprietary23
2014年 2015年 2016年 2017年
AngularJS Angular
Angular のお問い合わせ件数

24. Infragistics Proprietary24
Ignite UI Family
新たに Angular プラットフォーム向けのUIコントロールを提供
jQuery
Angular
Ignite UI
for JavaScript
Ignite UI
for Angular
jQuery UI
NEW
1. 2.

25. Infragistics Proprietary25
Ignite UI for Angular
 100% Angular ベース、約30種類のマテリアルデザインのコントロール
 軽量、高速、モバイル、タブレット向け。今後、デスクトップ向けに拡充。
 継続的デリバリーによる素早い機能追加、バグフィックスの提供
 デュアル ライセンス: 非営利、教育目的の使用は無償
 Githubにて全てのソースコードをホスト
 npm で誰でもインストール可能
 npm install igniteui-js-blocks

26. Infragistics Proprietary26
プロダクティビティ
ツールへの投資

27. Infragistics Proprietary27
Sketch UI Kit
 Sketch とは、Mac で使用できるデザイン作成ツール
 Ignite UI for Angular 向けのデザイン素材
 Sketch を使って素早く画面デザインを作成
 素材からCSSを抽出して実装に使用可能

28. Infragistics Proprietary28
Ignite UI
for JavaScript
Ignite UI CLI
 インストールは npm install –g igniteui-cli
 数行のコマンドですぐに環境構築を完了、実行可能
 npm を利用して、製品の利用に必要な依存関係や参照設定を自動的に解決
※Node Package Manger（既にWeb開発においてデファクトスタンダードと
なっている無償のパッケージ管理ツール）
Ignite UI
for Angular

29. Infragistics Proprietary29
Demo

30. Infragistics Proprietary30
今後のロードマップ

31. Infragistics Proprietary31
Webへの投資

32. Infragistics Proprietary32
開発チーム
開発チーム3x
Web への投資
 開発チームへのリソース投資 3倍
 全プラットフォーム中 最大規模

33. Infragistics Proprietary33
UIコントロール

34. Infragistics Proprietary34
Ignite UI for Angular
 今後の開発における3本柱
 チャートコントロールの追加
 リアルタイムデータ、大量
データのサポート
 金融、財務系チャートのサ
ポート
ハイ
パフォーマンスUI
JavaScript
サイズ最小化
デザイン・開発
生産性向上
 グリッド機能の拡張
 列・行仮想化
 ヘッダー/明細表示
 セル内編集
 Excelライクフィルタリング
 列・行の固定
 Excel エクスポート

35. Infragistics Proprietary35
Ignite UI for JavaScript
 TypeScript、Web Components ベースへの移行
 特定のフレームワークに依存しない設計へ
 かつ、どんなフレームワークとも利用できるように
jQuery
Ignite UI
for JavaScript
jQuery UI
TypeScript
Web Components
Ignite UI
for JavaScript

36. Infragistics Proprietary36
プロダクティビティ
ツール

37. Infragistics Proprietary37
Ignite UI CLI
 コマンド（機能）の追加
 テンプレートの拡充

38. Infragistics Proprietary38
Ignite UI
for JavaScript
コンフィギュレーターの開発
 コントロールを視覚的にデザインできるツールを開発
 Visual Studio Code をはじめとしたコードエディターに対応
Ignite UI
for Angular
＆
※イメージです

39. Infragistics Proprietary39
開発プロセスへの
取り組み

40. Infragistics Proprietary40
 各フェーズごとに提供しているツールをシームレスに連携し、開発プロセス全
体の生産性を向上。
開発プロセスへの取り組み
デザイン プロトタイプ 実装
Sketch UI Kit Indigo Studio Ignite UI for
Angular

41. Infragistics Proprietary41
ぜひ今後の IG に
ご期待ください