MANABIYA 2018/03/23 グレープシティ株式会社 村上功光

1. Excel 業務を
Web アプリに！
コンポーネントベンダーが眺めたフロントエンド開発

2. 0. イントロダクション

3. Speaker プロフィール
村上 功光（むらかみ いさみつ）
グレープシティ株式会社
ツール事業部
プロダクトマーケティングマネージャー
2013年入社。JSライブラリ「SpreadJS」の開発
マネージャーを経て、現在プロダクトマーケ
ティングマネージャーとして活動中。
名前：
職業：
略歴：

4. グレープシティ株式会社 事業概要

5. 開発支援ツール事業
• 開発支援コンポーネントの開発と販売

6. 開発支援ツール事業
• 開発支援コンポーネントの開発と販売

7. コンポーネントの例（≒ライブラリ）

8. 開発支援ツール事業
• 開発支援コンポーネントの開発と販売

9. 開発支援ツール事業
• 開発支援コンポーネントの開発と販売
• 多様なテクノロジ/用途に対応するラインナップ

10. 開発支援ツール事業
• 開発支援コンポーネントの開発と販売
• 多様なテクノロジ/用途に対応するラインナップ
• 20年以上の実績 & 最新技術に常にフォロー

11. 昨今のWebアプリケーション開発スタイル
Client Server
Internet

12. 昨今のWebアプリケーション開発スタイル
Server
Internet

13. 昨今のWebアプリケーション開発スタイル
Server
Internet

14. 昨今のWebアプリケーション開発スタイル
Server
Internet
• フロントエンドで色々やるスタイル
• HTML5関連技術をふんだんに利用
Canvas/SVG、JavaScript、CSS
JS Framework、CSS Framework

15. かわるもの、かわらないもの
VB6
Windows
Forms
ASP.NET
[A request from customers !]

16. かわるもの、かわらないもの
VB6
Windows
Forms
ASP.NET
ExcelライクなUI・操作感！

17. かわるもの、かわらないもの
VB6
Windows
Forms
ASP.NET
ExcelライクなUI・操作感！

18. 目次
1. なぜ Excel ライクな UI なのか
2. 失敗しないコンポーネント選定
3. どこまで迫るか問題

19. 1. なぜExcelライクなUIなのか

20. なぜウェブアプリにExcelライクなUIが求められるのか？
Excelで業務を進める企業文化
システム化による業務改善

21. どうしてExcelライクな操作感が求められるのか？
Excelで業務を進める企業文化
ウェブ化による業務改善
Excelライクな操作感をもつ
ウェブアプリ

22. 東芝インフォメーションシステムズさま例
このシステムができるまで、製品情報はすべて
Excelで管理されていました。
”
エンドユーザーからの要望は、何より「Excelを
Webで実現してほしい」ということだった。
”
これまでのExcelの良い部分は残したまま、システ
ムに移行することを期待された。
” -グレープシティ事例紹介ページより -

23. ExcelライクなUI・操作とは？
フィルタ・ソート
キーマップ
ピクチャ
数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式関数
条件付き書式
マルチシート
罫線
書式
数式テキストボックス
グループ化
ウィンドウ枠の固定
セル結合
スパークライン
グリッド表示

24. 開発にあたって
• Excelライクが意味する莫大な数の機能要件

25. 開発にあたって
• Excelライクが意味する莫大な数の機能要件
• スクラッチでの対応は非現実的

26. 開発にあたって
• Excelライクが意味する莫大な数の機能要件
• スクラッチでの対応は非現実的
• コンポーネント（ライブラリ）の出番

27. 市場に溢れるJSライブラリ・コンポーネント

28. 市場に溢れるJSライブラリ・コンポーネント
Q.何をえらべば良いですか？

29. ExcelライクなUIのための
2. 失敗しないコンポーネント選定

30. ExcelライクなUIの実現に失敗するケース
• データをグリッド表示しただけ
• 機能不足（数式が設定できないなど）
• 操作感がExcelと違う（選択、キー操作）

