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

開発ツール「Wijmo」と「SpreadJS」からみる
業務アプリケーションの変遷とこれから
グレープシティ株式会社
ツール事業部マーケティング部
村上功光

グレープシティのご紹介

グレープシティ株式会社
本社宮城県仙台市
社員数国内200名海外800名
事業内容
✓ 学校法人向け業務管理ソフトウェアの開発、販売
✓ ソフトウェア開発支援ツールの開発、販売
✓ 各種映像制作、およびスタジオの提供
✓ 幼児英語教育ソリューションの開発、販売

ソフトウェア開発支援ツール事業
業務アプリケーションの開発支援ツールを開発・販売
✓ SPREAD
✓ ActiveReports
✓ ComponentOne Studio
✓ etc...

20年以上の開発実績
最新テクノロジーを常にフォロー
VB6
Windows
Forms
ASP.NET

目次
1. Web 開発のこれまで
2. HTML 5
3. JavaScript の躍進
4. HTML 5 と開発
5. 事例にみる、これからの開発
6. まとめ

Webアプリケーションのこれまで
例：SPREAD for ASP.NET
✓ Webフォーム開発用コンポーネント
➢ ASP.NETでの開発
➢ .NET Frameworkを基盤とした開発

SPREAD for ASP.NET 実行画面

.NET Framework による Web 開発(ASP)
メリット ✓ 簡単！
デメリット
性能
使い勝手
環境

Web アプリの構造とASP.NET
Client Server

ASP.NET
Client Server

.NET開発のデメリット
デメリット
性能 DOM描画
使い勝手細かい動作調整は不可能
環境環境はInternet Explorer、IISに限定
アプリケーション動作は.NET Frameworkの動作・仕様に制限される

HTML5の策定（2014年）
可能になったこと
✓ CSS - Webフォントの利用が可能に
✓ 動画・音声用のタグが登場
✓ Canvas / SVG
タグ・APIによる図形・絵の描画が可能に

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
実行結果

EcmaScript 5/6 の策定
➢ EcmaScript = JSの標準規格
➢ JS言語がより開発向きに
➢ gettter / setter
➢ クラス, モジュール, etc

jQuery ライブラリの普及
➢ ウェブサイト開発で広く利用される
➢ ブラウザ間の動作差異を吸収
➢ 高度なクライアント処理を実現

Wijmo 3
jQuery の拡張コントロール集
✓アコーディオン
✓メニュー
✓スライダー
✓ etc...

HTML 5 ベースのライブラリ
HTML 5 以降、JSライブラリが続々登場
➢ Canvas/SVGによる画面描画
➢ 高速処理
➢ 多彩・柔軟

HTML5向け製品ラインナップ
グリッド、チャート、ゲージなどを含む
JavaScriptコントロール集
スプレッドシート、データ表示に特化した
JavaScriptコントロール集

Wijmo / 高機能JSコントロール集
収録コントロール
✓グリッド・スプレッドシート
✓チャート（Excel系/金融）
✓入力系コントロール
✓ etc...

SpreadJS / 高機能スプレッドシート&グリッド
Spread.Sheets
Spread.Views -

HTML 5の登場により進化した部分
Client Server
✓ 高速データ表示
✓ 柔軟・インタクラクティブ性に富む
✓ ブラウザ・サーバー環境依存なし

HTML 5の登場により進化した部分
Client Server

新しい課題：通信・サーバー処理
Client Server
ASP.NET（Webフォーム）
からの脱却
↓
通信・サーバー処理
構築の必要性

事例にみる、これからの開発

ソリューション
✓ ASP.NET MVC
✓ PaaS / SaaS & Web API
✓ 開発フレームワーク

ASP.NET MVC
自分でつくる
✓ MVC手法による開発
✓ Webフォームとの互換性はなし
✓.NET経験者には親しみのあるAPI.NET Framework
ASP.NET Framework
ASP.NET
MVC
ASP.NET
Web Pages
ASP.NET
Web Forms

ASP.NET MVC
.NET Framework
ASP.NET Framework
ASP.NET
MVC
ASP.NET
Web Pages
ASP.NET
Web Forms MODEL
VIEW
CONTRO-
LLER

事例：弥生さま
クラウド版製品に Wijmo をご採用
✓ ASP.NET MVC でご開発
✓ アプリのUIをWijmoで実装

MODEL
VIEW
CONTRO-
LLER
ASP.NET MVC

SaaS / PaaS & Web API
バックエンドはサービスに任せる
✓ SaaS/PaaS環境でデータを管理
✓ Web APIを使ってデータ取得・保存
VIEW
SaaS/PaaS
DATA
Web API

SaaS / PaaS
SaaS Software as a Service サービス型ソフトウェア
PaaS Platform as a Service サービス型プラットフォーム

事例：リックソフトさま
SaaSアドオン製品に SpreadJS をご採用
✓ アトラシアン「JIRA」用アドオン
✓ WebAPIでデータを取得し、Excelラ
イクに操作

JIRA - 課題＆プロジェクト追跡ソフトウェア

Web API
VIEW
SaaS/PaaS
DATA
Web API
HTTPプロトコロル経由のAPIを使用して
データをやり取り
API公開
データ取得
データ登録
など

JIRA用アドオン - Issue Editor

協業パートナー：サイボウズさま
PasS型サービス「kintone」を展開
✓GUI操作で業務アプリを簡単に構築
✓さらに柔軟なUIの構築には？
✓Wijmo/SpreadJSがおすすめ

kintone でのアプリ構築例（商品管理）

SpreadJS での kintone アプリカスタム例

開発フレームワーク
開発フレームワークで全てを開発
✓ GUIベースでアプリを構築
✓ 外観・データ・通信すべてをカバー
Client Server
開発フレームワーク

事例：住友電工情報システムさま
自社製品にSpreadJSをご採用
✓ 「楽々Framework 3」
✓ 画面構築設定において部品をD&D
✓ グリッドとしてSpreadJSが利用可能

✓ノンプログラミング型
Webアプリケーション開発ツール
✓大企業を中心に５５０社、２８００ライセ
ンスを出荷
✓大規模基幹システム開発からWebサイト構
築まで

Summary
HTML 5 の登場により
✓ Webフォーム開発からの脱却が加速化
✓ Webアプリケーションの可能性が向上中
✓ 新たな開発手法・ソリューションが登場

Summary
✓ ASP.NET MVC
✓ PaaS / SaaS & Web API
✓ 開発フレームワーク

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

More Related Content

What's hot

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

More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社）

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

More from Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社）