お客様が望んでいるモダンデスクトップアプリとは？／傾向と対策 Part1
•
1 like•1,512 views
11/25 に日本マイクロソフト株式会社で開催されたデスクトップ アプリ最新化セミナーにおいて弊社東がお話させていただいた内容です。詳細については http://jp.infragistics.com をご覧ください。
Recommended
More Related Content
Similar to お客様が望んでいるモダンデスクトップアプリとは？／傾向と対策 Part1
Similar to お客様が望んでいるモダンデスクトップアプリとは？／傾向と対策 Part1 (20)
More from インフラジスティックス・ジャパン株式会社
More from インフラジスティックス・ジャパン株式会社 (20)
お客様が望んでいるモダンデスクトップアプリとは？／傾向と対策 Part1
- 1. お客様が望んでいる モダンデスクトップアプリとは？ －傾向と対策－ Ken Azuma インフラジスティックス・ジャパン
- 2. INFRAGISTICS 【名】 ɪnfrəˈdʒɪstɪks：インフラジスティックス 1.ニュージャージーに本社を置くUIコントロールを中心としたソ フトウェア製品を開発・販売するグローバルカンパニー 2.Infrastructure（基礎構造）+ logistics（後方支 援） 3.東京・原宿渋谷の会社【日本】 4.インフラさん【俗称】
- 3. Global 300+ EMPLOYEES 5,000+ In Japan COMPANIES ∞ Email, Phone SUPPORT 25 Years of Experience #1 Component Vendor According to IDC Report Readers Choice winners Jolt & Visual Studio Magazine インフラジスティックス
- 4. Infragistics Developer Tools ユーザーインターフェイス開発において、いかに生産性を高め、 優れたUXを実現するための支援が出来るかを追求 •プロジェクトにおける工数の削減 •提案／設計時のラピッドプロトタイピングにも利用 SIer •自社製品の継続的アップグレードに伴う価値向上 •弊社製品による他のプラットフォームへの迅速な対応 ISV •セルフ開発スキーム確立における標準パーツとしての利用 •「作らない」ための弊社製品の利用 In-house IT •開発／テスト双方における工数の削減 •パフォーマンスの高さ（特にグリッド／チャート） •手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能 •日本法人によるダイレクトサポート •サブスクリプション／アップグレードにおける継続的な価値向上（大小の機能追加及びバグフィックスを含む） •ソースコードの開示（100万行以上の洗練されたコード！） •どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減
- 5. ご提供しているもの 開発ツール モバイルビジネスアプリケーション プロフェッショナルサービス
- 7. インフラジスティックスのポジショニングとGlobalの潮流 2010 2011 2012 2012 Share (%) 2011-2012Growth (%) 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 DundasData 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 XceedSoftware 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 市場からのユーザーインターフェースに対するニーズの複雑化、多様化を受けての評価と考えております。
- 12. UIの最適化？
- 13. 世の中の傾向を見てみよう 「基幹システム＋画面」で画像検索 「エンタープライズシステム＋画面」で画像検索 皆さんの作っている画面と似ていましたか？
- 15. 複雑化するシステムのUI上の大きな問題点 単一の画面の使い勝手が悪い →配置されているコントロールの使い勝手による問題 マルチプラットフォームやタッチなど新技術への未対応 →対応するための開発に手間がかかりすぎることの問題 目的の画面にたどりつけない →ナビゲーションシステムやメニューの問題
- 17. 複雑化するシステムのUI上の大きな問題点 単一の画面の使い勝手が悪い →配置されているコントロールの使い勝手による問題 マルチプラットフォームやタッチなど新技術への未対応 →対応するための開発に手間がかかりすぎることの問題 目的の画面にたどりつけない →ナビゲーションシステムやメニューの問題
- 18. 私達を 取り巻く状況
- 20. OSでサポートされる最新のIEがサポート対象 4.Xは4.5.2のみがサポート対象 UIを含むアプリケーションを「塩漬け」にすることは もはや現実的に不可能です。 2016年1月問題をご存知ですか？
- 21. ペースレイヤリング 差別化システム 記録システム 革新システム もちろん、UIを含むアプリケーションは革新システム。 その他のレベルと混同せずに扱っていく。 http://www.gartner.co.jp/b3i/research/110817_app/index.html
- 23. 想定される状況 •スクラッチ開発では、ユーザー要件の変化のス ピードに対応することが難しい •要件多様性にスピーディに応えるため「人」の数 でカバー •開発者間でのスキル差により均一性の保持が困難 •開発するコントロールの「デザイン」への配慮 (Visual Designとプログラム開発は別モノ) 結果、膨大な時間工数、跳ね上がるコスト
- 25. インフラジスティックスの価値 １．圧倒的に「機能」が豊富 (開発工数を大幅に削減できる) ２．最初から高度なパフォーマンスチューニング済み (非機能要件を高めるための開発コストを抑制できる) ３．ビジュアルデザインを独立して設定 プリセットのスタイルも多数用意 高い生産性の実現とは？ 全ては多様化するユーザーニーズに応えるための取り組み
- 26. UIコントロールの位置づけと標準コントロールでの限界点 ユーザー要件 実装 UIコントロール= 再利用可能な部品であるべき 標準コントロール/ 標準コントロール+ α 機能数の限界により出来ることが限られている 開発者の嗜好に偏るため、実質的な再利用が難しいことが多い 標準コントロールを使用した開発での限界点
- 27. 圧倒的に豊富な「機能」がもたらすもの 1次開発 2次開発 UIコントロールの開発 プログラム画面を開発 設計 開発 テスト 設計 開発 テスト 終了 標準コントロール インフラジスティックス・ コントロール 多機能によりユーザーの要求を「コントロールレベル」で拾うことができる 差
- 28. 「グリッド」で見る標準コントロールとの機能数の違い 分類 機能名 標準グリッド IGグリッド 行制御 行セレクター ○ ○ 選択 行選択 ○ ○ 選択 セル選択 ○ ○ 選択 列選択 × ○ データ制御 IDataErrorInfo サポート ○ ○ データ制御 アクティブ化 × ○ データ操作 行削除 ○ ○ データ操作 グループ化 ○ ○ データ操作 コピー操作 ○ ○ データ操作 新規行追加 ○ ○ データ操作 ソート ○ ○ データ操作 データ編集 ○ ○ データ操作 貼り付け操作 ○ ○ データ操作 フィルタリング × ○ データ操作 ページング × ○ データのバインド DataContextバインディング ○ ○ データのバインド IList/IEnumerableバインディング ○ ○ データ表示 Right to Left サポート ○ ○ データ表示 暗黙的なデータテンプレート ○ ○ データ表示 階層データ × ○ データ表示 自己参照型データ ○ ○ データ表示 集計行 × ○ データ表示 条件付き書式 × ○ データ表示 セル結合 × ○ データ表示 多段列ヘッダ × ○ データ表示 ツールチップ ○ ○ データ表示 データの書式設定 ○ ○ データ表示 データの注釈 ○ ○ データ表示 文字列インデクサーサポート ○ ○ パフォーマンス 遅延スクロール × ○ 列制御 固定列-左固定 ○ ○ 列制御 固定列-右固定 × ○ 列制御 列移動-即時 × ○ 列制御 列移動-遅延 ○ ○ 列制御 列サイズの変更 ○ ○ 列制御 列の選択ダイアログ × ○ 列の種類 DateTime 列 × ○ 列の種類 画像列 × ○ 列の種類 コンボボックス列 ○ ○ 列の種類 スパークライン列 × ○ 列の種類 チェックボックス列 ○ ○ 列の種類 テキスト列 ○ ○ 列の種類 テンプレート列 ○ ○ 列の種類 ハイパーリンク列 ○ ○ 列の種類 日付列 × ○ 列の種類 非バインド列 × ○ 列の種類 複数列コンボエディター列 × ○ 集計 28 47 分類 機能名 GridView WebDataGrid 選択 セル選択 ○ ○ 選択 行選択 ○ ○ 選択 列選択 × ○ データ操作 ページング ○ ○ データ操作 フィルタリングUI × ○ データ操作 Excel スタイルフィルタリングUI × ○ データ操作 ソート ○ ○ データ操作 アクティブ化 × ○ データ操作 行編集テンプレート × ○ データ操作 セル編集 ○ ○ データ操作 コピー操作 × ○ データ操作 一括更新 × ○ データ操作 逐次更新 ○ ○ データ操作 新規行追加 ○ ○ データ操作 行削除 ○ ○ データ操作 グループ化 × ○ データ操作 貼り付け操作 × ○ データのバインド Ajax グリッド × ○ データのバインド 階層データ × ○ データのバインド 自己参照型データ ○ ○ データ表示 ヘッダーテンプレート ○ ○ データ表示 フッターテンプレート ○ ○ データ表示 空行テンプレート ○ ○ データ表示 エラーテンプレート × ○ データ表示 集計行 × ○ データ表示 セル結合 × ○ データ表示 行セレクター ○ ○ パフォーマンス 仮想スクロール × ○ 列制御 固定列（左右） × ○ 列制御 列移動（即時、遅延） × ○ 列制御 列サイズの変更 × ○ 列の種類 バインド列 ○ ○ 列の種類 チェックボックス列 ○ ○ 列の種類 ハイパーリンク列 ○ × 列の種類 画像列 ○ × 列の種類 ボタン列 ○ × 列の種類 コマンド列 ○ × 列の種類 テンプレート列 ○ ○ 列の種類 DynamicData列 ○ × 列の種類 非バインド列 × ○ 集計 21 35 WPFの場合 ASP.NETの場合
- 29. 多様化するユーザー要件と高度化する技術の難易度 •列の『右』固定 •行列のグループ化 •・・・・・ •仮想化 •タッチへの対応 ・ ・ 技術の難易度 容易 高度 例) 標準の「グリッド」コントロールに対する追加開発の場合 ユーザー要件
- 30. 具体的な開発作業レベルで考えると 標準コントロールに無い機能を追加開発する。 例)「グリッド」の列の『右』固定する作業の場合 実現可否の判断: 設計作業工数: 開発作業工数: テスト作業工数: 性能チューニング: 1 –2日 2 –3日 4 –5日 1 –2日 6 –8日 合計: 14 –20日 A) 標準コントロールを使用しての追加開発 B) インフラジスティックスUIコントロールを使用 プログラムのセットアップ: プロパティの設定: テスト作業工数: 性能チューニング: ＜0.5日 ＜0.5日 0日 0日 合計: ＜1.0日
- 31. 最初からパフォーマンスチューニング済み •数々のお客様からのフィードバックを基に、お客 様での業務を想定したパフォーマンスチューニン グと検証を実施 •パフォーマンスホワイトペーパーの形で公開 http://jp.infragistics.com/innovations/performance-whitepapers.aspx
- 32. パフォーマンス検証例-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 万行)
- 33. パフォーマンス検証例-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% 多い
- 34. デザインとプログラム開発の関係性 •Visual Designとプログラム開発は別モノ •両者を成立させる手法として A)デザイン側とプログラム開発側が共同で作業を進める B)先に「標準化」をした上で、それぞれに作業をセパ レートして進める → インフラジスティックスはB)の手法でUIコントロールを 開発 → 標準化されたものに基づいて各技術プラットフォーム向 けに各々デザイン支援機能を提供
- 35. 統一感の高いアプリケーションを可能にする デザイン支援機能(Windows Forms/ASP.NET) デザイナーと開発者の分業を可能に！ AppStylist コードによる設定は一切必要なく、 各コントロールの外観設定を 一括してデザイン (Windows Forms / ASP.NETに搭載)
- 36. 統一感の高いアプリケーションを可能にする デザイン支援機能(XAML) リソース ウォッシング機能 基本色を1色選択するだけで アプリケーションの外観を キレイにスタイリング
- 37. 統一感の高いアプリケーションを可能にする デザイン支援機能(jquery/HTML) Theme rollerのサポート
- 38. 導入事例 カブドットコム証券株式会社様 •NetAdvantage（WindowsForms） を採用し、大幅に開発効率を向上 （通常3～4ヶ月→1ヶ月に短縮） •Gridのソートや列の並び替え機能や ツリー、ツールバー機能等を活用 →開発工数の削減 •デザインツールAppStylistにより、 アプリの外観を一元的に設定・管理 →デザイン工数の削減 ※詳細 http://jp.infragistics.com/jirei/kabudotcom.aspx 株価情報の一覧表示画面 発注パネル
- 39. 利用のポイント／傾向 ユーザーインターフェイス開発において、いかに生産性を高め、 優れたUXを実現するための支援が出来るかを追求 •プロジェクトにおける工数の削減 •提案／設計時のラピッドプロトタイピングにも利用 SIer •自社製品の継続的アップグレードに伴う価値向上 •弊社製品による他のプラットフォームへの迅速な対応 ISV •セルフ開発スキーム確立における標準パーツとしての利用 •「作らない」ための弊社製品の利用 In-house IT •開発／テスト双方における工数の削減 •パフォーマンスの高さ（特にグリッド／チャート） •手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能 •日本法人によるダイレクトサポート •サブスクリプション／アップグレードにおける継続的な価値向上（大小の機能追加及びバグフィックスを含む） •ソースコードの開示（100万行以上の洗練されたコード！） •どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減 70% 20% 10%
- 40. 利用のポイント／傾向 ユーザーインターフェイス開発において、いかに生産性を高め、 優れたUXを実現するための支援が出来るかを追求 •プロジェクトにおける工数の削減 •提案／設計時のラピッドプロトタイピングにも利用 SIer •自社製品の継続的アップグレードに伴う価値向上 •弊社製品による他のプラットフォームへの迅速な対応 ISV •セルフ開発スキーム確立における標準パーツとしての利用 •「作らない」ための弊社製品の利用 In-house IT •開発／テスト双方における工数の削減 •パフォーマンスの高さ（特にグリッド／チャート） •手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能 •日本法人によるダイレクトサポート •サブスクリプション／アップグレードにおける継続的な価値向上（大小の機能追加及びバグフィックスを含む） •ソースコードの開示（100万行以上の洗練されたコード！） •どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる学習コストの削減 05% 20% 75%
- 41. 海の向こうでは… IS / IT 部門がSelf Development を 推進、“手札” としてのツールが一般化 リスクを自組織でとって開発、責任の委 譲、分散は開発スピードの低下= 競合と の競争に打ち勝てない モバイルだけにとどまらず、 グローバルで一般化
- 42. 日本においては お客様に寄り添い、その業務を深く知る Sierの皆様が重要な役割を担っている グローバルの状況が必ずしも日本に当ては まるわけではないが、一層の開発高速化が 望まれていることは事実です 顧客への独自の価値提供に集中して頂き、 部品は部品屋にお任せください！
- 44. ご提案製品–『Infragistics Ultimate』 •『Infragistics Ultimate』 –Infragisiticsが提供する全てのUI開発コントロールに加え、Infragistics ICONS、プロトタイピング& デザインツールIndigo Studio がバンド ルされたUI・UX 統合開発スイート 「Infragistics Ultimate」にバンドルされる製品群(全12製品) (UI開発ツール) ASP.NET/ Windows Forms Silverlight / WPF Reporting / Ignite UI NUCLiOS/ Windows UI Windows Phone/ Android (プロトタイピング&デザインツール) Indigo Studio / ICONS