お客様が望んでいるモダンデスクトップアプリとは？－傾向と対策－

Ken Azuma

インフラジスティックス・ジャパン

INFRAGISTICS 【名】

ɪnfrəˈdʒɪstɪks ： インフラジスティックス

1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェア製品を開発・販売するグローバルカンパニー

2. Infrastructure（基礎構造）+ logistics（後方支援）

3. 東京・原宿渋谷の会社【日本】

4. インフラさん【俗称】

Global

300+EMPLOYEES

5,000+In Japan

COMPANIES∞

Email, Phone

SUPPORT

25Years of Experience

#1Component VendorAccording to IDC Report

Readers Choice winnersJolt & Visual Studio Magazine

インフラジスティックス

Infragistics Developer Tools

ユーザーインターフェイス開発において、いかに生産性を高め、優れたUXを実現するための支援が出来るかを追求

•プロジェクトにおける工数の削減

•提案／設計時のラピッドプロトタイピングにも利用SIer

•自社製品の継続的アップグレードに伴う価値向上

•弊社製品による他のプラットフォームへの迅速な対応ISV

•セルフ開発スキーム確立における標準パーツとしての利用

•「作らない」ための弊社製品の利用In-house IT

• 開発／テスト双方における工数の削減• パフォーマンスの高さ（特にグリッド／チャート）• 手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能• 日本法人によるダイレクトサポート• サブスクリプション／アップグレードにおける継続的な価値向上（大小の機能追加及びバグフィックスを含む）

• ソースコードの開示（100万行以上の洗練されたコード！）• どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減

ご提供しているもの

開発ツール

モバイルビジネスアプリケーション

プロフェッショナルサービス

インフラジスティックスの各リージョン拠点

インフラジスティックスのポジショニングとGlobalの潮流

2010 2011 20122012 Share

(%)

2011-2012

Growth (%)

Infragistics Inc. 25.7 28.5 33.3 8.0 17.5

Telerik 23.2 27.9 32.0 7.7 14.7

GrapeCity 27.0 28.1 29.9 7.2 6.2

Developer Express 15.4 18.5 22.6 5.4 22.2

Rogue Wave Software 13.1 14.0 21.0 5.0 50.0

Dundas Data Visualization 13.5 14.5 16.8 4.0 15.9

Aspose 6.3 7.2 8.8 2.1 22.2

Syncfusion 6.9 7.7 8.6 2.1 12.4

Software FX 6.6 7.2 7.9 1.9 8.3

Xceed Software 6.5 6.9 7.4 1.8 7.2

Fujitsu 7.1 7.0 7.1 1.7 1.0

・・・・ ・・・・ ・・・・ ・・・・ ・・・・ ・・・・

All Total 372.3 390.1 417.5 100.0 7.0

Worldwide Software Construction Components Revenue by Vendor 2010 – 2012 ($M)

Data source : IDC , Application Development Software: Competitive Analysis

市場からのユーザーインターフェースに対するニーズの複雑化、多様化を受けての評価と考えております。

市場トレンドとユーザーニーズ

お客様が最適化されたUIをパーソナルユースで利用する時

仕事とはいえこのようなレベルの最適化されていないUIは受け入れられるだろうか？

UIの最適化？

世の中の傾向を見てみよう

「基幹システム＋画面」で画像検索

「エンタープライズシステム＋画面」で画像検索

皆さんの作っている画面と似ていましたか？

世の中の傾向を見てみよう

皆さんの作っているシステムには画面がいくつありますか？

複雑化するシステムのUI上の大きな問題点

単一の画面の使い勝手が悪い→配置されているコントロールの使い勝手による問題

マルチプラットフォームやタッチなど新技術への未対応→対応するための開発に手間がかかりすぎることの問題

目的の画面にたどりつけない→ナビゲーションシステムやメニューの問題

お客様のUIへのニーズはどこから来るか？

お客様は常になんらかのモチーフを頼りに仕様を決めている

複雑化するシステムのUI上の大きな問題点

単一の画面の使い勝手が悪い→配置されているコントロールの使い勝手による問題

マルチプラットフォームやタッチなど新技術への未対応→対応するための開発に手間がかかりすぎることの問題

目的の画面にたどりつけない→ナビゲーションシステムやメニューの問題

私達を取り巻く状況

なにが求められているのか？

Speed!!

変化への対応力!!

OSでサポートされる最新のIEがサポート対象

4.Xは4.5.2のみがサポート対象

UIを含むアプリケーションを「塩漬け」にすることはもはや現実的に不可能です。

