Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
エンタープライズWebアプリ
ケーションにおけるUIの重要性
グレープシティ 森谷 勝
グレープシティは1993年以来、20年以上にわたりシステム開発に必要な「開発支援
ツール」を提供しています。
グレープシティとしてのこだわりは、多くのITテクノロジーがグローバルでの利用を
考えた設計となっているところ、日本の業務システムの仕様...
グレープシティの「開発支援ツール」
ITは見えないところで私たちの生活を支えています。
そのシステム開発の負担を少しでも軽減すること、また、人々の役に立つシステム開
発のお手伝いをすることを、私たちは誇りとしています。
UIを支援するツール
グレープシティの「開発支援ツール」はUIを支援するツール。
長年、グリッド、入力支援、帳票印刷などの機能を追求してきました。
ユーザーインターフェイスの重要性
なぜエンタープライズWebアプリケーションにお
いてユーザーインターフェイスが重要なのか?
それは、実際にシステムを利用するエンドユー
ザーの「業務の生産性向上」に大きく影響するか
らと考えています。
「業務の...
これまでのセッション(振返り)
・Angular ユーザーなら押さえておきたい!
TypeScript と Visual Studio Code の基礎と活用
・Angularに対するこれまでのNRIの取り組み
・大規模エンタープライズでのAn...
いまのWebに求められるUI
Angularに対応したUIライブラリ
操作感はクライアントアプリに近い
具体的にどのようなUIが求められるか?
・操作性
・視認性
操作性
データの直接編集
キー入力により自動的に編集を開始して値設定が可能
セル非編集状態から
キーボードで[9]を
入力
業務で使うグリッドに求められること
コピー&ペースト(複数行/複数列)
同一グリッド上でコピー&ペースト
Excelとのコピー&ペースト
FlexGrid
Excel
業務で使うグリッドに求められること
キーボード操作
Excelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能
キー 動作
[Enter] 下方向セル移動
[Shift]+[Enter] 上方向セル移動
[Tab] 右方向セル移動
[Shift]+[Tab] 左方向...
フィルターとソート
Excelのようなフィルターとソート
業務で使うグリッドに求められること
スクロールの固定
業務で使うグリッドに求められること
Excel資産の活用
数式と関数
Spread.Sheetsは、日付、財務、統計、検
索、文字列など380種以上のExcel関数をサ
ポートしています。
ほぼ全ての表計算関数がExcel互換となって
おり、Excelファイルをインポートした場合
も集計結果を高い精度...
視認性
UIの描画はクライアントへ
昔のグラフはサーバサイドで画像へ
今はクライアントでレンダリング
1レコードを複数行で表示
紙のレイアウトを再現
日付に関連する表現
タスクや工程の管理
画像と関連付けされるデータ
モバイルでの視認性
モバイルでの視認性
多彩な機能がオールインワン
グリッド チャート/ゲージ
入力
ピボットテーブル
Excel/PDF出力複数行グリッド
2つの高性能コントロール
Spread.Sheets Spread.Views
SPREADJS
Wijmoの採用事例
弥生株式会社様
http://wijmo.c1.grapecity.com/casestudy_yayoi/
株式会社インテリジェンス様
http://wijmo.c1.grapecity.com/casestudy_in...
SpreadJSの採用事例
リックソフト株式会社様
http://jp.spread.grapecity.com/spreadjs/case/ricksoft/
リックソフト株式会社様は、プ
ロジェクト管理ツール「JIRA」
とプロジェクト管理...
お問合わせ窓口
JavaScriptライブラリに関する
お問合せ窓口
Eメール : sales@grapecity.com
電話番号: 048-222-3001
営業時間: AM9:00~12:00
PM1:00~5:30
(月~金)
Java...
Upcoming SlideShare
Loading in …5
×

エンタープライズWebアプリケーションにおけるUIの重要性

138 views

Published on

2017年10月27日「GrapeCity Angular Day」セッション4
グレープシティ株式会社 ツール事業部 営業部
テクニカルセールス 森谷 勝

Published in: Business
  • Be the first to comment

  • Be the first to like this

