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

「HTML5 Enterprise Application Conference 2017」セッションスライド

Transcript

1. 開発ツール「Wijmo」と「SpreadJS」からみる 業務アプリケーションの変遷とこれから グレープシティ株式会社 ツール事業部マーケティング部 村上 功光
2. グレープシティのご紹介
3. グレープシティ株式会社 本社 宮城県仙台市 社員数 国内200名 海外800名 事業内容 ✓ 学校法人向け業務管理ソフトウェアの開発、販売 ✓ ソフトウェア開発支援ツールの開発、販売 ✓ 各種映像制作、およびスタジオの提供 ✓ 幼児英語教育ソリューションの開発、販売
4. ソフトウェア開発支援ツール事業 業務アプリケーションの開発支援ツールを開発・販売 ✓ SPREAD ✓ ActiveReports ✓ ComponentOne Studio ✓ etc...
5. 20年以上の開発実績 最新テクノロジーを常にフォロー VB6 Windows Forms ASP.NET
6. 目次 1. Web 開発のこれまで 2. HTML 5 3. JavaScript の躍進 4. HTML 5 と開発 5. 事例にみる、これからの開発 6. まとめ
7. Web 開発のこれまで
8. Webアプリケーションのこれまで 例：SPREAD for ASP.NET ✓ Webフォーム開発用コンポーネント ➢ ASP.NETでの開発 ➢ .NET Frameworkを基盤とした開発
9. SPREAD for ASP.NET 実行画面
10. Webアプリケーションのこれまで 例：SPREAD for ASP.NET ✓ Webフォーム開発用コンポーネント ➢ ASP.NETでの開発 ➢ .NET Frameworkを基盤とした開発
11. .NET Framework による Web 開発(ASP) メリット ✓ 簡単！ デメリット 性能 使い勝手 環境
12. Web アプリの構造とASP.NET Client Server
13. Web アプリの構造とASP.NET ASP.NET Client Server
14. Web アプリの構造とASP.NET
15. .NET開発のデメリット デメリット 性能 DOM描画 使い勝手 細かい動作調整は不可能 環境 環境はInternet Explorer、IISに限定 アプリケーション動作は.NET Frameworkの動作・仕様に制限される
16. HTML 5
17. HTML5の策定（2014年） 可能になったこと ✓ CSS - Webフォントの利用が可能に ✓ 動画・音声用のタグが登場 ✓ Canvas / SVG タグ・APIによる図形・絵の描画が可能に
18. 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 実行結果
19. JavaScript の躍進
20. EcmaScript 5/6 の策定 ➢ EcmaScript = JSの標準規格 ➢ JS言語がより開発向きに ➢ gettter / setter ➢ クラス, モジュール, etc
21. jQuery ライブラリの普及 ➢ ウェブサイト開発で広く利用される ➢ ブラウザ間の動作差異を吸収 ➢ 高度なクライアント処理を実現
22. Wijmo 3 jQuery の拡張コントロール集 ✓アコーディオン ✓メニュー ✓スライダー ✓ etc...
23. HTML 5 ベースのライブラリ HTML 5 以降、JSライブラリが続々登場 ➢ Canvas/SVGによる画面描画 ➢ 高速処理 ➢ 多彩・柔軟
24. D3.js
25. HTML5向け製品ラインナップ グリッド、チャート、ゲージなどを含む JavaScriptコントロール集 スプレッドシート、データ表示に特化した JavaScriptコントロール集
26. Wijmo / 高機能JSコントロール集 収録コントロール ✓グリッド・スプレッドシート ✓チャート（Excel系/金融） ✓入力系コントロール ✓ etc...
27. SpreadJS / 高機能スプレッドシート&グリッド Spread.Sheets Spread.Views -
28. HTML 5 と開発
29. HTML 5の登場により進化した部分 Client Server ✓ 高速データ表示 ✓ 柔軟・インタクラクティブ性に富む ✓ ブラウザ・サーバー環境依存なし
30. HTML 5の登場により進化した部分 Client Server
31. HTML 5の登場により進化した部分 Client Server
32. 新しい課題：通信・サーバー処理 Client Server ASP.NET（Webフォーム） からの脱却 ↓ 通信・サーバー処理 構築の必要性
33. 事例にみる、これからの開発
34. ソリューション ✓ ASP.NET MVC ✓ PaaS / SaaS & Web API ✓ 開発フレームワーク
35. ASP.NET MVC 自分でつくる ✓ MVC手法による開発 ✓ Webフォームとの互換性はなし ✓.NET経験者には親しみのあるAPI .NET Framework ASP.NET Framework ASP.NET MVC ASP.NET Web Pages ASP.NET Web Forms
36. ASP.NET MVC .NET Framework ASP.NET Framework ASP.NET MVC ASP.NET Web Pages ASP.NET Web Forms MODEL VIEW CONTRO- LLER
37. 事例：弥生さま クラウド版製品に Wijmo をご採用 ✓ ASP.NET MVC でご開発 ✓ アプリのUIをWijmoで実装
40. MODEL VIEW CONTRO- LLER ASP.NET MVC
41. SaaS / PaaS & Web API バックエンドはサービスに任せる ✓ SaaS/PaaS環境でデータを管理 ✓ Web APIを使ってデータ取得・保存 VIEW SaaS/PaaS DATA Web API
42. SaaS / PaaS SaaS Software as a Service サービス型ソフトウェア PaaS Platform as a Service サービス型プラットフォーム
43. 事例：リックソフトさま SaaSアドオン製品に SpreadJS をご採用 ✓ アトラシアン「JIRA」用アドオン ✓ WebAPIでデータを取得し、Excelラ イクに操作
44. JIRA - 課題 ＆ プロジェクト追跡ソフトウェア
45. Web API VIEW SaaS/PaaS DATA Web API HTTPプロトコロル経由のAPIを使用して データをやり取り API公開 データ取得 データ登録 など
46. JIRA用アドオン - Issue Editor
47. 協業パートナー：サイボウズ社さま PasS型サービス「kintone」を展開 ✓GUI操作で業務アプリを簡単に構築 ✓さらに柔軟なUIの構築には？ ✓Wijmo/SpreadJSがおすすめ
48. kintone でのアプリ構築例（商品管理）
49. SpreadJS での kintone アプリカスタム 例
50. 開発フレームワーク 開発フレームワークで全てを開発 ✓ GUIベースでアプリを構築 ✓ 外観・データ・通信すべてをカバー Client Server 開発フレームワーク
51. 事例：住友電工情報システムさま 自社製品にSpreadJSをご採用 ✓ 「楽々Framework 3」 ✓ 画面構築設定において部品をD&D ✓ グリッドとしてSpreadJSが利用可能
52. 事例：住友電工情報システムさま ✓ノンプログラミング型 Webアプリケーション開発ツール ✓大企業を中心に５５０社、２８００ライセ ンスを出荷 ✓大規模基幹システム開発からWebサイト構 築まで
53. 事例：住友電工情報システムさま
54. 事例：住友電工情報システムさま
56. サマリー まとめ
57. Summary HTML 5 の登場により ✓ Webフォーム開発からの脱却が加速化 ✓ Webアプリケーションの可能性が向上中 ✓ 新たな開発手法・ソリューションが登場
58. Summary ✓ ASP.NET MVC ✓ PaaS / SaaS & Web API ✓ 開発フレームワーク
59. Summary ✓ ASP.NET MVC ✓ PaaS / SaaS & Web API ✓ 開発フレームワーク
60. END