2016年1月問題をご存知ですか？

ペースレイヤリング

差別化システム

記録システム

革新システム

もちろん、UIを含むアプリケーションは革新システム。その他のレベルと混同せずに扱っていく。

http://www.gartner.co.jp/b3i/research/110817_app/index.html

インフラジスティックスの提供できる価値

想定される状況

• スクラッチ開発では、ユーザー要件の変化のスピードに対応することが難しい

• 要件多様性にスピーディに応えるため「人」の数でカバー

• 開発者間でのスキル差により均一性の保持が困難• 開発するコントロールの「デザイン」への配慮

(Visual Designとプログラム開発は別モノ)

結果、膨大な時間工数、跳ね上がるコスト

インフラジスティックスの価値

高い生産性の実現

インフラジスティックスの価値

１．圧倒的に「機能」が豊富(開発工数を大幅に削減できる)

２．最初から高度なパフォーマンスチューニング済み(非機能要件を高めるための開発コストを抑制できる)

３．ビジュアルデザインを独立して設定プリセットのスタイルも多数用意

高い生産性の実現とは？

全ては多様化するユーザーニーズに応えるための取り組み

UIコントロールの位置づけと標準コントロールでの限界点

ユーザー要件 実装

UIコントロール = 再利用可能な部品であるべき

標準コントロール /

標準コントロール + α機能数の限界により出来ることが限られている開発者の嗜好に偏るため、実質的な再利用が難しいことが多い

標準コントロールを使用した開発での限界点

圧倒的に豊富な「機能」がもたらすもの

1次開発

2次開発

UIコントロールの開発

プログラム画面を開発

設計

開発

テスト

設計

開発

テスト

終了

標準コントロールインフラジスティックス・コントロール

多機能によりユーザーの要求を「コントロールレベル」で拾うことができる

差

「グリッド」で見る標準コントロールとの機能数の違い

分類 機能名 標準グリッド IGグリッド行制御 行セレクター ○ ○選択 行選択 ○ ○選択 セル選択 ○ ○選択 列選択 × ○データ制御 IDataErrorInfo サポート ○ ○データ制御 アクティブ化 × ○データ操作 行削除 ○ ○データ操作 グループ化 ○ ○データ操作 コピー操作 ○ ○データ操作 新規行追加 ○ ○データ操作 ソート ○ ○データ操作 データ編集 ○ ○データ操作 貼り付け操作 ○ ○データ操作 フィルタリング × ○データ操作 ページング × ○データのバインド DataContext バインディング ○ ○データのバインド IList/IEnumerable バインディング ○ ○データ表示 Right to Left サポート ○ ○データ表示 暗黙的なデータ テンプレート ○ ○データ表示 階層データ × ○データ表示 自己参照型データ ○ ○データ表示 集計行 × ○データ表示 条件付き書式 × ○データ表示 セル結合 × ○データ表示 多段列ヘッダ × ○データ表示 ツールチップ ○ ○データ表示 データの書式設定 ○ ○データ表示 データの注釈 ○ ○データ表示 文字列インデクサー サポート ○ ○パフォーマンス 遅延スクロール × ○列制御 固定列 - 左固定 ○ ○列制御 固定列 - 右固定 × ○列制御 列移動 - 即時 × ○列制御 列移動 - 遅延 ○ ○列制御 列サイズの変更 ○ ○列制御 列の選択ダイアログ × ○列の種類 DateTime 列 × ○列の種類 画像列 × ○列の種類 コンボボックス列 ○ ○列の種類 スパークライン列 × ○列の種類 チェックボックス列 ○ ○列の種類 テキスト列 ○ ○列の種類 テンプレート列 ○ ○列の種類 ハイパーリンク列 ○ ○列の種類 日付列 × ○列の種類 非バインド列 × ○列の種類 複数列コンボエディター列 × ○

集計 28 47

分類 機能名 GridView WebDataGrid選択 セル選択 ○ ○

選択 行選択 ○ ○

選択 列選択 × ○

データ操作 ページング ○ ○

データ操作 フィルタリング UI × ○

データ操作 Excel スタイルフィルタリング UI × ○

データ操作 ソート ○ ○

データ操作 アクティブ化 × ○

データ操作 行編集テンプレート × ○

データ操作 セル編集 ○ ○

データ操作 コピー操作 × ○

データ操作 一括更新 × ○

データ操作 逐次更新 ○ ○

データ操作 新規行追加 ○ ○

データ操作 行削除 ○ ○

