多様な要件にコレ1つ！オールインワンなJavaScriptライブラリ「Wijmo」の魅力（増補版） / GrapeCity ECHO week 2020

※ グレープシティ株式会社は、2023年11月1日よりメシウス株式会社に社名を変更しました

2020年12月21日～25日 開催
オンラインイベント「GrapeCity ECHO week 2020」、5日目のセッション資料です。

「多様な要件にコレ1つ！オールインワンなJavaScriptライブラリ「Wijmo」の魅力（増補版）」

グレープシティ株式会社
ツール事業部 マーケティング部
村上 功光

Transcript

1. オールインワンな JavaScript ライブラリ 「Wijmo」の魅力 （増補版） グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 村上 功光 多様な案件に コレ 1つ！
2. 2 GrapeCity Developer Solutions はじめに - Wijmo について -
3. グレープシティ の JavaScript 製品 3 GrapeCity Developer Solutions SpreadJS スプレッド JS InputManJS インプットマン JS ActiveReportsJS アクティブレポート JS Wijmo ウィジモ
4. Wijmo - ウィジモ - 4 GrapeCity Developer Solutions Wijmo ウィジモ オール in ONE 汎用型 多機能 高速・軽量 最先端 40 以上の コントロール と 機能 を収録 洗練されたアルゴリズムによる高速処理 と 極小モジュール Angular / React / Vue.js 、 ES5 / ES6 / TypeScript による開発に対応
5. Wijmo 収録機能一覧 5 GrapeCity Developer Solutions グリッドビュー データ入出力・閲覧 • フレックスグリッド • マルチロウ • フレックスシート 基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧 データ可視化 インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー チャート • チャート（スタック） • チャート（ラダー） ナビゲーション • チャート（ファンネル） • チャート（金融） • タブパネル • ツリービュー • ポップアップ • メニュー • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー）
6. 目次 6 GrapeCity Developer Solutions 1 2 3 脇を固めるユーティリティ系ライブラリ リーズナブルなライセンス システムの画面開発を全方位支援する豊富な UI
7. 7 GrapeCity Developer Solutions 1 システムの画面開発を 全方位支援する豊富な UI
8. 業務システムにおける画面要件の例 8 GrapeCity Developer Solutions 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 受注ID 受注日 担当者 記録日 更新 受注 A 受注 B 受注 C 受注 D 受注 E 1月 77,194 90,175 90,495 61,656 38,752 2月 81,872 27,803 76,611 13,799 32,300 3月 7,214 33,314 92,928 82,151 95,337 4月 58,982 59,156 3,285 27,198 60,872 5月 2,685 67,367 59,764 6,428 29,048 6月 27,324 51,082 72,655 16,358 94,471 7月 13,830 91,735 92,454 79,052 67,425 8月 22,033 78,909 71,665 65,461 39,239 9月 42,749 72,391 23,883 21,217 66,955 グリッド チャート インプット ツリービュー 個別のUI選定は大変 Wijmo で 解決
9. 9 GrapeCity Developer Solutions Wijmo の UI コントロール ⚫ 3 種の グリッドビュー ⚫ 80+ の チャート と 10+ の インプット ⚫ アプリの利便性を向上させる ナビゲーション
10. 10 GrapeCity Developer Solutions 3 種 のグリッドビュー
11. FlexGrid 11 GrapeCity Developer Solutions Wijmoを代表するグリッドコントロール 主な機能 No. Name Weight Symbol 1 Hydrogen 1.0079 H 2 Helium 4.0026 He 3 Lithium 6.941 Li 4 Beryllium 9.0122 Be 5 Boron 10.811 B 6 Carbon 12.0107 C 7 Nitrogen 14.0067 N 8 Oxygen 15.9994 O 9 Fluorine 18.9984 F 10 Neon 20.1797 Ne • ユーザーの半数以上が使用する人気 UI • 高速 / 軽量 • 多機能 • ソート • グループ化 • 集計 • フィルタ • ヘッダー • 階層表示 • 検索 • フッター • Etc…
12. MultiRow 12 GrapeCity Developer Solutions 柔軟なデータレイアウトに対応する複数行グリッド • 1レコード複数行の表示機能を持った グリッドコントロール • 柔軟な列のレイアウトで 複雑な明細表示も実現 • FlexGrid の拡張コントロール。 基本的なグリッド性能も ◎
13. FlexSheet 13 GrapeCity Developer Solutions マルチシート と 表計算 を実現するグリッド • スプレッドシート表示に特化した グリッドコントロール • マルチシートや数式・関数、 テーブル表示などの機能を実現 • FlexGrid の拡張コントロール。 基本的なグリッド性能も ◎
14. 多様なグリッド表示要件をカバー 14 GrapeCity Developer Solutions F l e x G r i d Multi R o w F l e x Sheet システムの基本 一覧表示をもれなくカバー ！ No. Name Weight Symbol 1 Hydrogen 1.0079 H 2 Helium 4.0026 He 3 Lithium 6.941 Li
15. 15 GrapeCity Developer Solutions 80+ の チャート / 10+ の インプット
16. Wijmo の チャートコントロール 16 GrapeCity Developer Solutions 豊富な種類 高機能 • 80 種以上のチャートを収録 • 金融系に特化した 「ファイナンシャルチャート」 もご用意 • 凡例 • ズーム • 範囲選択 • ラベル • フィルタ • 対数軸 • 注釈 • 近似曲線 • Etc…
17. チャート機能の例 17 GrapeCity Developer Solutions ロウソク足 チャート 範囲選択 スライダー 選択内容が 上部のチャートに 反映されます
18. Wijmo のインプットコントロール 18 GrapeCity Developer Solutions マスク 時刻入力 カレンダー 数値 オート コンプリート カラーピッカー
19. Wijmo のインプットコントロール 19 GrapeCity Developer Solutions タグ 複数列コンボボックス FlexGrid x Input コントロール カスタムセル
20. 20 GrapeCity Developer Solutions アプリの利便性を向上させる ナビゲーション UI
21. ツリービュー 21 GrapeCity Developer Solutions 階層構造を持ったデータの選択に最適な ツリーUI を提供 CSSによるカスタマイズ ノードへの画像設定 チェックボックスによる 項目選択
22. タブパネル 22 GrapeCity Developer Solutions タブパネルでコンテンツを切り替え • アプリ内のコンテンツ整理に最適な タブパネルを提供 • マークアップで設定できるかんたん設計
23. Wijmo のポップアップ 23 GrapeCity Developer Solutions 柔軟なカスタムに対応した使い易いポップアップ • システムにおける各種手続きの実装に 便利なポップアップコントロール • 親（呼び出し元）と関連付いた ポップアップのほか、単一の呼出にも対応 • CSSによるカスタマイズも可
24. 24 GrapeCity Developer Solutions 2 脇を固める ユーティリティ系ライブラリ
25. 25 GrapeCity Developer Solutions Wijmo の ライブラリ ⚫ Excel / PDF データ出力 ⚫ かんたん多言語対応 ⚫ 画面全体で実現する Undo と Redo
26. 26 GrapeCity Developer Solutions Excel / PDF データ出力
27. • FlexGrid の内容を PDF ファイルとして出力する FlexGridPdfConverter を収録 Excel ・ PDF 出力 27 GrapeCity Developer Solutions Excel PDF No. Name Weight Symbol 1 Hydrogen 1.0079 H 2 Helium 4.0026 He 3 Lithium 6.941 Li 4 Beryllium 9.0122 Be 5 Boron 10.811 B 6 Carbon 12.0107 C 7 Nitrogen 14.0067 N 8 Oxygen 15.9994 O 9 Fluorine 18.9984 F 10 Neon 20.1797 Ne • FlexGrid の内容を Excel ファイルとして出力する FlexGridXlsxConverter を収録
28. 出力例 （ FlexGrid → Excel ） 28 GrapeCity Developer Solutions
29. 29 GrapeCity Developer Solutions かんたん 多言語対応
30. グローバリゼーション機能 30 GrapeCity Developer Solutions JavaScript > 2020年11月30日 > Monday, November 30, 2020 > 2020년 11월 30일 월요일 Command Line Command Line Command Line （JP Culture 参照時の結果） （US Culture 参照時の結果） （KR Culture 参照時の結果） 1つのコードで 多様な言語に 対応できます
31. 31 GrapeCity Developer Solutions 画面全体で実現する Undo と Redo
32. Undoスタック機能 32 GrapeCity Developer Solutions 画面全体の Undo/Redo をWijmoで実現 • 画面上の変更を追跡し、Undo/Redo を 可能にする Undo スタック 機能 • Wijmo コントロールのほか 通常のHTML要素の変更も追跡 • Ctrl + Z / Ctrl + Y キー処理への関連づけは 不要。 Wijmo が自動で処理。
33. 33 GrapeCity Developer Solutions 3 リーズナブルなライセンス
34. Wijmo ライセンス体系 34 GrapeCity Developer Solutions 開発 ライセンス 配布 ライセンス • 年次更新スタイルのサブスクリプション形式 • 1開発者 88,000円 〜 • なし （ SaaS/ASPサービスへの組み込みおよび開発ツールの開発などで ご利用の場合は特別契約が必要となります。 )
35. まとめ 35 GrapeCity Developer Solutions 1 2 3 ユーティリティ系ライブラリ で高性能アプリを効率的に開発 リーズナブルなライセンス 豊富な UI でシステムの画面開発をもれなくカバー
36. END