よくわかるグレープシティのJavaScriptラインナップ PLUS！ / GrapeCity ECHO week 2020

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

「よくわかるグレープシティのJavaScriptラインナップ PLUS！」

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

Transcript

1. よくわかる GrapeCity の JavaScript 製品ラインナップ グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 村上功光 PLUS
2. グレープシティ の JavaScript 製品 2 GrapeCity Developer Solutions SpreadJS スプレッド JS InputManJS インプットマン JS ActiveReportsJS アクティブレポート JS Wijmo ウィジモ
3. グレープシティ の JavaScript 製品 3 GrapeCity Developer Solutions 汎用型 用途 特化型 Wijmo SpreadJS InputManJS ActiveReportsJS • 40+ のコントロールを収録 • たった 1 つで多様な要件をカバー オール in ONE • 高性能スプレッドシートコントロール • Excel ライクを驚きのレベルで実現 • 日本仕様の入力コントロールセット • 全半角、検証、ふりがな、和暦の表示 • HTML5 時代の帳票エンジン • クライアントサイドで帳票出力 表計算 入力制御 帳票出力
4. 4 GrapeCity Developer Solutions 汎用型 - All in One -
5. Wijmo - ウィジモ - 5 GrapeCity Developer Solutions Wijmo ウィジモ オール in ONE 汎用型 多機能 高速・軽量 最先端 40 以上の コントロール と 機能 を収録 洗練されたアルゴリズムによる高速処理 と 極小モジュール Angular / React / Vue.js 、 TypeScript による開発に対応
6. Wijmo 収録コントロール例 6 GrapeCity Developer Solutions グリッドビュー チャート インプット ゲージ ピボット 150KB / 100万データのソートもわずか 200 [ms]
7. Wijmo 収録機能一覧 7 GrapeCity Developer Solutions グリッドビュー データ入出力・閲覧 • フレックスグリッド • マルチロウ • フレックスシート 基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧 データ可視化 インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー チャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー） ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー
8. 例: 業務システム要件と Wijmo 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 ツリービュー インプット チャート グリッド Wijmo で一括対応 人気の開発テクノロジーも幅広くカバー
9. Wijmo 参考事例 - 日本ビジネスシステムズ株式会社さま 9 GrapeCity Developer Solutions 日本ビジネスシステムズさま 事例記事 クラシックASPで開発された社内システムが、 企業の成長とともにJavaScriptライブラリ 「Wijmo（ウィジモ）」を利用した ASP.NET MVCシステムに成長。 内製化ならではのメリットとは？ https://www.grapecity.co.jp/developer/about-us/case/jbs FlexGrid Excel 出力
10. Wijmo 参考事例 - 日本ビジネスシステムズ株式会社さま 10 GrapeCity Developer Solutions 日本ビジネスシステムズさま 事例記事 クラシックASPで開発された社内システムが、 企業の成長とともにJavaScriptライブラリ 「Wijmo（ウィジモ）」を利用した ASP.NET MVCシステムに成長。 内製化ならではのメリットとは？ https://www.grapecity.co.jp/developer/about-us/case/jbs TreeView
11. Wijmo 参考事例 - 日本ビジネスシステムズ株式会社さま 11 GrapeCity Developer Solutions 日本ビジネスシステムズさま 事例記事 クラシックASPで開発された社内システムが、 企業の成長とともにJavaScriptライブラリ 「Wijmo（ウィジモ）」を利用した ASP.NET MVCシステムに成長。 内製化ならではのメリットとは？ https://www.grapecity.co.jp/developer/about-us/case/jbs 日付コントロール
12. 12 GrapeCity Developer Solutions 用途特化型 - 表計算 ・ 入力制御 ・ 帳票出力 -
13. （再） Wijmo 収録機能一覧 13 GrapeCity Developer Solutions グリッドビュー データ入出力・閲覧 • フレックスグリッド • マルチロウ • フレックスシート 基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧 データ可視化 インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー チャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー） ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー
14. （再） Wijmo 収録機能一覧 14 GrapeCity Developer Solutions グリッドビュー データ入出力・閲覧 • フレックスグリッド • マルチロウ • フレックスシート 基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧 データ可視化 インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー チャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー） ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー
15. （再） Wijmo 収録機能一覧 15 GrapeCity Developer Solutions グリッドビュー データ入出力・閲覧 • フレックスグリッド • マルチロウ • フレックスシート 基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧 データ可視化 インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー 用途特化型製品 • SpreadJS • InputManJS • ActiveReportsJS は「汎用」では対応できない ディープな要件をカバーできる ライブラリ。 どうして別製品 ？
16. 16 GrapeCity Developer Solutions SpreadJS - エクセルライクな表計算 -
17. SpreadJS - スプレッド JS - 17 GrapeCity Developer Solutions SpreadJS スプレッド JS 表計算 用途特化型 徹底的に Excel Excel ライクな UI と操作性 380を超える数式 チャートや数式バー、条件付き書式にも対応 xlsx ファイルの入出力もサポート
18. SpreadJS - FlexSheet （Wijmo） との比較例 18 GrapeCity Developer Solutions • 並び替えとフィルタリング • 100 の数式 • シート機能 オーソドックスな スプレッドシート機能 を実現する コントロール FlexSheet
19. SpreadJS - FlexSheet （Wijmo） との比較例 19 GrapeCity Developer Solutions • Excel ライクな UI と操作性 • 380+ の数式 と 数式バー • 書式設定 と 条件付き書式 • チャート や シェイプ にも対応 Microsoft Excel と同様の 外観・操作性・機能を提供する コントロール SpreadJS
20. SpreadJS はこんな要件に最適 20 GrapeCity Developer Solutions 画面に表計算機能が欲しいです。 エクセルっぽい感じで 関数なども使えると、なお良いです。 既存業務でエクセルを使用しています。 システム化を検討していますが、 使い勝手や操作感は変えたくありません。 お客様の要望 Wijmo で対応 SpreadJS で対応
21. 21 GrapeCity Developer Solutions InputManJS - 日本仕様の入力コントロール -
22. InputManJS - インプットマン JS - 22 GrapeCity Developer Solutions 和暦の表示 入力フォーマット 全角・半角 ふりがな 漢字・ひらがな・カタカナ
23. InputManJS - インプットマン JS - 23 GrapeCity Developer Solutions InputManJS インプットマン JS 入力制御 用途特化型 日本語制御 和暦・漢数字 ふりがな取得 全角・半角・ひらがな・カタカナに対応した フィルタや自動変換機能 カレンダーや日付時刻表示における和暦表示と 漢数字による数値表現 漢字を含む入力からはふりがなの取得も可能。
24. InputManJS - 機能例 24 GrapeCity Developer Solutions InputManJS テキストコントロール キーボードの入力状況が 表示されます 文字種変換機能 入力文字を自動で 所定の文字種に変換
25. InputManJS - 機能例 25 GrapeCity Developer Solutions InputManJS テキストコントロール キーボードの入力状況が 表示されます ふりがな取得機能 入力文字から ふりがなを取得
26. InputManJS - 機能例 26 GrapeCity Developer Solutions 和暦表示 設定 1 つで かんたん和暦対応 InputManJS カレンダーコントロール
27. カレンダー 日付時刻 数値 マスク テキスト ドロップダウンプラグイン InputManJS - 収録コントロール一覧 27 GrapeCity Developer Solutions 検証 リスト コンボ 複数行テキスト
28. 28 GrapeCity Developer Solutions ActiveReportsJS - クライアントサイド帳票エンジン -
29. クライアントサイドにおける帳票出力 29 GrapeCity Developer Solutions server client network 帳票生成 帳票定義 ファイル 帳票 データ
30. ActiveReportsJS - アクティブレポート JS - 30 GrapeCity Developer Solutions ActiveReportsJS アクティブレポート JS 帳票出力 用途特化型 クライアントサイド 帳票エンジン デザイナと ビューワ 日本仕様 バックエンドのテクノロジに依存しない帳票出力 クロスプラットフォームで動作する帳票デザイナと ブラウザを選ばないビューワが付属 グレープシティ ActiveReports シリーズの エッセンスを継承し日本の帳票仕様に細かく対応
31. 帳票デザイナ 31 GrapeCity Developer Solutions データフィールド を設定 ツールバーで 簡単レイアウト Windows / Mac 対応
32. 帳票ビューワ 32 GrapeCity Developer Solutions ⚫ ツールバーなどの外観は CSSによる変更に対応 ⚫ エンドユーザーに 帳票プレビューを提供する ビューワ ⚫ 検索や拡大/縮小のほか 印刷やPDF出力も 実行可能 ⚫ マルチブラウザに対応
33. 33 GrapeCity Developer Solutions まとめ - Summary -
34. 34 GrapeCity Developer Solutions GrapeCity の JS 製品 ⚫ 大別して 汎用型 と 用途特化型 に分かれる ⚫ 多様な案件を幅広くカバーする 汎用型ライブラリ ⚫ お客様のディープな要件に対応する 用途特化型ライブラリ 4 種のラインナップ
35. 各製品の特徴 35 GrapeCity Developer Solutions オール in ONE 表計算 入力制御 帳票出力 Wijmo SpreadJS InputManJS ActiveReportsJS 汎用型 用途特化型 • 40+ のコントロールを収録 • たった 1 つで多様な要件をカバー • 高性能スプレッドシートコントロール • Excel ライクを驚きのレベルで実現 • 日本仕様の入力コントロールセット • 全半角、検証、ふりがな、和暦の表示 • HTML5 時代の帳票エンジン • クライアントサイドで帳票出力
36. 36 GrapeCity Developer Solutions リリース予定の新機能をご紹介 - SpreadJS & InputManJS -
37. SpreadJS 新バージョン情報 37 GrapeCity Developer Solutions SpreadJS V14 J - 2021年 1月 リリース（予） 20 を超える 新機能追加 や 機能強化 を実施 デザイナコンポーネント や ファンネルチャートなどが登場。 外部アプリケーションからの画像貼り付けも可能に
38. • カスタマイズ により、 リボン内容の変更なども可能 • 開発アプリケーションへの デザイナ実装を実現 • コンポーネント化 した SpreadJSデザイナ をご提供 SpreadJS V14 J - デザイナコンポーネント 38 GrapeCity Developer Solutions
39. SpreadJS V14 J - 新しいチャート と 画像のペースト 39 GrapeCity Developer Solutions ファンネルチャート 外部アプリケーションからの画像貼り付け
40. SpreadJS V14 J - その他の新機能 40 GrapeCity Developer Solutions 数式機能 チャート スパークライン • チャート背景のカスタマイズ • シリーズ間隔のカスタマイズ • ドーナツチャートのカスタマイズ • データラベルの区切り文字 • レンジブロックスパークライン • カスケードスパークラインの機能強化 セル機能 • マルチカラムピッカー • セル背景へのパターン設定 • ヘッダセルへの数式 • XMATXH / XLOOKUP / LET 関数 • SpreadJS 独自関数の追加 • 反復計算
41. InputManJS 新バージョン情報 41 GrapeCity Developer Solutions InputManJS V3 J - 2021年 1月 リリース（予） 4つ の新しい入力コントロール 電卓やファンクションキー、 ソフトウエアキーボードコントロールの利用が可能に
42. InputManJS V3 J - 電卓コントロール 42 GrapeCity Developer Solutions 単体表示 と ドロップダウン ポップアップ電卓 電卓コントロール ドロップダウン電卓
43. InputManJS V3 J -ファンクションキー と ソフトウエアキーボード 43 GrapeCity Developer Solutions • FunctionKey に独自機能を割り当て • コントロールは非表示も可 • タブレット表示などに便利なキーボード • キー位置のランダム化など防犯機能も有 ファンクションキー ソフトウエアキーボード
44. 44 GrapeCity Developer Solutions 検索 devlog 最新情報はブログで配信中！
45. 45 GrapeCity Developer Solutions ECHO JS 製品関連セッション ⚫ 12月22日 DX 時代の帳票開発ツール ActiveReportsJS の使いどころを徹底解説 ⚫ 12月25日 多様な案件にコレ1つ！ オールインワンなライブラリ Wijmo の魅力
46. END