データ操作 グループ化 × ○

データ操作 貼り付け操作 × ○

データのバインド Ajax グリッド × ○

データのバインド 階層データ × ○

データのバインド 自己参照型データ ○ ○

データ表示 ヘッダー テンプレート ○ ○

データ表示 フッター テンプレート ○ ○

データ表示 空行テンプレート ○ ○

データ表示 エラー テンプレート × ○

データ表示 集計行 × ○

データ表示 セル結合 × ○

データ表示 行セレクター ○ ○

パフォーマンス 仮想スクロール × ○

列制御 固定列（左右） × ○

列制御 列移動（即時、遅延） × ○

列制御 列サイズの変更 × ○

列の種類 バインド列 ○ ○

列の種類 チェックボックス列 ○ ○

列の種類 ハイパーリンク列 ○ ×

列の種類 画像列 ○ ×

列の種類 ボタン列 ○ ×

列の種類 コマンド列 ○ ×

列の種類 テンプレート列 ○ ○

列の種類 DynamicData列 ○ ×

列の種類 非バインド列 × ○

集計 21 35

WPFの場合 ASP.NETの場合

多様化するユーザー要件と高度化する技術の難易度

• 列の『右』固定

• 行列のグループ化

• ・・・・・

• 仮想化

• タッチへの対応

・

・

技術の難易度容易

高度

例) 標準の「グリッド」コントロールに対する追加開発の場合ユーザー要件

具体的な開発作業レベルで考えると

標準コントロールに無い機能を追加開発する。例)「 グリッド」の列の『右』固定する作業の場合

実現可否の判断 :

設計作業工数 :

開発作業工数 :

テスト作業工数 :

性能チューニング :

1 – 2日

2 – 3日

4 – 5日

1 – 2日

6 – 8日

合計 : 14 – 20日

A) 標準コントロールを使用しての追加開発 B) インフラジスティックス UIコントロールを使用

プログラムのセットアップ :

プロパティの設定 :

テスト作業工数 :

性能チューニング :

＜ 0.5日

＜ 0.5日

0日

0日

合計 : ＜1.0日

最初からパフォーマンスチューニング済み

• 数々のお客様からのフィードバックを基に、お客様での業務を想定したパフォーマンスチューニングと検証を実施

• パフォーマンスホワイトペーパーの形で公開http://jp.infragistics.com/innovations/performance-whitepapers.aspx

パフォーマンス検証例 - 1

• 業界最速の ASP.NET AJAX データグリッド

– 対象コントロール：WebDataGrid

– テスト内容：IE7のブラウザ描画速度

– 想定業務：銀行、コール センター、保険会社等のWebアプリ操作

– Aikido フレームワークで作成し、ASP.NET AJAX の軽量クライアントとサーバーの間にメッセージングを使用することによりパフォーマンスを向上

弊社製品 競合製品 I 競合製品 II

ページング 174 210 21% 遅い 447 157% 遅い

数値の並べ替え 535 561 4% 遅い 800 49% 遅い

文字列の並べ替え 549 576 4% 遅い 828 50% 遅い

数値フィルタリング 172 193 12% 遅い 491 185% 遅い

文字列フィルタリング 191 223 16% 遅い 515 169% 遅い

■描画時間 (ミリ秒) ※データ (10 列および 30 万行)

パフォーマンス検証例 - 2• 業界最速の Silverlightデータグリッド

– 対象コントロール：XamGrid

– テスト内容：xamGrid をさまざまな ItemSource へバインドし、LayoutUpdated イベントの描画にかかった時間を測定

– 想定操作：データの読み込み時のエンド ユーザーの待ち時間を測定■ 描画に要した時間 ※IList へバインド - 10 列、1,000,000 行のデータ

弊社製品 競合製品 I 競合製品 II

所要時間 (ms) 1,028 2,050 99% 遅い 1,962 90% 遅い

メモリ使用量- テスト前(KB)

91,852 88,964 0.3% 少ない 90,683 0.1% 多い

メモリ使用量- テスト後(KB)

91,762 144,394 57% 多い 128,511 40% 多い

■ 描画に要した時間 ※ObservableCollection へバインド - 10 列、1,000,000 行のデータ

弊社製品 競合製品 I 競合製品 II

所要時間 (ms) 1,028 2,025 96% 遅い 1,962 90% 遅い

メモリ使用量 - テスト前(Kb)

91,852 91,360 等しい 90,660 1% 少ない

メモリ使用量 - テスト後(Kb)

