2018年2月23日(金)開催 「Web TECH FORUM 2018」 http://www.kokuchpro.com/event/wtf20180223/ 『開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから 』 グレープシティ株式会社

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. zz
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 の策定
EcmaScriptJavaScript 標準規格

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. zD3.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 の登場によって進化した部分
ServerClient

41. z
HTML 5 の登場によって進化した部分
ServerClient
高速なデータ表示
柔軟・詳細な動作設定
環境依存なし

42. z
HTML 5 の登場によって進化した部分
ServerClient

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