Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

766 views

Published on

2018年2月23日(金)開催
「Web TECH FORUM 2018」
http://www.kokuchpro.com/event/wtf20180223/

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

グレープシティ株式会社

Published in: Technology
  • Be the first to comment

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

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

×