31. ExcelライクなUIの実現に失敗するケース
• データをグリッド表示しただけ
• 機能不足（数式が設定できないなど）
• 操作感がExcelと違う（選択、キー操作）
コンポーネント選びの失敗によって
発生します

32. z
Excelライクを
表現する
コンポーネント
採用候補にあがりやすい
2種類のコンポーネント

33. z
Excelライクを
表現する
コンポーネント
グリッドビュー コンポーネント

34. z
Excelライクを
表現する
コンポーネント
スプレッドシートコンポーネント

35. z
Excelライクを
表現する
コンポーネント
Q.同じではないのですか？

36. z
Excelライクを
表現する
コンポーネント
A.ちがいます

37. z
Wikipedia
A grid view or a datagrid is a graphical control element that
presents a tabular view of data.
Grid view
A spreadsheet is an interactive computer application for
organization, analysis and storage of data in tabular form.
Spreadsheet
引用元：「Gridview」「Spreadsheet」『Wikipedia』 2018年3月20日 (火) 13:39 UTC URL:https://en.wikipedia.org/

38. z
ウィキペディア
（Speaker訳）
グリッドビュー（またはデータグリッド）は、データの行列表示
を行う視覚的コントロール要素である。
グリッドビュー
スプレッドシートは、行列形式でデータの整理・分析・保持を行
うための、対話式電算アプリケーションである。
スプレッドシート

39. z
グリッドと
スプレッドシート

40. z
グリッドと
スプレッドシート
データ 表示 用のUI

41. z
グリッドと
スプレッドシート
データ 表示 用のUI
データ 分析 用のUI

42. z
Wikipedia
A spreadsheet is an interactive computer application for
organization, analysis and storage of data in tabular form.
・・・（略）・・・
Excel now has the largest market share on the Windows and
Macintosh platforms.
Spreadsheet
引用元：「Spreadsheet」『Wikipedia』 2018年3月20日 (火) 13:39 UTC URL:https://en.wikipedia.org/

43. z
ウィキペディア
（Speaker訳）
スプレッドシートは、行列形式でデータの整理・分析・保持を行
うための、対話式電算アプリケーションである。
・・・（略）・・・
Windows および Macintosh プラットフォームにおいて、現在
Excel が最大の市場シェアを獲得している。
スプレッドシート

44. z
Excelライクを
表現する
コンポーネント
行列形式
UI行列形式 UI
グリッド
ビュー
スプレッド
シート
Google
SpreadSheet
Excel
iWork
Numbers

45. z
Excelライクを
表現する
コンポーネント
行列形式
UI行列形式 UI
グリッド
ビュー
スプレッド
シート
Google
SpreadSheet
Excel
iWork
Numbers
ExcelライクなUIの実現には
「スプレッドシート」
コンポーネントが最適

46. Excel に
3. どこまでせまるか、問題

47. GrapeCity FlexSheet例

48. GrapeCity SpreadJS (Spread.Sheets)例

49. どちらも「スプレッドシート」コンポーネント

50. どちらも「スプレッドシート」コンポーネント
• 行列表示
• 数式機能
• 書式設定
• シート切り替え
• ウィンドウ枠固定
• ソート
• フィルタ
• セル結合

51. FlexSheet で出来ること
フィルタ・ソート
キーマップ
ピクチャ
数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式関数
条件付き書式
マルチシート
罫線
書式
数式テキストボックス
グループ化
ウィンドウ枠の固定
セル結合
スパークライン
グリッド表示

52. FlexSheet で出来ること
フィルタ・ソート
キーマップ
ピクチャ
数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式関数
条件付き書式
マルチシート
罫線
書式
数式テキストボックス
グループ化
ウィンドウ枠の固定
セル結合
スパークライン
グリッド表示

53. SpreadJS で出来ること
フィルタ・ソート
キーマップ
ピクチャ
数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式関数
条件付き書式
マルチシート
罫線
書式
数式テキストボックス
グループ化
ウィンドウ枠の固定
セル結合
スパークライン
グリッド表示

