Web TECH FORUM 2017 in大阪 グレープシティ株式会社 テクニカルセールス　森谷勝

1. グレープシティの
JavaScriptライブラリ
グレープシティ 森谷 勝

2. GrapeCityのJavaScript製品ラインナップ
SPREADJS

3. HTML5/JavaScriptのUI
メリット
クライアントアプリケーションと同等の操作性
インストール不要
デメリット
古いブラウザでは動かない
初めての開発では学習コストがかかる

4. SPREADJS
WijmoとSpreadJSサポート
ブラウザで動くプログラム「JavaScript」
動作環境（ブラウザ）
Internet
Explorer Microsoft Edge Chrome Firefox Safari
IE9以上 ○ ○ ○ ○

6. Wijmo（ウィジモ）
Wijmoは、あらゆる業務アプリケーションの
要件に応えるJavaScript製品、多彩な製品ラ
インナップが収録されたセット製品です。
多彩な表現力と柔軟性を兼ね備えるグリッド
コントロールFlexGrid
棒グラフ、折れ線グラフ、散布図などの業務
に必要なチャート種別をサポートする
FlexChart
Excelのようなピボットテーブルの機能を
持ったOLAP
1レコードを複数行で表示し、視認性を高め
るグリッドコントロールMultiRowなど
またブラウザでExcelファイルとPDFファイ
ルの出力が出来ることも業務アプリケーショ
ンでは重要です。
Wijmo.FlexGrid
Wijmo.FlexChart
Wijmo.OLAP
Wijmo.MultiRow
・
・
・

7. 多彩な製品がオールインワン
グリッド チャート／ゲージ
入力
ピボットテーブル
Excel／PDF出力複数行グリッド

8. コントロール一覧
基本ライブラリ
Globalization
CollectionView
Theme
Clipboard
Event
Validation
PrintDocument
グリッド
FlexGrid
MultiRow
FlexSheet
入力
Calendar
InputDate
InputTime
InputDateTime
InputMask
InputNumber
ComboBox
MultiSelect
AutoComplete
MultiAutoComplete
ListBox
InputColor
ColorPicker
チャート
FlexChart
FlexPie
FinancialChart
FlexRadar
TreeMap
Sunburst
BoxWhisker
Waterfall
MovingAverage
TrendLine
ErrorBar
YFunction
ParametricFunction
ファイル
Excel
PDF
ナビゲーション
TreeView
Popup
Menu
データ可視化
OLAP
RadialGauge
LinearGauge
BulletGraph

9. コントロール一覧（日本語名）
基本ライブラリ
グローバリゼーション
データ管理
テーマ
クリップボード
イベント
検証
印刷
グリッド
データグリッド
複数行グリッド
スプレッドシート
入力
カレンダー
日付入力
時刻入力
日時入力
マスク入力
数値入力
コンボボックス
複数選択
入力補完
タグ入力
リストボックス
色入力
色選択
チャート
基本チャート
円、ドーナツ
株価
レーダー、ポーラー
ツリーマップ
サンバースト
箱ひげ図
ウォーターフォール
移動平均線
近似曲線
エラーバー
Y関数
パラメーター関数
ファイル
Excel
PDF
ナビゲーション
ツリービュー
ポップアップ
メニュー
データ可視化
ピボット分析
円形ゲージ
線形ゲージ
ブレットグラフ

10. プラガブル アーキテクチャ
Event
CollectionView
Control
Globalize
Styles
Directives
<wj-flex-grid>
<wj-flex-grid-column>
…
必須
任意 任意 任意 任意
任意
85KB/47KB
157KB
136KB 196KB 28KB 107KB
※Ver 5.20172.334時点
FlexGrid Filter
wijmo.grid.filter.js
FlexGrid GroupPanel
wijmo.grid.grouppanel.js
FlexGrid Detail
wijmo.grid.detail.js
ゲージ
wijmo.gauge.js
入力
wijmo.input.js その他
FlexGrid
wijmo.grid.js
拡張ライブラリ
基本ライブラリ
wijmo.js/css
AngularJS
wijmo.angular.js
FlexChart
wijmo.chart.js
FlexChart Analytics
wijmo.chart.analytics.js
FlexChart Annotation
wijmo.chart.annotation.js
FlexChart Interaction
wijmo.chart.interaction.js

11. ファイルサイズの比較

12. Wijmoの採用事例
弥生株式会社様
http://wijmo.c1.grapecity.com/casestudy_yayoi/
株式会社インテリジェンス様
http://wijmo.c1.grapecity.com/casestudy_intelligence/
Microsoft Dynamics CRM
http://wijmo.c1.grapecity.com/casestudy_ms/

13. Wijmo.FlexGrid

14. 拡張性の高いグリッドコントロール
Wijmo.FlexGrid
 高速／軽量／柔軟なカスタマイズ性
 1996年以来、様々なプラットフォームで提供
 日本の業務アプリにおけるグリッド要件を、 20年以上にわたり改善
 クライアントサイドでExcel／PDFに出力可能

15. の歴史
Visual Basic
VB5、VB6
WinRT / UWP
.NET Windows Forms
JavaScript
W P F / Silverlight
1996リリース
2001リリース
2013リリース 2014リリース
2010リリース
Wijmo.FlexGrid
Wijmo.FlexGrid

16. Wijmo.FlexGrid
業務で使うグリッドに求められること
データの直接編集
キー入力により自動的に編集を開始して値設定が可能
セル非編集状態から
キーボードで[9]を
入力

17. Wijmo.FlexGrid
コピー＆ペースト（複数行／複数列）
同一グリッド上でコピー＆ペースト
Excelとのコピー＆ペースト
FlexGrid
Excel

