HTML5時代の業務アプリケーション開発にマッチ！グレープシティ JavaScript製品のご紹介

「Toolsの杜」ランチセッションB セッションスライド

Transcript

1. グレープシティ JavaScript 製品のご紹介 HTML5 時代の業務アプリケーション開発にマッチ！ グレープシティ株式会社 ツール事業部 マーケティング部 村上 功光
2. はじめに
3. 2014年に策定されたHTMLの新規格 ⚫ CSS – Web フォントの利用が可能に ⚫ 動画・音声用のタグが登場 ⚫ Canvas / SVG HTML5
4. 1. ブラウザ依存なし 2. 高速 3. フレキシブル 採用のメリット
5. サーバー クライアント 適用範囲
6. cloud Web API SaaS PaaS IaaS クライアント 適用範囲
7. cloud Web API SaaS PaaS IaaS クライアント 適用範囲
8. cloud Web API SaaS PaaS IaaS
9. ”アプリケーション開発” ≠ 業務アプリケーション開発
10. ”アプリケーション開発” ≠ 業務アプリケーション開発
11. • 業務アプリ開発の特徴 • 業務アプリ開発の特徴 • 業務アプリ開発の特徴 1 2 3 目次
12. 目次 • ”多い” • エクセルライクに • 日本固有のインプット 1 2 3
13. 業務アプリ開発の特徴（1） “多い”
14. 要件が多い
15. 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 Input 1 Input 2 Input 3 Input 4 受注 A 受注 B 受注 C 受注 D 受注 E 1月 77,194 90,175 90,495 61,656 38,752 2月 81,872 27,803 76,611 13,799 32,300 3月 7,214 33,314 92,928 82,151 95,337 4月 58,982 59,156 3,285 27,198 60,872 5月 2,685 67,367 59,764 6,428 29,048 6月 27,324 51,082 72,655 16,358 94,471 7月 13,830 91,735 92,454 79,052 67,425 8月 22,033 78,909 71,665 65,461 39,239 9月 42,749 72,391 23,883 21,217 66,955 Submit
16. 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 Input 1 Input 2 Input 3 Input 4 受注 A 受注 B 受注 C 受注 D 受注 E 1月 77,194 90,175 90,495 61,656 38,752 2月 81,872 27,803 76,611 13,799 32,300 3月 7,214 33,314 92,928 82,151 95,337 4月 58,982 59,156 3,285 27,198 60,872 5月 2,685 67,367 59,764 6,428 29,048 6月 27,324 51,082 72,655 16,358 94,471 7月 13,830 91,735 92,454 79,052 67,425 8月 22,033 78,909 71,665 65,461 39,239 9月 42,749 72,391 23,883 21,217 66,955 Submit Tree View Input Button Chart GridView
17. 案件が多い
18. 自社開発 SIer 組織・クライアントのぶんだけ、業務アプリが必要
19. • 要件が多い → 工数増大・品質低下の懸念
20. • 要件が多い → 工数増大・品質低下の懸念 • 案件が多い → 開発効率向上の必要性 （部品流用・標準ツール導入）
21. Wijmo が解決します
22. Wijmo 高機能 JS コントロールセット
23. グリッド ナビゲーション チャート 入力 基本機能 データ可視化 FlexGrid MultiRow FlexSheet TreeView Popup Menu Calendar InputDate InputTime InputDateTime InputMask InputNumber ComboBox MultiSelect AutoComplete MultiAuto CompleteListBox ColorPicker InputColor FlexChart FinancialChart 棒 折れ線 面 バブル 株価散布図 円 ドーナツ レーダー ポーラー OLAP RadialGauge LinearGauge BulletGraph 基本コントロール CollectionView クリップボード グローバリゼーション イベント検証 テーマ データ Excel PDF PDFViewer PrintDocument ReportViewer 収録コントロール・機能一覧
24. 1. 多機能 → 40 機能以上を収録（品質管理済） 2. 高速・軽量 → dependency フリー 3. 先進フレームワークにも対応 → Angular/React/Vue.jsとの併用も可
25. 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 Input 1 Input 2 Input 3 Input 4 受注 A 受注 B 受注 C 受注 D 受注 E 1月 77,194 90,175 90,495 61,656 38,752 2月 81,872 27,803 76,611 13,799 32,300 3月 7,214 33,314 92,928 82,151 95,337 4月 58,982 59,156 3,285 27,198 60,872 5月 2,685 67,367 59,764 6,428 29,048 6月 27,324 51,082 72,655 16,358 94,471 7月 13,830 91,735 92,454 79,052 67,425 8月 22,033 78,909 71,665 65,461 39,239 9月 42,749 72,391 23,883 21,217 66,955 Submit Tree View Input Button Chart GridView
26. 案件受注 同一ツールの利用で生まれる好循環
27. Wijmoで 開発 案件受注 同一ツールの利用で生まれる好循環
28. Wijmoで 開発 案件受注 同一ツールの利用で生まれる好循環
29. Wijmoで 開発 案件受注 同一ツールの利用で生まれる好循環 • ノウハウの蓄積 • レベルアップ • 次開発に フィードバック
30. 事例：株式会社 日本プロテックさま • Wijmo 5 をご利用 • Silverlight から JavaScript への移行開発
31. 事例：株式会社 日本プロテックさま できるだけ Wijmo を使って社内で開発して、 いろんなお客さまに同じ環境で納品できるよう になれば弊社の品質も上がりますし、開発効率 も良くなるので、そこを目指していきたいです。 ”
32. 案件数 開 発 効 率 with Wijmo
33. 業務アプリ開発の特徴（2） “エクセルライクに”
34. 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 Input 1 Input 2 Input 3 Input 4 受注 A 受注 B 受注 C 受注 D 受注 E 1月 77,194 90,175 90,495 61,656 38,752 2月 81,872 27,803 76,611 13,799 32,300 3月 7,214 33,314 92,928 82,151 95,337 4月 58,982 59,156 3,285 27,198 60,872 5月 2,685 67,367 59,764 6,428 29,048 6月 27,324 51,082 72,655 16,358 94,471 7月 13,830 91,735 92,454 79,052 67,425 8月 22,033 78,909 71,665 65,461 39,239 9月 42,749 72,391 23,883 21,217 66,955 Submit
35. 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 Input 1 Input 2 Input 3 Input 4 受注 A 受注 B 受注 C 受注 D 受注 E 1月 77,194 90,175 90,495 61,656 38,752 2月 81,872 27,803 76,611 13,799 32,300 3月 7,214 33,314 92,928 82,151 95,337 4月 58,982 59,156 3,285 27,198 60,872 5月 2,685 67,367 59,764 6,428 29,048 6月 27,324 51,082 72,655 16,358 94,471 7月 13,830 91,735 92,454 79,052 67,425 8月 22,033 78,909 71,665 65,461 39,239 9月 42,749 72,391 23,883 21,217 66,955 Submit
36. 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 Input 1 Input 2 Input 3 Input 4 受注 A 受注 B 受注 C 受注 D 受注 E 1月 77,194 90,175 90,495 61,656 38,752 2月 81,872 27,803 76,611 13,799 32,300 3月 7,214 33,314 92,928 82,151 95,337 4月 58,982 59,156 3,285 27,198 60,872 5月 2,685 67,367 59,764 6,428 29,048 6月 27,324 51,082 72,655 16,358 94,471 7月 13,830 91,735 92,454 79,052 67,425 8月 22,033 78,909 71,665 65,461 39,239 9月 42,749 72,391 23,883 21,217 66,955 Submit Excel ライクに お願いします！
37. どうして Excel ?
38. どうして Excel ? 見積書 精算書 報告書 仕様書 計画表 売上値 成績表 顧客情報
39. どうして Excel ? 見積書 精算書 報告書 仕様書 計画表 売上値 成績表 顧客情報
40. グリッドビューでカバーできるExcel 機能 フィルタ・ソート キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 グループ化 Excelテーマ 数式関数 条件付き書式 マルチシート 罫線 書式 数式 テキストボックス 印刷 ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示
41. グリッドビューでカバーできるExcel 機能 フィルタ・ソート キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 グループ化 Excelテーマ 数式関数 条件付き書式 マルチシート 書式 数式 テキストボックス 印刷 ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 罫線
42. 一般的なスプレッドシートでカバーできるExcel 機能 フィルタ・ソート キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 Excelテーマ 数式関数 条件付き書式 マルチシート 書式 数式 テキストボックス 印刷 ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 グループ化 罫線
43. SpreadJS が解決します
44. SpreadJS 高速・軽量スプレッドシート & グリッドコントロール
45. SpreadJS 高速・軽量スプレッドシート & グリッドコントロール Spread.Sheets Spread.Views
46. SpreadJS 高速・軽量スプレッドシート & グリッドコントロール Spread.Sheets Spread.Views
47. フィルタ・ソート キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 グループ化 Excelテーマ 数式関数 条件付き書式 マルチシート 罫線 書式 数式 テキストボックス グループ化 ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 SpreadJS（Spread.Sheets）がカバーするExcel 機能
48. フィルタ・ソート キーマップ ピクチャ 数式入力 テーブル スライサー 入力検証 Excelテーマ 数式関数 条件付き書式 マルチシート 書式 数式 テキストボックス 印刷 ウィンドウ枠の 固定 セル結合 スパークライン グリッド表示 グループ化 罫線 SpreadJS（Spread.Sheets）がカバーするExcel 機能
49. Spread.Sheets による画面例
50. Spread.Sheets による画面例
51. テーブル スライサー フィルタ・ソート タッチ ピクチャ 数式入力 Out In Excel 入出力
52. V11Jの新機能 Excel 互換のチャートに対応
53. 8 Charts 面 横棒 散布図 折線 株式 縦棒 複合 円
54. 業務アプリ開発の特徴（3） 日本固有のインプット
55. 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録
56. グレープ太郎 ぐれーぷたろう 宮城県仙台市〇〇区△△ 3 ー 1 022-777-8210 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録
57. グレープ太郎 ぐれーぷたろう 宮城県仙台市〇〇区△△ 3 ー 1 022-777-8210 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録 複数回の類似入力
58. グレープ太郎 ぐれーぷたろう 宮城県仙台市〇〇区△△ 3 ー 1 022-777-8210 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録 半角 or 全角？
59. グレープ太郎 ぐれーぷたろう 宮城県仙台市〇〇区△△ 3 ー 1 022-777-8210 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録 想定される複数のパターン 022-777-8210 022(777)8210 022 777 8210
60. よくある対策
61. 運用でカバー 台市〇〇区△△ 3 ー 1 （全角）
62. 開発でカバー 022-777- 8210 022(777)821 0 022 777 8210 フォーマット 処理 022-777- 8210 保存
63. 運用で カバーした場合 利用者の負担増（使いづらいシステム） 開発で カバーした場合 開発者の負担増（作りづらいシステム） 解決したい課題
64. InputManJS が解決します
65. InputManJS 日本仕様の入力用JS コントロールセット
66. グレープ太郎 ぐれーぷたろう 宮城県仙台市〇〇区△△ 3 ー 1 022-777-8210 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録 ふりがな問題
67. InputManJS テキストコントロール キーボード入力を表示します ふりがな取得
68. グレープ太郎 ぐれーぷたろう 宮城県仙台市〇〇区△△ 3 ー 1 022-777-8210 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録 全角・半角問題
69. 自動変換 全角文字
70. 自動変換 半角カタカナ
71. グレープ太郎 ぐれーぷたろう 宮城県仙台市〇〇区△△ 3 ー 1 022-777-8210 氏 名 ふ り が な 自 宅 住 所 電 話 番 号 登録 022-777-8210 022(777)8210 022 777 8210 番号入力問題
72. TEL:¥D{3}¥(¥D{3}¥)¥D{4} テキストボックス 正規表現 マスクコントロール
73. マスクコントロール
74. 運用で カバーした場合 利用者の負担増（使いづらいシステム） 開発で カバーした場合 開発者の負担増（作りづらいシステム） 解決したい課題
75. 収録コントロール カレンダーコントロール テキストコントロール 日付・時刻コントロール 数値コントロール マスクコントロール
77. E N D