エンタープライズWebアプリケーションにおけるUIの重要性

  1. 1. エンタープライズWebアプリ ケーションにおけるUIの重要性 グレープシティ 森谷 勝
  2. 2. グレープシティは1993年以来、20年以上にわたりシステム開発に必要な「開発支援 ツール」を提供しています。 グレープシティとしてのこだわりは、多くのITテクノロジーがグローバルでの利用を 考えた設計となっているところ、日本の業務システムの仕様に合わせた形に最適化し ながら製品リリースをしています。
  3. 3. グレープシティの「開発支援ツール」 ITは見えないところで私たちの生活を支えています。 そのシステム開発の負担を少しでも軽減すること、また、人々の役に立つシステム開 発のお手伝いをすることを、私たちは誇りとしています。
  4. 4. UIを支援するツール グレープシティの「開発支援ツール」はUIを支援するツール。 長年、グリッド、入力支援、帳票印刷などの機能を追求してきました。
  5. 5. ユーザーインターフェイスの重要性 なぜエンタープライズWebアプリケーションにお いてユーザーインターフェイスが重要なのか? それは、実際にシステムを利用するエンドユー ザーの「業務の生産性向上」に大きく影響するか らと考えています。 「業務の生産性向上」を実現するには、システム における使いやすいユーザーインターフェイスが 重要になります。
  6. 6. これまでのセッション(振返り) ・Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用 ・Angularに対するこれまでのNRIの取り組み ・大規模エンタープライズでのAngular利用事例 Angularを中心としたテクノロジーがもたらす、生産性、標準化、 はシステム構築において恩恵がある(エンジニアのメリット) では、エンドユーザーのメリットは? →強固なシステムが出来る(安定稼働) →システムの拡張時の生産性が高い →保守性が高い
  7. 7. いまのWebに求められるUI Angularに対応したUIライブラリ 操作感はクライアントアプリに近い 具体的にどのようなUIが求められるか? ・操作性 ・視認性
  8. 8. 操作性
  9. 9. データの直接編集 キー入力により自動的に編集を開始して値設定が可能 セル非編集状態から キーボードで[9]を 入力 業務で使うグリッドに求められること
  10. 10. コピー&ペースト(複数行/複数列) 同一グリッド上でコピー&ペースト Excelとのコピー&ペースト FlexGrid Excel 業務で使うグリッドに求められること
  11. 11. キーボード操作 Excelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能 キー 動作 [Enter] 下方向セル移動 [Shift]+[Enter] 上方向セル移動 [Tab] 右方向セル移動 [Shift]+[Tab] 左方向セル移動 [F2] セル編集開始 [Ctl]+[A] セル全選択 [Ctl]+[C] コピー [Ctl]+[V] ペースト 業務で使うグリッドに求められること
  12. 12. フィルターとソート Excelのようなフィルターとソート 業務で使うグリッドに求められること
  13. 13. スクロールの固定 業務で使うグリッドに求められること
  14. 14. Excel資産の活用
  15. 15. 数式と関数 Spread.Sheetsは、日付、財務、統計、検 索、文字列など380種以上のExcel関数をサ ポートしています。 ほぼ全ての表計算関数がExcel互換となって おり、Excelファイルをインポートした場合 も集計結果を高い精度で再現します。 書式設定 Spread.Sheetsは、Excelと同様の書式文字 列を使用して、セルデータの表示形式を柔 軟に設定できます。日本市場に欠かせない 和暦日付や通貨記号表示にもしっかり対応 しています。 Excel資産の活用
  16. 16. 視認性
  17. 17. UIの描画はクライアントへ 昔のグラフはサーバサイドで画像へ 今はクライアントでレンダリング
  18. 18. 1レコードを複数行で表示
  19. 19. 紙のレイアウトを再現
  20. 20. 日付に関連する表現
  21. 21. タスクや工程の管理
  22. 22. 画像と関連付けされるデータ
  23. 23. モバイルでの視認性
  24. 24. モバイルでの視認性
  25. 25. 多彩な機能がオールインワン グリッド チャート/ゲージ 入力 ピボットテーブル Excel/PDF出力複数行グリッド
  26. 26. 2つの高性能コントロール Spread.Sheets Spread.Views SPREADJS
  27. 27. Wijmoの採用事例 弥生株式会社様 http://wijmo.c1.grapecity.com/casestudy_yayoi/ 株式会社インテリジェンス様 http://wijmo.c1.grapecity.com/casestudy_intelligence/ Microsoft Dynamics CRM http://wijmo.c1.grapecity.com/casestudy_ms/
  28. 28. SpreadJSの採用事例 リックソフト株式会社様 http://jp.spread.grapecity.com/spreadjs/case/ricksoft/ リックソフト株式会社様は、プ ロジェクト管理ツール「JIRA」 とプロジェクト管理情報ツール 「Confluence」を中心とした多 くの製品ラインナップをもつア トラシアン社の正規販売代理店。 近年ではユーザーからのフィー ドバックをもとにしたアドオン 製品の開発にも注力し同社が3 番目にリリースしたアドオン製 品「IssueEditor for JIRA(イ シューエディター)」の開発に SpreadJSを採用。 “Canvasベースで高速に動くこと“ パフォーマンス重視の開発には SpreadJSが最適でした
  29. 29. お問合わせ窓口 JavaScriptライブラリに関する お問合せ窓口 Eメール : sales@grapecity.com 電話番号: 048-222-3001 営業時間: AM9:00~12:00 PM1:00~5:30 (月~金) JavaScriptライブラリ導入に関するご相談、評価版の使 い方や製品仕様など、お気軽にお問合わせください。

×