1. No category

デスクトップアプリの
使い勝手を超える
Web業務アプリケーションを作る
グレープシティ株式会社
森谷 勝
グレープシティ株式会社
1993年Visual Basic向けコンポーネント販売開始
業務アプリケーション開発者を支援する製品を提供し続けて
20年の開発ツールベンダー
2
グレープシティのツール
業務アプリ開発の
生産性向上と工数削減
3
UIコンポーネント
業務アプリUI
未入力
4
GrapeCity テクノロジー
Windowsのリッチな環境で使い勝手の良いUIを
構築してきたエンジニアがWeb開発でも活躍で
きるようにツールを提供していきます。
.NET
Framework
ActiveX
Java
WPF
ASP.NET
5
GrapeCityのHTML5
本日ご紹介する製品
6
Wijmo [ウィジモ]
7
Wijmo [ウィジモ]って何？
日本の業務アプリケーションに最適な
ＵＩを提供するJavaScriptライブラリ
特徴
・jQueryベース
・UIウィジェット集
8
jQueryベース
jQuery ベースに拡張 = 独自フレームワークではない
jQuery Mobile WebサイトでもWijmoを紹介
http://jquerymobile.com/resources/
9
jQueryベースのメリット
独自手法の習得不要
 jQuery の知識があれば開発可能
 ライブラリ独自の実装ルールがない
 Wijmoの採用により技術スキルが偏らない
技術スキルの応用
 広い範囲に既存スキルを活かせる
 jQueryの知識は他プロジェクトでも活かせる
 初期の学習コストが比較的低い
10
スタンダードライブラリをサポート
jQuery をベースに拡張
スタンダードライブラリをサポート
11
jQuery UI収録ウィジェット
jQuery UIだけでは
業務アプリのUIとしては不足
ユーティリティ
Accordion
Dialog
Tooltip
ビジュアライズ
Progressbar
Slider
入力
Button
Datepicker
Spinner
Autocomplete
コンテナ
Tabs
メニュー
Menu
12
Wijmo 収録ウィジェット
jQuery UIの足りない部分を
大幅にカバー
グリッド
Grid
Spread Sheet
入力
Combobox
InputText
InputDate
InputMask
InputNumber
List
Checkbox
Dropdown
Radio
Textbox
チャート
Barchart
Bubblechart
Compositechart
Linechart
Piechart
Scatterchart
ユーティリティ
Accordion
Expander
Carousel
Calendar
EventsCalendar
Dialog
Editor
Pager
Tooltip
Wizard
LinearGauge
RadialGauge
Progressbar
Rating
Slider
モバイル向け
AppView
ListView
コンテナ
Superpanel
Tabs
Gallery
Splitter
ビジュアライズ
メニュー
Menu
Tree
Ribbon
画像・ビデオ
Video Player
13
Demo
Wijmoウィジェット
14
日本の業務で要求される
WebアプリケーションのUI
15
日本の業務アプリケーションの傾向
２０年にわたる製品サポートから見えるもの
 伝統を重んじる


既存のワークフローや手順を変えたくない
アーキテクチャが変わっても同じＵＩを求める
 日本固有の要件が存在





Excel依存
IME制御
半角(1byte)と全角(2byte) とサロゲートペア(4byte)の制御
日付の表記方法（西暦／和暦）
同じ文字を複数の文字種で表現（氏名/ｼﾒｲ/しめい）
16
ケーススタディ（日本の業務アプリケーション）
Excelと同じ感覚で使いたい
Excelで出来ることは簡単に
やれるでしょ？
既存Excelファイルを読み
込んで画面で入力したい
日本の現状です
画面で入力した
データをExcelファ
イルに出力したい
17
SpreadJS [スプレッドJS]
Excelライクな操作性を実現するグリッド
18
Demo
SpreadJS
19
ケーススタディ（日本の業務アプリケーション）
日本語が表示できればいいわけではない
官公庁向けには「和暦」だし、２バイト文字
のカウントとかも必要だし・・
この紙伝票と同じ画
面をつくってほしい
日本の現状です
20
入力系ウィジェット
日本固有の業務要件をサポート
 日付の表記（西暦／和暦）
 入力書式と表示書式の分離
 半角(1byte)と全角(2byte) の制御
 日本語文字種の入力制限
