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

1. エンタープライズWebアプリ
ケーションにおけるUIの重要性
グレープシティ 森谷 勝

2. グレープシティは1993年以来、20年以上にわたりシステム開発に必要な「開発支援
ツール」を提供しています。
グレープシティとしてのこだわりは、多くのITテクノロジーがグローバルでの利用を
考えた設計となっているところ、日本の業務システムの仕様に合わせた形に最適化し
ながら製品リリースをしています。

3. グレープシティの「開発支援ツール」
ITは見えないところで私たちの生活を支えています。
そのシステム開発の負担を少しでも軽減すること、また、人々の役に立つシステム開
発のお手伝いをすることを、私たちは誇りとしています。

4. UIを支援するツール
グレープシティの「開発支援ツール」はUIを支援するツール。
長年、グリッド、入力支援、帳票印刷などの機能を追求してきました。

5. ユーザーインターフェイスの重要性
なぜエンタープライズWebアプリケーションにお
いてユーザーインターフェイスが重要なのか？
それは、実際にシステムを利用するエンドユー
ザーの「業務の生産性向上」に大きく影響するか
らと考えています。
「業務の生産性向上」を実現するには、システム
における使いやすいユーザーインターフェイスが
重要になります。

6. これまでのセッション（振返り）
・Angular ユーザーなら押さえておきたい！
TypeScript と Visual Studio Code の基礎と活用
・Angularに対するこれまでのNRIの取り組み
・大規模エンタープライズでのAngular利用事例
Angularを中心としたテクノロジーがもたらす、生産性、標準化、
はシステム構築において恩恵がある（エンジニアのメリット）
では、エンドユーザーのメリットは？
→強固なシステムが出来る（安定稼働）
→システムの拡張時の生産性が高い
→保守性が高い

7. いまのWebに求められるUI
Angularに対応したUIライブラリ
操作感はクライアントアプリに近い
具体的にどのようなUIが求められるか？
・操作性
・視認性

8. 操作性

9. データの直接編集
キー入力により自動的に編集を開始して値設定が可能
セル非編集状態から
キーボードで[9]を
入力
業務で使うグリッドに求められること

10. コピー＆ペースト（複数行／複数列）
同一グリッド上でコピー＆ペースト
Excelとのコピー＆ペースト
FlexGrid
Excel
業務で使うグリッドに求められること

11. キーボード操作
Excelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能
キー 動作
[Enter] 下方向セル移動
[Shift]+[Enter] 上方向セル移動
[Tab] 右方向セル移動
[Shift]+[Tab] 左方向セル移動
[F2] セル編集開始
[Ctl]+[A] セル全選択
[Ctl]+[C] コピー
[Ctl]+[V] ペースト
業務で使うグリッドに求められること

12. フィルターとソート
Excelのようなフィルターとソート
業務で使うグリッドに求められること

13. スクロールの固定
業務で使うグリッドに求められること

14. Excel資産の活用

15. 数式と関数
Spread.Sheetsは、日付、財務、統計、検
索、文字列など380種以上のExcel関数をサ
ポートしています。
ほぼ全ての表計算関数がExcel互換となって
おり、Excelファイルをインポートした場合
も集計結果を高い精度で再現します。
書式設定
Spread.Sheetsは、Excelと同様の書式文字
列を使用して、セルデータの表示形式を柔
軟に設定できます。日本市場に欠かせない
和暦日付や通貨記号表示にもしっかり対応
しています。
Excel資産の活用

16. 視認性

17. UIの描画はクライアントへ
昔のグラフはサーバサイドで画像へ
今はクライアントでレンダリング

18. 1レコードを複数行で表示

19. 紙のレイアウトを再現

20. 日付に関連する表現

21. タスクや工程の管理

22. 画像と関連付けされるデータ

23. モバイルでの視認性

24. モバイルでの視認性

25. 多彩な機能がオールインワン
グリッド チャート／ゲージ
入力
ピボットテーブル
Excel／PDF出力複数行グリッド

26. ２つの高性能コントロール
Spread.Sheets Spread.Views

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. SpreadJSの採用事例
リックソフト株式会社様
http://jp.spread.grapecity.com/spreadjs/case/ricksoft/
リックソフト株式会社様は、プ
ロジェクト管理ツール「JIRA」
とプロジェクト管理情報ツール
「Confluence」を中心とした多
くの製品ラインナップをもつア
トラシアン社の正規販売代理店。
近年ではユーザーからのフィー
ドバックをもとにしたアドオン
製品の開発にも注力し同社が3
番目にリリースしたアドオン製
品「IssueEditor for JIRA（イ
シューエディター）」の開発に
SpreadJSを採用。
“Canvasベースで高速に動くこと“
パフォーマンス重視の開発には
SpreadJSが最適でした

29. お問合わせ窓口
JavaScriptライブラリに関する
お問合せ窓口
Eメール : sales@grapecity.com
電話番号: 048－222－3001
営業時間: AM9:00～12:00
PM1:00～5:30
（月～金）
JavaScriptライブラリ導入に関するご相談、評価版の使
い方や製品仕様など、お気軽にお問合わせください。