+JavaScriptライブラリ「Wijmo（ウィジモ）」による日本仕様のUI開発

February 13, 2014

グレープシティ株式会社山崎 顕由

ハッシュタグ：#devsumiDセッションID ：13-D-L

+質問ランチをとっているところ恐縮ですが・・・

1. 業務アプリケーションの開発がメイン（運用／テスト／マネージメント等含）の方？

2. GrapeCityのツールを利用したことがある方？

+Wijmo[ウィジモ]って何?

Web標準技術（HTML5／

JavaScript／CSS3）で開発された、

業務アプリケーションに必要

なUIウィジェットをワンセットにしたライブラリ集

+Wijmo[ウィジモ]

jQuery Mobile Webサイトでも紹介http://jquerymobile.com/resources/

＝ jQuery UI, jQuery Mobileベース

+Wijmo収録ウィジェット

コンテナ

Superpanel

Tabs

Gallery

Splitter

グリッド

Grid

Spread Sheet

チャート

Barchart

Bubblechart

Compositechart

Linechart

Piechart

Scatterchart

入力

Combobox

InputText

InputDate

InputMask

InputNumber

List

Checkbox

Dropdown

Radio

Textbox

メニュー

Menu

Tree

Ribbon

ビジュアライズ

LinearGauge

RadialGauge

Progressbar

Rating

Slider

ユーティリティ

Accordion

Expander

Carousel

Calendar

EventsCalendar

Dialog

Editor

Pager

Tooltip

Wizard

画像・ビデオ

Video Player

モバイル向け

AppView

ListView

+jQuery UI収録ウィジェット

コンテナ

Tabs

入力

ButtonDatepickerSpinner Autocomplete

メニュー

Menu

ビジュアライズ

Progressbar

Slider

ユーティリティ

Accordion

Dialog

Tooltip

+Wijmo収録ウィジェット

コンテナ

Superpanel

Tabs

Gallery

Splitter

グリッド

Grid

Spread Sheet

チャート

Barchart

Bubblechart

Compositechart

Linechart

Piechart

Scatterchart

入力

Combobox

InputText

InputDate

InputMask

InputNumber

List

Checkbox

Dropdown

Radio

Textbox

メニュー

Menu

Tree

Ribbon

ビジュアライズ

LinearGauge

RadialGauge

Progressbar

Rating

Slider

ユーティリティ

Accordion

Expander

Carousel

Calendar

EventsCalendar

Dialog

Editor

Pager

Tooltip

Wizard

画像・ビデオ

Video Player

モバイル向け

AppView

ListView

+

DemoWijmoを利用したアプリケーション

（チャート／グリッド／スライダー）

http://demo.componentone.com/ASPNET/StockPortfolio/Stocks

+

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

+日本の業務アプリケーションの傾向

伝統を重んじる

既存のワークフローや手順を変えたくない

• Ex)ファンクションキーによるボタン操作

アーキテクチャが変わっても同じＵＩを求める

• Ex)１画面あたりのデータ量が多い

• Ex)「入力」に対する細部のこだわり

日本固有の要件が存在

Excel依存

IME制御

半角(1byte)と全角(2byte) とサロゲートペア(4byte)の制御

日付の表記方法（西暦／和暦）

同じ文字を複数の文字種で表現（氏名/ｼﾒｲ/しめい）

15年以上にわたる製品サポートから見えるもの

+

顧客

日本企業の業務アプリケーションありがちな要件 その１

顧客

Excelと同じ感覚で使いたいExcelでできることは簡単にやれるでしょ？

既存Excelファイルを読み込んで画面で入力したい

画面で入力したデータをExcelファイルに出力したい

顧客

+Wijmo：SpreadJS[スプレッドJS]

• Excelの操作性を実現

• Excelの機能を踏襲

• 数式(320種類以上)や柔軟なセル連結等

• Excelファイルのインポート／エクスポート（サーバー連携）

• 専用GUIデザイナ

Excelライクな操作性を実現するグリッド

+

DemoSpreadJS[スプレッド]基本機能

http://wijmo.c1.grapecity.com/demo/SpreadJS/samples/

+

DemoSpreadJS[スプレッド] Excel I/O

http://wijmo.c1.grapecity.com/demo/SpreadJS/samples/ExcelIOSample/

+

顧客

日本企業の業務アプリケーションありがちな要件 その２

顧客

既存デスクトップシステムと同じ操作感覚（UI）にしたい

この紙伝票と同じ画面をつくってほしい

+Wijmo：入力系ウィジェット日本固有の業務要件をサポート

入力時 表示時

HTML5 Wijmo

例1）入力時と表示時で異なる書式

例2）特定書式およびアンダースコアの表示

• 日本固有の入力要件に対応

• 日付の表記（西暦／和暦）

• 入力書式と表示書式の分離

• 半角(1byte)と全角(2byte) の制御

• 日本語文字種の入力制限

+

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

+Wijmoの特長

1. 高機能なUIライブラリがワンセット

• 多彩なウィジェットを数多く提供

2. 業務アプリケーションに最適化

• Excelと親和性の高い操作性と機能を持つスプレッドシート

• 入力UIの細部で日本固有の要件を実現

3. マルチプラットフォームに最適化

• 同一ウィジェットをモバイル環境でも利用可能

4. 容易なデザイン設定

• ThemeRollerとBootstrapサポート

5. スタンダードライブラリをサポート（→組み込みやすい！）

フロントエンドでリッチなUIを簡単に提供できる

+

製品情報

+製品ラインナップとライセンス

• 商用ライセンス（１年契約のサブスクリプション）

• １開発者につき１ライセンス必要（ランタイムフリー）

• 年３回（5月/9月/1月）メジャーバージョンアップ

• サブスクリプション更新価格：２年目以降は本体価格の40%

• Eメールサポート

デュアルライセンスモデル

Wijmo Professional

Wijmo Enterprise

Optional Pack for Wijmo Enterprise

収録製品 基本40ウィジェット

Wijmo Professional+SpreadJS

SpreadJS用デザイナ＋Excel I/O

ライセンス 商用／OSS(GPLv3)

商用／OSS(GPLv3)

商用のみ

商用価格１年契約

57,750円（更新：23,100円）

94,500円（更新：37,800円）

25,000円（更新：10,500円）

全て税込価格

+

各種情報の入手方法Wijmo専用Webサイトあります

http://wijmo.c1.grapecity.com

ウィジモ 検索

+ブース出展してます！！お気軽にお立ち寄りください

GrapeCityはこちら★この会場の目の前★いまココ！

+

ご清聴ありがとうございました。

Wijmo[ウィジモ]が皆様の開発のお役に立てますように