入力時と表示時で異なる書式
電話番号(アンダースコア)の表示
入力時
HTML5
表示時
Wijmo
21
Demo
入力UI
22
デスクトップとモバイルの開発
同一ウィジェットを
モバイル環境へ最適化
参照を jQuery UI から jQuery Mobile へ変えることでモバイルのウィ
ジェットとして利用できます。モバイルで利用する時は、モバイル向けに
設計する必要があります。
23
モバイルに最適化されるウィジェット
グリッド
Grid
Spread Sheet
入力
Combobox
InputText
InputDate
InputMask
InputNumber
List
Checkbox
Dropdown
Radio
Textbox
チャート
Barchart
Bubblechart
Compositechart
Linechart
Piechart
Scatterchart
ユーティリティ
Accordion
Expander
Carousel
Calendar
EventsCalendar
Dialog
Editor
Pager
Tooltip
Wizard
LinearGauge
RadialGauge
Progressbar
Rating
Slider
モバイル向け
AppView
ListView
コンテナ
Superpanel
Tabs
Gallery
Splitter
ビジュアライズ
メニュー
Menu
Tree
Ribbon
画像・ビデオ
Video Player
24
ライセンス（デュアルライセンス）
商用ライセンス（１年契約のサブスクリプション）

１開発者につき１ライセンス必要（ランタイムフリー）

年３回（5月/9月/1月）メジャーバージョンアップ

サブスクリプション更新価格：２年目以降は本体価格の40%

Eメールサポート
オープンソースライセンス（OSS）
 お客様が開発されたアプリケーションをGPLv3に基づいたオープンソースアプリ
ケーションとして配布する必要があります。
収録製品
ライセンス
商用価格
１年契約
Wijmo Professional
Wijmo
Enterprise
Optional Pack for
Wijmo Enterprise
基本40
ウィジェット
Wijmo Professional
+SpreadJS
SpreadJS用
デザイナ＋Excel I/O
商用／OSS(GPLv3)
商用／OSS(GPLv3)
商用のみ
55,000円
90,000円
25,000円
（更新：22,000円）
（更新：36,000円）
（更新：10,000円）
全て税別価格
25
UIウィジェットの選択
Enterprise
Professional全てのウィジェットとSpreadJSが収録
＋
Optional Pack for
Wijmo Enterprise
Enterpriseのオプション製品
SpreadJS デザイナ と Excel I/O
を収録
Professional
グリッドやチャートなど高度なウィジェットを40種類以上収録
Wijmoは
実現したい機能によっ
て選べます
26
Visual WebGui [ビジュアル ウェブグイ]
27
業務アプリのプラットフォーム割合
グレープシティサポート.NET開発プラットフォーム割合
WPF
その他
3%
2%
ASP.NET Web
フォーム
26%
Silverlight
Windows
4%
フォーム
65%
28
Windowsフォームの
スキルをWebで生かす
29
開発手法は変えない
HTML／CSS／JavaScriptでのコーディング不要
で、Windowsフォームのクライアントアプリを
開発するのとまったく同じ感覚でHTML5の
Webアプリケーションを開発できます。
30
Visual Studioに統合
Windowsフォームと同じデザイン、同じコード
31
Demo
32
ASP.NET Web Formsとの開発時間の比較
・同一仕様のWebアプリ（２画面）
・同一のスキルと経験を持つ開発者
・スクラッチ開発
■Visual WebGui
■ ASP. NET
0.5
1.5
プログラミング
4.8
4.2
0.8
2.0
画面デザイン
（時間）0
0.4
1.6
5
検索条件設定画面
10 0
2
4
6
検索結果表示画面
㈱インタース 調べ
33
Windowsフォームとまったく同じ
Windowsフォームの主要コントロールに対応す
るコントロールを収録
34
Demo
35
アーキテクチャー
36
必要システム
開発ツール
Visual Studio 2008 SP1／2010／2012
※ Express Editionでは使用できません。
ブラウザ
Internet Explorer 8／9／10、Chrome、Firefox
※ Internet Explorerの互換表示はサポートしていません。
Webサーバー
Internet Information Services (IIS)
OS
Windows Vista／7／8
Windows Server 2008／2008 R2／2012
37
お問い合わせ窓口
グレープシティ株式会社
ツール事業部 営業部
Eメール : [email protected]
電話番号: 048-222-3001
FAX番号: 048-222-1211
営業時間: AM9:00～12:00
PM1:00～6:00
（月～金）
住所: 〒 332-0012
埼玉県川口市本町4-1-8
川口センタービル3F
38