開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから

「GrapeCity Web TECH FORUM 2018」 セッションスライド

Transcript

1. 開発ツール Wijmo と SpreadJS からみる 業務アプリケーションの変遷とこれから グレープシティ株式会社 ツール事業部マーケティング部 プロダクトマーケティングマネージャー 村上 功光
2. 0. イントロダクション
3. ソフトウェア開発支援ツール事業 ⚫ SPREAD ⚫ ActiveReports ⚫ C1 Studio ⚫ etc...
4. 20年以上の開発実績 最新テクノロジーを常にフォロー VB6 Windows Forms ASP.NET
5. VB6 Windows Forms ASP.NET 20年以上の開発実績 最新テクノロジーを常にフォロー
6. 目次 1. Web 開発のこれまで 2. HTML 5 の登場、JS の躍進 3. 事例にみる開発のこれから
7. 1. Web 開発のこれまで
8. SPREAD for ASP.NET ⚫ Web フォーム開発用コンポーネント ⚫ Microsoft Excel のような UI を実現 例
9. SPREAD for ASP.NET 実行例
10. SPREAD for ASP.NET ⚫ Web フォーム開発用コンポーネント ⚫ Microsoft Excel のような UI を実現 例
11. .NET Framework を基盤とした開発 長 所 GOOD 簡単・つくりやすい 短 所 BAD 性能 使い勝手 環境
12. z Web アプリの構造と ASP.NET Client Server
13. z z Web アプリの構造と ASP.NET ASP.NET Client Server
14. z Web アプリの構造と ASP.NET
15. .NET Framework を基盤とした開発 長 所 GOOD 簡単・つくりやすい 短 所 BAD 性能 使い勝手 環境
16. .NET 開発の短所 性能 使い勝手 環境 : DOM描画 : 細かい動作調整は不可能 : Internet Explorer
17. 2. HTML5 の登場、JS の躍進
18. HTML 5 の策定（2014年） HTML 4 からの強化点・新機能 ⚫ CSS – Web フォントの利用が可能に ⚫ 動画・音声用のタグが登場 ⚫ Canvas / SVG タグ・APIによる図形・絵の描画が可能に
19. z Canvas HTML5 で導入された <canvas> HTML 要素は、JavaScript による スクリプティングによって図形な どを描画するために使用します。 MDN Web Doc Canvas API <canvas id="canvas"></canvas> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = “green”; // 緑色で ctx.fillRect(10, 10, 100, 100); // 四角を描きます HTML JavaScript 実行結果 例
20. z Canvas HTML5 で導入された <canvas> HTML 要素は、JavaScript による スクリプティングによって図形な どを描画するために使用します。 MDN Web Doc Canvas API 例 条件に応じた描画ができる 自由な描画ができる
21. z Canvas HTML5 で導入された <canvas> HTML 要素は、JavaScript による スクリプティングによって図形な どを描画するために使用します。 MDN Web Doc Canvas API 例 条件に応じた描画ができる → 高速な描画処理の実現 自由な描画ができる → 詳細な調整にも対応可能
22. z HTML 5 vs ASP.NET 条件に応じた描画ができる 自由な描画ができる VS 性能 使い勝手 : DOM描画 : 細かい動作調整は不可能
23. JavaScript の躍進 ◼ jQuery の普及 ◼ EcmaScript 5/6 の策定 ◼ ブラウザの JS 対応
24. z jQuery ライブラリの普及 jQuery UI
25. z jQuery ライブラリの普及 ◼ ウェブサイト開発で広く利用される ◼ 高度なクライアント処理を実現
26. z jQuery ライブラリの普及 ◼ ウェブサイト開発で広く利用される ◼ 高度なクライアント処理を実現 ◼ ブラウザ間の動作差異を吸収
27. z EcmaScript 5/6 の策定 EcmaScript JavaScript 標準規格
28. ◼ ES 5/6 で JS がより開発向きに ✓ 変数スコープのコントロール ✓ クラス ✓ モジュール、etc... EcmaScript 5/6 の策定
29. ◼ 主要ブラウザが ES 5/6 に対応 ✓ Microsoft IE / Edge ✓ Chrome, Firefox, Opera ✓ Safari, etc EcmaScript 5/6 の策定
30. EcmaScript 5/6 の策定 環境依存のない、クライアント動作
31. z JS (ES 5/6) vs ASP.NET VS 環境 : Internet Explorer 環境依存なし
32. .NET 開発の短所 性能 使い勝手 環境 : DOM描画 : 細かい動作調整は不可能 : Internet Explorer
33. HTML 5 x JavaScript の長所 性能 使い勝手 環境 : 高速な描画 : 自由な実装 : 依存なし
34. HTML 5 ベースのJSライブラリ HTML 5 以降、JSライブラリが続々登場 ✓ Canvas/SVGによる画面描画 ✓ 高速処理 ✓ 多彩・柔軟
35. z D3.js 例
36. HTML 5 GC製品ラインナップ Wijmo グリッド、チャート、ゲージなどを含む JavaScript コントロール集 SpreadJS スプレッドシート、データ表示に特化した JavaScript コントロール集 InputManJS データ入力に特化した JavaScript コントロール集
37. z Wijmo/ 高機能 JS コントロール集 主要収録コントロール ✓ グリッド・スプレッドシート ✓ チャート（Excel系/金融） ✓ ゲージ ✓ etc...
38. z SpreadJS/ 高機能スプレッドシート & グリッド Spread.Sheets Spread.Views -
39. z InputManJS/ 日本仕様の入力コントロールセット 日本仕様のきめ細やかな入力に 対応するJSコントロール セット 収録コントロール ✓ テキスト ✓ マスク ✓ 数値 ✓ カレンダー ✓ 日付時刻
40. z HTML 5 の登場によって進化した部分 Server Client
41. z HTML 5 の登場によって進化した部分 Server Client 高速なデータ表示 柔軟・詳細な動作設定 環境依存なし
42. z HTML 5 の登場によって進化した部分 Server Client
43. z HTML 5 の登場によって進化した部分 Client Server
44. z 新しい課題：通信・サーバー処理 Client Server ASP.NET (Web フォーム) からの脱却 ↓ 通信・サーバー処理 構築の必要性
45. 3. 事例にみる、開発のこれから
46. Wijmo/SpreadJS 採用事例 1. 弥生株式会社さま 2. リックソフト株式会社さま 3. 住友電工情報システム株式会社さま
47. z 事例 1：弥生株式会社さま ⚫ をご採用 ⚫ 「弥生会計」移行開発
48. z z 弥生会計 （デスクトップ版）
49. ASP.NET MVC ⚫ MVC手法による開発 ⚫ Webフォームとの互換性はなし ⚫.NET経験者には親しみのあるAPI .NET Framework ASP.NET ASP.NET MVC ASP.NET Web Pages ASP.NET Web Forms
50. z z ASP.NET MVC MODEL VIEW CONTRO- LLER
51. 開発方法 1 : 自分でつくる（with MVC） アプリを自在に実装 クローズドな環境でのアプリ構築 実装工数・メンテナンスコスト 要検討
52. z 事例 2：リックソフト株式会社さま ⚫ をご採用 ⚫ 「JIRA」アドオン開発
53. ⚫ アトラシアン社のソフトウェアサービス ⚫ 課題 & プロジェクト追跡 JIRA Software
54. ⚫ アトラシアン社のソフトウェアサービス ⚫ 課題 & プロジェクト追跡 ⚫ SaaS → Software as a Service （サービス型ソフトウェア） JIRA Software *PaaS → Platform as a Service （サービス型プラットフォーム）
55. z SaaS/PaaS SaaS/PaaS DATA Client Software ネットでアクセス データを表示
56. z z ① 一覧から選択 ② 1件ずつ編集
57. Client z SaaS/PaaS + Web API SaaS/PaaS DATA Software
58. z SaaS/PaaS + Web API VIEW SaaS/PaaS だいたい カスタマイズ できます DATA Software
59. z SaaS/PaaS + Web API VIEW SaaS/PaaS Web API HTTPプロトコロル経由のAPIを使用して データをやり取り API 公開 データ取得 データ登録 etc. DATA Software
60. z z アトラシアン JIRA 課題 & プロジェクト追跡ソフトウェア JIRA用アドオン Issue Editor
61. 開発方法 2 : バックエンドをサービスで データまわりの工数減 クライアントサイドは自在にカスタマイズ 自社データを他社環境に保管 要検討
62. z 事例 3：住友電工情報システム株式会社さま ⚫ をご採用 ⚫ 開発フレームワーク開発
63. z z ⚫ ノンプログラミング型 Webアプリケーション開発ツール ⚫ 大企業を中心に５５０社、 ２８００ライセンスを出荷 ⚫ 大規模基幹システム開発から Webサイト構築まで
64. z z ⚫ ノンプログラミング型 Webアプリケーション開発ツール ⚫ 大企業を中心に５５０社、 ２８００ライセンスを出荷 ⚫ 大規模基幹システム開発から Webサイト構築まで
65. z z x
66. 開発フレームワーク 開発フレームワーク Client Server
67. 開発方法 3 : 開発フレームワーク GUIベースでアプリを構築 外観・データ・通信、全てをカバー 詳細なカスタマイズとチューニング 要検討
68. サマリー
69. HTML 5 の登場により ✓ Web フォーム開発からの脱却が加速 ✓ Web アプケーションの可能性が拡大中 ✓ 新しい開発手法・ソリューションが登場
70. Wijmo/SpreadJS 採用事例 1. 弥生株式会社さま 2. リックソフト株式会社さま 3. 住友電工情報システム株式会社さま
71. これからの開発手法（例） ✓ ASP.NET MVC ✓ SaaS/PaaS + Web API ✓ 開発フレームワーク
72. ✓ ASP.NET MVC ✓ SaaS/PaaS + Web API ✓ 開発フレームワーク
73. ✓ ASP.NET MVC ✓ SaaS/PaaS + Web API ✓ 開発フレームワーク
74. END