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

「MANABIYA」セッションスライド

Transcript

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 Numbers FlexSheet は「スプレッドシート」で あることにフォーカスしています（≠ Excel）。
57. 行列形式 UI 行列形式 UI グリッド ビュー スプレッド シート Google SpreadSheet Excel iWork Numbers FlexSheet は「スプレッドシート」で あることにフォーカスしています（≠ 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