54. 行列形式
UI行列形式 UI
グリッド
ビュー
スプレッド
シート
Google
SpreadSheet
Excel
iWork
Numbers

55. 行列形式
UI行列形式 UI
グリッド
ビュー
スプレッド
シート
Google
SpreadSheet
Excel
iWork
Numbers
SpreadJS は「エクセル」であることに
フォーカスしています。

56. 行列形式
UI行列形式 UI
グリッド
ビュー
スプレッド
シート
Google
SpreadSheet
Excel
iWork
NumbersFlexSheet は「スプレッドシート」で
あることにフォーカスしています（≠ Excel）。

57. 行列形式
UI行列形式 UI
グリッド
ビュー
スプレッド
シート
Google
SpreadSheet
Excel
iWork
NumbersFlexSheet は「スプレッドシート」で
あることにフォーカスしています（≠ Excel）。
多くの海外製スプレッドシートもこのカテゴリに所属します。

58. 純スプレッドシート Excel互換スプレッドシート

59. 純スプレッドシート Excel互換スプレッドシート
画
面
に
表
計
算
機
能
が
欲
し
い
で
す
。
エ
ク
セ
ル
っ
ぽ
く
、
ち
ょ
っ
と
関
数
な
ど
を
使
い
た
い
で
す
。

60. 純スプレッドシート Excel互換スプレッドシート
既
存
の
業
務
が
エ
ク
セ
ル
で
す
。
ア
プ
リ
化
し
て
も
そ
の
ま
ま
の
使
い
勝
手
と
機
能
を
期
待
し
ま
す
。

61. 純スプレッドシート Excel互換スプレッドシート

62. 番外編：すこしだけ製品紹介

63. SPREAD.SHEETS高性能スプレッドシートコントロール

64. GC製スプレッドシートコントロール
• SpreadJS 収録ライブラリ
• Microsoft Excelとの非常に高い互換性
• 外観、操作性、数式機能、入出力 etc

65. ExcelIO の実行例

67. 数式テキストボックス
グループ化
ウィンドウ枠の固定
セル結合
スパークライン

68. 数式・関数
条件付き書式
マルチシート
罫線のカスタマイズ
書式のカスタマイズ

69. フィルタ・ソート
タッチ
ピクチャ
数式入力
テーブル

70. スライサー

71. フレームワーク・開発環境対応状況

72. こ れ か ら 頑 張 り ま す

73. すこしだけデモします

74. グレープシティ展示ブース
（1階 ギャラリーA前）
参考：グレープシティ展示ブース

75. SPREAD.VIEWS高性能グリッドコントロール

76. 例）グリッド表示（SPREAD.VIEWS）

77. レイアウト・グルーピング 機能
SpreadJS.Viewsはレコードデータを
特定のルールに沿って
ブラウザに描画。
＝レイアウト/グルーピング機能

78. レイアウト機能を使ったUI例
カレンダー
日付 売上概要 前年比
9/30 41,492 4.4%

79. レイアウト機能を使ったUI例
タイムライン
担当 日付 予定
9/1 9:00 ミーティング田中さま

80. レイアウト機能を使ったUI例
ガント

81. レイアウト機能を使ったUI例
データレコードの向き
グリッド 水平レイアウト

82. レイアウト機能を使ったUI例
カード
ロゴ 製品名 対象環境 製品概要
Active
Reports
Web /
Desktop
ActiveReportsは、帳票アプリケーションを開発でき
る .NET Frameworkコンポーネントです。Windows
フォーム、WPF、ASP.NET、HTML5の4つのプラット
フォームをサポートし、帳票開発に必要なあらゆる
機能を備えています。

83. レイアウト機能を使ったUI例
メーソンリー
写真 タイトル
仕事場訪問 01 グレープインダストリアル | 業界をリー
ドするシェアNo.1企業！

84. レイアウト機能を使ったUI例
トレリス
作業区分 作業内容 担当 カテゴリ ステータス
デザイン作業1 ロゴの更新 バックログ 顧客要望

85. END