91,762 113,795 24% 多い 128,207 39% 多い

デザインとプログラム開発の関係性

• Visual Designとプログラム開発は別モノ

• 両者を成立させる手法として

A) デザイン側とプログラム開発側が共同で作業を進める

B) 先に「標準化」をした上で、それぞれに作業をセパレートして進める

→ インフラジスティックスはB)の手法でUIコントロールを開発

→ 標準化されたものに基づいて各技術プラットフォーム向けに各々デザイン支援機能を提供

統一感の高いアプリケーションを可能にするデザイン支援機能 (Windows Forms/ASP.NET)

デザイナーと開発者の分業を可能に！

AppStylist

コードによる設定は一切必要なく、各コントロールの外観設定を一括してデザイン

(Windows Forms / ASP.NETに搭載)

統一感の高いアプリケーションを可能にするデザイン支援機能 (XAML)

リソースウォッシング機能

基本色を1色選択するだけでアプリケーションの外観をキレイにスタイリング

統一感の高いアプリケーションを可能にするデザイン支援機能 (jquery/HTML)

Theme roller のサポート

導入事例

カブドットコム証券株式会社様

• NetAdvantage（Windows Forms）を採用し、大幅に開発効率を向上（通常3～4ヶ月→1ヶ月に短縮）

• Gridのソートや列の並び替え機能やツリー、ツールバー機能等を活用→開発工数の削減

• デザインツールAppStylistにより、アプリの外観を一元的に設定・管理→デザイン工数の削減

※詳細http://jp.infragistics.com/jirei/kabudotcom.aspx

株価情報の一覧表示画面

発注パネル

利用のポイント／傾向

ユーザーインターフェイス開発において、いかに生産性を高め、優れたUXを実現するための支援が出来るかを追求

•プロジェクトにおける工数の削減

•提案／設計時のラピッドプロトタイピングにも利用SIer

•自社製品の継続的アップグレードに伴う価値向上

•弊社製品による他のプラットフォームへの迅速な対応ISV

•セルフ開発スキーム確立における標準パーツとしての利用

•「作らない」ための弊社製品の利用In-house IT

• 開発／テスト双方における工数の削減• パフォーマンスの高さ（特にグリッド／チャート）• 手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能• 日本法人によるダイレクトサポート• サブスクリプション／アップグレードにおける継続的な価値向上（大小の機能追加及びバグフィックスを含む）

• ソースコードの開示（100万行以上の洗練されたコード！）• どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減

70%

20%

10%

利用のポイント／傾向

ユーザーインターフェイス開発において、いかに生産性を高め、優れたUXを実現するための支援が出来るかを追求

•プロジェクトにおける工数の削減

•提案／設計時のラピッドプロトタイピングにも利用SIer

•自社製品の継続的アップグレードに伴う価値向上

•弊社製品による他のプラットフォームへの迅速な対応ISV

•セルフ開発スキーム確立における標準パーツとしての利用

•「作らない」ための弊社製品の利用In-house IT

• 開発／テスト双方における工数の削減• パフォーマンスの高さ（特にグリッド／チャート）• 手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能• 日本法人によるダイレクトサポート• サブスクリプション／アップグレードにおける継続的な価値向上（大小の機能追加及びバグフィックスを含む）

• ソースコードの開示（100万行以上の洗練されたコード！）• どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減

05%

20%

75%

海の向こうでは…

IS / IT 部門が Self Development を推進、“手札” としてのツールが一般化

リスクを自組織でとって開発、責任の委譲、分散は開発スピードの低下 = 競合との競争に打ち勝てない

モバイルだけにとどまらず、グローバルで一般化

日本においては

お客様に寄り添い、その業務を深く知るSierの皆様が重要な役割を担っている

グローバルの状況が必ずしも日本に当てはまるわけではないが、一層の開発高速化が

望まれていることは事実です

顧客への独自の価値提供に集中して頂き、部品は部品屋にお任せください！

ご提案製品 – 『Infragistics Ultimate』

• 『Infragistics Ultimate 』

– Infragisiticsが提供する全てのUI開発コントロールに加え、Infragistics ICONS、プロトタイピング & デザイン ツール Indigo Studio がバンドルされた UI・UX 統合開発スイート

「Infragistics Ultimate」にバンドルされる製品群 (全12製品)(UI開発ツール)

ASP.NET / Windows Forms Silverlight / WPFReporting / Ignite UINUCLiOS / Windows UI Windows Phone / Android

(プロトタイピング&デザインツール)Indigo Studio / ICONS