18. Wijmo.FlexGrid
キーボード操作
Excelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能
キー 動作
[Enter] 下方向セル移動
[Shift]+[Enter] 上方向セル移動
[Tab] 右方向セル移動
[Shift]+[Tab] 左方向セル移動
[F2] セル編集開始
[Ctl]+[A] セル全選択
[Ctl]+[C] コピー
[Ctl]+[V] ペースト

19. Wijmo.FlexGrid
フィルターとソート
Excelのようなフィルターとソート

20. Wijmo.FlexGrid
スクロールの固定

21. Wijmo.CollectionView

22. とUIのデータバインドWijmo.CollectionView
Wijmo.CollectionView
Wijmo.FlexGrid
JSON（データ）
{
“顧客名“ : “洋風居酒屋けい・えっくす”,
“住所“ : “伊丹市池尻 5-XX”,
“郵便番号“ : “664-0027”,
“都道府県“ : “兵庫県”
},
{
“顧客名“ : “イルカランド”,
“住所“ : “成田市台方 XXX”,
“郵便番号“ : “286-0003”,
“都道府県“ : “千葉県”
}
データバインド
（双方向）
提供する処理
カレントレコード管理 ソート／フィルタ
ページング
グループ化
編集
変更データの追跡
概念図

23. 変更データの追跡
実行例（変更データの追跡）
オンラインデモで実際の動作を確認可能
<http://demo.grapecity.com/wijmo/5/Angular/Explorer/Explorer/#/infra/trackChanges>
編集データのみをメモリ上にプールで
きます。
クライアント側のデータ管理を容易に
してサーバー側に編集データのみを送
信できるためPostデータの削減にも貢
献します。
編集
Wijmo.CollectionView

24. Wijmo.FlexGrid
グループ化
＋Wijmo.CollectionView

25. Wijmo.MultiRow

26. 1レコードを複数行で表示
MultiRowは、1レコードを複数行で表示できるグリッドコントロー
ルです。通常のグリッドと比較して、横方向にスクロールしなくて
も多くのフィールドを1画面で表示できるという特長があります。
MultiRowは、FlexGridの拡張コントロールであり、FlexGridと同
じ操作性と機能を提供し、列レイアウト定義情報を設定するだけで
複数行のレイアウトでグリッドを表示することができます。
Wijmo.MultiRow

27. Wijmo.MultiRow ギャラリー

28. SpreadJS

29. New SpreadJS（２つのコントロール）
新しくリリースされるSpreadJSは、２つ
のコントロールが収録されます。
Spread.Sheetsは、 HTML5のCanvas上
にExcelライクなスプレッドシートを描画、
Excelの操作性と豊富なExcel互換機能を
提供します。
新たに追加されるSpread.Viewsは、グ
リッドのデータを様々なレイアウトで表
現できるコントロールです。
ツリー、ガントビュー、タイムライン、
カレンダーなどのさまざまなビューをデ
ザインすることが出来ます。
Spread.Sheets
Spread.Views
2017年9月27日リリース

30. ２つのコントロール
Spread.Sheets Spread.Views

31. SpreadJSの採用事例
リックソフト株式会社様
http://jp.spread.grapecity.com/spreadjs/case/ricksoft/
リックソフト株式会社様は、プ
ロジェクト管理ツール「JIRA」
とプロジェクト管理情報ツール
「Confluence」を中心とした多
くの製品ラインナップをもつア
トラシアン社の正規販売代理店。
近年ではユーザーからのフィー
ドバックをもとにしたアドオン
製品の開発にも注力し同社が3
番目にリリースしたアドオン製
品「IssueEditor for JIRA（イ
シューエディター）」の開発に
SpreadJSを採用。
“Canvasベースで高速に動くこと“
パフォーマンス重視の開発には
SpreadJSが最適でした

32. SPREADJS
Spread.Sheets

33. Excelの操作性と機能を持ったコントロール
Spread.Sheets

34. の歴史
Visual Basic
VB5、VB6
.NET Windows Forms
ASP.NET Web Forms
W P F
JavaScript
1994リリース
Spread.Sheets 2003リリース
2004リリース 2012リリース
2016リリース
Spread.Sheets

35. Excelの再現性Spread.Sheets

36. Excelの再現性Spread.Sheets
数式と関数
Spread.Sheetsは、日付、財務、統計、検
索、文字列など380種以上のExcel関数をサ
ポートしています。
ほぼ全ての表計算関数がExcel互換となって
おり、Excelファイルをインポートした場合
も集計結果を高い精度で再現します。
書式設定
Spread.Sheetsは、Excelと同様の書式文字
列を使用して、セルデータの表示形式を柔
軟に設定できます。日本市場に欠かせない
和暦日付や通貨記号表示にもしっかり対応
しています。

37. SPREADJS
Spread.Views

38. Spread.Views
データを様々なレイアウトで表現できる新しいグリッド

39. Spread.Views 1レコードを複数行で表示

40. Spread.Views 日付に関連する表現

41. Spread.Views タスクや工程の管理

42. Spread.Views 画像と関連付けされるデータ

43. モバイルでの視認性Spread.Views

44. モバイルでの視認性Spread.Views

45. お問い合わせ窓口
JavaScriptライブラリに関する
お問い合せ窓口
Eメール : sales@grapecity.com
電話番号: 048－222－3001
営業時間: AM9:00～12:00
PM1:00～5:30
（月～金）
JavaScriptライブラリ導入に関するご相談、評価版の使
い方や製品仕様など、お気軽にお問い合わせください。