Developers Summit 2014 ランチセッション講演資料 http://event.shoeisha.jp/devsumi/20140213/session/388/

1. +
JavaScriptライブラリ
「Wijmo（ウィジモ）」
による日本仕様のUI開発
February 13, 2014
グレープシティ株式会社
山崎 顕由
ハッシュタグ：#devsumiD
セッションID ：13-D-L

4. +
質問
ランチをとっているところ恐縮ですが・・・
1.
業務アプリケーションの開発がメイン
（運用／テスト／マネージメント等含）
の方？
2.
GrapeCityのツールを利用したことがあ
る方？

5. +
Wijmo[ウィジモ]って何?
Web標準技術（HTML5／
JavaScript／CSS3）で開発された、
業務アプリケーションに必要
なUIウィジェットをワンセット
にしたライブラリ集

6. +
Wijmo[ウィジモ]
＝ jQuery UI, jQuery Mobileベース
jQuery Mobile Webサイトでも紹介
http://jquerymobile.com/resources/

7. +
Wijmo
収録ウィジェット
グリッド
Grid
Spread Sheet
入力
Combobox
InputText
InputDate
InputMask
InputNumber
List
Checkbox
Dropdown
Radio
Textbox
チャート
Barchart
Bubblechart
Compositechart
Linechart
Piechart
Scatterchart
コンテナ
Superpanel
Tabs
Gallery
Splitter
ユーティリティ
Accordion
Expander
Carousel
Calendar
EventsCalendar
Dialog
Editor
Pager
Tooltip
Wizard
メニュー
Menu
Tree
Ribbon
ビジュアライズ
LinearGauge
RadialGauge
Progressbar
Rating
Slider
モバイル向け
AppView
ListView
画像・ビデオ
Video Player

8. +
jQuery UI
収録ウィジェット
ユーティリティ
Accordion
Dialog
Tooltip
入力
Button
Datepicker
Spinner
Autocomplete
コンテナ
Tabs
メニュー
Menu
ビジュアライズ
Progressbar
Slider

9. +
Wijmo
収録ウィジェット
グリッド
Grid
Spread Sheet
入力
Combobox
InputText
InputDate
InputMask
InputNumber
List
Checkbox
Dropdown
Radio
Textbox
チャート
Barchart
Bubblechart
Compositechart
Linechart
Piechart
Scatterchart
コンテナ
Superpanel
Tabs
Gallery
Splitter
ユーティリティ
Accordion
Expander
Carousel
Calendar
EventsCalendar
Dialog
Editor
Pager
Tooltip
Wizard
メニュー
Menu
Tree
Ribbon
ビジュアライズ
LinearGauge
RadialGauge
Progressbar
Rating
Slider
モバイル向け
AppView
ListView
画像・ビデオ
Video Player

10. +
Demo
Wijmoを利用したアプリケーション
（チャート／グリッド／スライダー）
http://demo.componentone.com/ASPNET/StockPortfolio/Stocks

11. +
業務で要求される
WebアプリケーションのUI

12. +
日本の業務アプリケーションの傾向
15年以上にわたる製品サポートから見えるもの

伝統を重んじる

既存のワークフローや手順を変えたくない
•

Ex)ファンクションキーによるボタン操作
アーキテクチャが変わっても同じＵＩを求める
•
•

Ex)１画面あたりのデータ量が多い
Ex)「入力」に対する細部のこだわり
日本固有の要件が存在

Excel依存

IME制御

半角(1byte)と全角(2byte) とサロゲートペア(4byte)の制御

日付の表記方法（西暦／和暦）

同じ文字を複数の文字種で表現（氏名/ｼﾒｲ/しめい）

13. +
日本企業の業務アプリケーション
ありがちな要件
その１
Excelと同じ感覚で使いたい
Excelでできることは簡単にやれ
るでしょ？
顧客
顧客
既存Excelファイルを読み込んで
画面で入力したい
画面で入力したデータをExcel
ファイルに出力したい
顧客

14. +
Wijmo：SpreadJS[スプレッドJS]
Excelライクな操作性を実現するグリッド
•
Excelの操作性を実現
•
Excelの機能を踏襲
•
数式(320種類以上)や柔軟なセル連結等
•
Excelファイルのインポート／エクスポート（サーバー連携）
•
専用GUIデザイナ

15. +
Demo
SpreadJS[スプレッド]基本機能
http://wijmo.c1.grapecity.com/demo/SpreadJS/samples/

16. +
Demo
SpreadJS[スプレッド] Excel I/O
http://wijmo.c1.grapecity.com/demo/SpreadJS/samples/ExcelIOSample/

17. +
日本企業の業務アプリケーション
ありがちな要件
その２
既存デスクトップシステムと同じ
操作感覚（UI）にしたい
顧客
顧客
この紙伝票と同じ画面をつくって
ほしい

18. +
Wijmo：入力系ウィジェット
日本固有の業務要件をサポート
•
日本固有の入力要件に対応
•
日付の表記（西暦／和暦）
•
入力書式と表示書式の分離
•
半角(1byte)と全角(2byte) の制御
•
日本語文字種の入力制限
例1）入力時と表示時で異なる書式
入力時
表示時
例2）特定書式およびアンダースコアの表示
HTML5
Wijmo

19. +
Demo
日本仕様の入力フォーム

20. +
Wijmoの特長
フロントエンドでリッチなUIを簡単に提供できる
高機能なUIライブラリがワンセット
1.
•
多彩なウィジェットを数多く提供
業務アプリケーションに最適化
2.
•
Excelと親和性の高い操作性と機能を持つスプレッドシート
•
入力UIの細部で日本固有の要件を実現
マルチプラットフォームに最適化
3.
•
容易なデザイン設定
4.
•
5.
同一ウィジェットをモバイル環境でも利用可能
ThemeRollerとBootstrapサポート
スタンダードライブラリをサポート（→組み込みやすい！）

21. +
製品情報

22. +
製品ラインナップとライセンス
デュアルライセンスモデル
Wijmo
Professional
収録製品
Wijmo
Enterprise
Optional Pack for
Wijmo Enterprise
基本40
ウィジェット
Wijmo Professional
+SpreadJS
SpreadJS用
デザイナ＋Excel I/O
商用／
OSS(GPLv3)
商用のみ
ライセンス 商用／
OSS(GPLv3)
商用価格
１年契約
•
57,750円
94,500円
25,000円
（更新：23,100円）
（更新：37,800円）
（更新：10,500円）
商用ライセンス（１年契約のサブスクリプション）
•
１開発者につき１ライセンス必要（ランタイムフリー）
•
年３回（5月/9月/1月）メジャーバージョンアップ
•
サブスクリプション更新価格：２年目以降は本体価格の40%
•
Eメールサポート
全て税込価格

23. +
各種情報の入手方法
Wijmo専用Webサイトあります
http://wijmo.c1.grapecity.com
ウィジモ
検索

24. +
ブース出展してます！！
お気軽にお立ち寄りください
いまココ！
GrapeCityはこちら
★この会場の目の前★

25. +
ご清聴ありがとうございました。
Wijmo[ウィジモ]が皆様の開発のお役に立てますように