オールインワンなJavaScriptライブラリ「Wijmo」の魅力/wijmo-allinone

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

グレープシティのオンラインセミナー「オールインワンなJavaScriptライブラリ『Wijmo』の魅力」のセッション資料です。

Transcript

1. オールインワンな JavaScript ライブラリ 「Wijmo」の魅力 グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 村上 功光 多様な案件に コレ 1つ！
2. 2 GrapeCity Developer Solutions はじめに - Wijmo について -
3. グレープシティ の JavaScript 製品 3 GrapeCity Developer Solutions • 40+ のコントロールを収録 • たった 1 つで多様な要件をカバー • 高性能スプレッドシートコントロール • Excel ライクを驚きのレベルで実現 • 日本仕様の入力コントロールセット • 全半角、検証、ふりがな、和暦の表示 • HTML5 時代の帳票エンジン • クライアントサイドで帳票出力 Wijmo SpreadJS InputManJS ActiveReportsJS オール in ONE 表計算 入力制御 帳票出力
4. Wijmo 収録コントロール例 4 GrapeCity Developer Solutions グリッドビュー チャート インプット ゲージ ピボット
5. Wijmo 収録機能一覧 5 GrapeCity Developer Solutions グリッドビュー データ入出力・閲覧 • フレックスグリッド • マルチロウ • フレックスシート 基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧 データ可視化 インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー チャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー） ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー
6. 6 GrapeCity Developer Solutions Wijmo の適用範囲
7. Wijmo 適用範囲 7 GrapeCity Developer Solutions server client network Front-end Back-end
8. 8 GrapeCity Developer Solutions 使い方
9. Wijmo FlexGrid による グリッド 表示 9 GrapeCity Developer Solutions
10. コード の記述例 10 GrapeCity Developer Solutions
11. 多様な参照 と インストール方法 に対応 11 GrapeCity Developer Solutions ES5 ES6 HTML JavaScript Command Line
12. 12 GrapeCity Developer Solutions Wijmo その 特長 と 魅力
13. 目次 13 GrapeCity Developer Solutions 1 2 3 多彩で高機能な収録コントロール 汎用ツールとしてのライセンス体系 Wijmo が掲げる 3 つのコンセプト
14. 14 GrapeCity Developer Solutions Wijmo が掲げる 3 つのコンセプト 1
15. Wijmo - ウィジモ - 15 GrapeCity Developer Solutions Wijmo ウィジモ オール in ONE 汎用型 多機能 高速・軽量 最先端 40 以上の コントロール と 機能 を収録 洗練されたアルゴリズムによる高速処理 と 極小モジュール Angular / React / Vue.js 、 ES5 / ES6 / TypeScript による開発に対応
16. 軽量であることの重要性 16 GrapeCity Developer Solutions server client network アクセス 画面表示 リクエスト レスポンス 重いモジュールは 時間が掛かります
17. FlexGrid モジュールサイズと速度例 17 GrapeCity Developer Solutions モジュールサイズ 速度パフォーマンス Wijmo 収録 FlexGrid 150KB 200ms ※ データ 100 万個 展開時のソート時間
18. Wijmo - ウィジモ - 18 GrapeCity Developer Solutions Wijmo ウィジモ オール in ONE 汎用型 多機能 高速・軽量 最先端 40 以上の コントロール と 機能 を収録 洗練されたアルゴリズムによる高速処理 と 極小モジュール Angular / React / Vue.js 、 ES5 / ES6 / TypeScript による開発に対応
19. Angular を使ったテーブルの実装例 19 GrapeCity Developer Solutions Angular でのテーブル設定 table.html （Angularにおけるページテンプレート） ポイント • HTML を拡張した記法 • タグ設定でテーブルのデータソースを指定
20. Wijmo を使った Angular 上での FlexGrid 実装例 20 GrapeCity Developer Solutions Angular における FlexGrid 設定例 table.html （Angularにおけるページテンプレート） ポイント 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 同じ記法で利用可能！ • Wijmo はフレームワークに合わせた 用法でお使いいただけます。
21. 人気の JS フレームワークに漏れなく対応 21 GrapeCity Developer Solutions Angular React Vue.js knockout AngularJS ✔︎ ✔︎ ✔︎ ✔︎ ✔︎
22. 22 GrapeCity Developer Solutions 多彩で高機能な収録コントロール 2
23. 多彩で高機能な収録コントロール 23 GrapeCity Developer Solutions 2.1 2.2 2.3 豊富なチャートとインプット 痒いところに手が届くナビゲーション系UI 3 種のグリッドビュー
24. 24 GrapeCity Developer Solutions 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 受注ID 受注日 担当者 記録日 更新 3 種のグリッドビュー 2.1 受注 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
25. FlexGrid 25 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…
26. MultiRow 26 GrapeCity Developer Solutions 柔軟なデータレイアウトに対応する複数行グリッド • 1レコード複数行の表示機能を持った グリッドコントロール • 柔軟な列のレイアウトで 複雑な明細表示も実現 • FlexGrid の拡張コントロール。 基本的なグリッド性能も ◎
27. FlexSheet 27 GrapeCity Developer Solutions マルチシート と 表計算 を実現するグリッド • スプレッドシート表示に特化した グリッドコントロール • マルチシートや数式・関数、 テーブル表示などの機能を実現 • FlexGrid の拡張コントロール。 基本的なグリッド性能も ◎
28. 多様なグリッド表示要件をカバー 28 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
29. • FlexGrid の内容を PDF ファイルとして出力する FlexGridPdfConverter を収録 Excel ・ PDF 出力 29 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 を収録
30. 出力例 （ FlexGrid → Excel ） 30 GrapeCity Developer Solutions
31. 31 GrapeCity Developer Solutions 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 受注ID 受注日 担当者 記録日 更新 豊富なチャートと 充実のインプット 2.2 受注 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
32. Wijmo の チャートコントロール 32 GrapeCity Developer Solutions 豊富な種類 高機能 • 80 種以上のチャートを収録 • 金融系に特化した 「ファイナンシャルチャート」 もご用意 • 凡例 • ズーム • 範囲選択 • ラベル • フィルタ • 対数軸 • 注釈 • 近似曲線 • Etc…
33. チャート機能の例 33 GrapeCity Developer Solutions ロウソク足 チャート 範囲選択 スライダー 選択内容が 上部のチャートに 反映されます
34. Wijmo の インプットコントロール 34 GrapeCity Developer Solutions 豊富な種類 高機能 • 入力フォーム開発で利用頻度の高い インプット系コントロールを網羅 • FlexGrid のセルに組み込むことも可能 • 日付入力 • 色入力 • コンボ • 時刻入力 • 色ピッカー • リスト • 数値入力 • マスク • Etc…
35. Wijmo の インプットコントロール 35 GrapeCity Developer Solutions 豊富な種類 高機能 • 入力フォーム開発で利用頻度の高い インプット系コントロールを網羅 • FlexGrid のセルに組み込むことも可能 • 日付入力 • 色入力 • コンボ • 時刻入力 • 色ピッカー • リスト • 数値入力 • マスク • Etc…
36. 36 GrapeCity Developer Solutions 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 受注ID 受注日 担当者 記録日 更新 痒いところに手が届く ナビゲーション系UI 2.3 受注 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
37. Wijmo の ツリービュー 37 GrapeCity Developer Solutions 階層構造を持ったデータの選択に最適な ツリーUI を提供 CSSによるカスタマイズ ノードへの画像設定 チェックボックスによる 項目選択
38. Wijmo のポップアップ 38 GrapeCity Developer Solutions 柔軟なカスタムに対応した使い易いポップアップ • システムにおける各種手続きの実装に 便利なポップアップコントロール • 親（呼び出し元）と関連付いた ポップアップのほか、単一の呼出にも対応 • CSSによるカスタマイズも可
39. 39 GrapeCity Developer Solutions 部署 A 部署 B 部署 C 部署 D 部署 E チーム 1 チーム 2 チーム 3 チーム 4 チーム 5 チーム 6 チーム 7 受注ID 受注日 担当者 記録日 更新 Wijmo1つで 多様な案件に対応 ！ ✔︎ 受注 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
40. 40 GrapeCity Developer Solutions 汎用ツールとしてのライセンス体系 3
41. Wijmo ライセンス体系 41 GrapeCity Developer Solutions 開発 ライセンス 配布 ライセンス • 年次更新スタイルのサブスクリプション形式 • 1開発者 88,000円 〜 • なし （ SaaS/ASPサービスへの組み込みおよび開発ツールの開発などで ご利用の場合は特別契約が必要となります。 )
42. 42 GrapeCity Developer Solutions まとめ
43. まとめ 43 GrapeCity Developer Solutions 1 2 3 多彩で高機能な収録コントロール - 開発要件を幅広くカバー - 汎用ツールとしてのライセンス体系 - 開発ライセンスのみで利用可 - Wijmo が掲げる 多機能・軽量/高速・最先端 という 3 つのコンセプト
44. Wijmo 参考事例 - 日本ビジネスシステムズ株式会社さま 44 GrapeCity Developer Solutions 日本ビジネスシステムズさま 事例記事 クラシックASPで開発された社内システムが、 企業の成長とともにJavaScriptライブラリ 「Wijmo（ウィジモ）」を利用した ASP.NET MVCシステムに成長。 内製化ならではのメリットとは？ https://www.grapecity.co.jp/developer/about-us/case/jbs
45. セミナーの内容や製品に関するご質問・ご相談を承っています 45 GrapeCity Developer Solutions お問い合わせ グレープシティ株式会社 ツール事業部 営業部 製品に関するご相談を オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催 など、柔軟にご対応可能です。 セミナーの内容に関してご質問がある方は グレープシティ営業部までお気軽に お問い合わせください。 050-5490-4661 sales@grapecity.com
46. END セミナー受講、誠にありがとうございました。