よくわかるグレープシティのJavaScriptラインナップ/grapecity-javascript-lineup

よくわかる GrapeCity の JavaScript 製品ラインナップグレープシティ株式会社ツール事業部プロダクトマーケティングチーム村上功光

2 GrapeCity Developer Solutions はじめに - 昨今のウェブ開発について -

Web Application Web アプリケーションの構造と開発手法（いままで） 3 GrapeCity
Developer Solutions server client network ex) ASP.NET Web Forms

Web アプリケーションの構造と開発手法（このごろ） 4 GrapeCity Developer Solutions
server client network Front-end Back-end

Web アプリケーションの構造と開発手法（このごろ） 5 GrapeCity Developer Solutions
Back-end Front-end network オンプレミス • SaaS • PaaS • IaaS • Web API • etc… クラウド

フロントエンド開発と JavaScript ライブラリ 6 GrapeCity Developer Solutions Front-end フロントエンド開発
• Web ブラウザ上でバックエンドと通信、データの表示・編集・更新する処理を開発 • HTML5 と JavaScript、およびそれらの関連技術を利用する • 高度でリッチな処理にはライブラリを活用する

Wijmo 利用例 7 GrapeCity Developer Solutions

Wijmo 利用例 8 GrapeCity Developer Solutions <!DOCTYPE html> <html> <head>
・・・ </head> <body> <div id="flexGrid"></div> <script> var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', { // データ設定処理を記述 }); </script> </body> </html>

9 GrapeCity Developer Solutions グレープシティの JavaScript 製品ラインナップ

4 種類の JavaScript 製品 10 GrapeCity Developer Solutions 汎用型用途特化型
オール in ONE Wijmo • 40+ のコントロールを収録 • たった 1 つで多様な要件をカバー表計算入力制御帳票出力 SpreadJS InputManJS ActiveReportsJS • 高性能スプレッドシートコントロール • Excel ライクを驚きのレベルで実現 • 日本仕様の入力コントロールセット • 全半角、検証、ふりがな、和暦の表示 • HTML5 時代の帳票エンジン • クライアントサイドで帳票出力

11 GrapeCity Developer Solutions 汎用型 - All in One -

Wijmo - ウィジモ - 12 GrapeCity Developer Solutions Wijmo ウィジモ
オール in ONE 汎用型多機能高速・軽量最先端 40 以上のコントロールと機能を収録洗練されたアルゴリズムによる高速処理と極小モジュール Angular / React / Vue.js 、 TypeScript による開発に対応

Wijmo 収録コントロール例 13 GrapeCity Developer Solutions グリッドビューチャートインプットゲージ
ピボット 150KB / 100万データのソートもわずか 200 [ms]

Wijmo 収録機能一覧 14 GrapeCity Developer Solutions グリッドビューデータ入出力・閲覧 • フレックスグリッド
• マルチロウ • フレックスシート基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧データ可視化インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカーチャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー）ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー

例: 業務システム要件と Wijmo 15 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 で一括対応対応 JS フレームワーク • Angular / React / Vue.js • AngularJS • knockout 加えて、TypeScript 型定義を提供人気の開発テクノロジーも幅広くカバー

Wijmo 参考事例 - 日本ビジネスシステムズ株式会社さま 16 GrapeCity Developer Solutions 日本ビジネスシステムズさま事例記事
クラシックASPで開発された社内システムが、企業の成長とともにJavaScriptライブラリ「Wijmo（ウィジモ）」を利用した ASP.NET MVCシステムに成長。内製化ならではのメリットとは？ https://www.grapecity.co.jp/developer/about-us/case/jbs

19 GrapeCity Developer Solutions 用途特化型 - 表計算・入力制御・
帳票出力 -

（再） Wijmo 収録機能一覧 20 GrapeCity Developer Solutions グリッドビューデータ入出力・閲覧 •
フレックスグリッド • マルチロウ • フレックスシート基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧データ可視化インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカーチャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー）ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー

フレックスグリッド • マルチロウ • フレックスシート基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧データ可視化インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカーチャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー）ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー

フレックスグリッド • マルチロウ • フレックスシート基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • CollectionView • クリップボード • 多言語 • イベント • 検証 • テーマ • エクセル出力 • PDF 出力 • PDF ビューワ • 印刷 • 帳票閲覧データ可視化インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー用途特化型製品 • SpreadJS • InputManJS • ActiveReportsJS は「汎用」では対応できないディープな要件をカバーできるライブラリ。どうして別製品？

23 GrapeCity Developer Solutions SpreadJS - エクセルライクな表計算 -

SpreadJS - スプレッド JS - 24 GrapeCity Developer Solutions SpreadJS
スプレッド JS 表計算用途特化型徹底的に Excel Excel ライクな UI と操作性 380を超える数式チャートや数式バー、条件付き書式にも対応 xlsx ファイルの入出力もサポート

SpreadJS - FlexSheet （Wijmo）との比較例 25 GrapeCity Developer Solutions •
並び替えとフィルタリング • 100 の数式 • シート機能オーソドックスなスプレッドシート機能を実現するコントロール FlexSheet

SpreadJS - FlexSheet （Wijmo）との比較例 26 GrapeCity Developer Solutions •
Excel ライクな UI と操作性 • 380+ の数式と数式バー • 書式設定と条件付き書式 • チャートやシェイプにも対応 Microsoft Excel と同様の外観・操作性・機能を提供するコントロール SpreadJS

SpreadJS はこんな要件に最適 27 GrapeCity Developer Solutions 画面に表計算機能が欲しいです。エクセルっぽい感じで関数なども使えると、なお良いです。既存業務でエクセルを使用しています。
システム化を検討していますが、使い勝手や操作感は変えたくありません。お客様の要望 Wijmo で対応 SpreadJS で対応

28 GrapeCity Developer Solutions InputManJS - 日本仕様の入力コントロール -

InputManJS - インプットマン JS - 29 GrapeCity Developer Solutions 和暦の表示
入力フォーマット全角・半角ふりがな漢字・ひらがな・カタカナ

InputManJS - インプットマン JS - 30 GrapeCity Developer Solutions InputManJS
インプットマン JS 入力制御用途特化型日本語制御和暦・漢数字ふりがな取得全角・半角・ひらがな・カタカナに対応したフィルタや自動変換機能カレンダーや日付時刻表示における和暦表示と漢数字による数値表現漢字を含む入力からはふりがなの取得も可能。

InputManJS - 機能例 31 GrapeCity Developer Solutions InputManJS テキストコントロールキーボードの入力状況が
表示されます文字種変換機能入力文字を自動で所定の文字種に変換

InputManJS - 機能例 32 GrapeCity Developer Solutions InputManJS テキストコントロールキーボードの入力状況が
表示されますふりがな取得機能入力文字からふりがなを取得

InputManJS - 機能例 33 GrapeCity Developer Solutions 和暦表示設定 1
つでかんたん和暦対応 InputManJS カレンダーコントロール

カレンダー日付時刻数値マスクテキストドロップダウンプラグイン InputManJS - 収録コントロール一覧 34
GrapeCity Developer Solutions 検証リストコンボ複数行テキスト

35 GrapeCity Developer Solutions ActiveReportsJS - クライアントサイド帳票エンジン -

クライアントサイドにおける帳票出力 36 GrapeCity Developer Solutions server client network 帳票生成帳票定義
ファイル帳票データ

ActiveReportsJS - アクティブレポート JS - 37 GrapeCity Developer Solutions ActiveReportsJS
アクティブレポート JS 帳票出力用途特化型クライアントサイド帳票エンジンデザイナとビューワ日本仕様バックエンドのテクノロジに依存しない帳票出力クロスプラットフォームで動作する帳票デザイナとブラウザを選ばないビューワが付属グレープシティ ActiveReports シリーズのエッセンスを継承し日本の帳票仕様に細かく対応

帳票デザイナ 38 GrapeCity Developer Solutions データフィールドを設定ツールバーで簡単レイアウト Windows
/ Mac 対応

帳票ビューワ 39 GrapeCity Developer Solutions  ツールバーなどの外観は CSSによる変更に対応  エンドユーザーに
帳票プレビューを提供するビューワ  検索や拡大/縮小のほか印刷やPDF出力も実行可能  マルチブラウザに対応

40 GrapeCity Developer Solutions まとめ - Summary -

41 GrapeCity Developer Solutions GrapeCity の JS 製品  大別して
汎用型と用途特化型に分かれる  多様な案件を幅広くカバーする汎用型ライブラリ  お客様のディープな要件に対応する用途特化型ライブラリ 4 種のラインナップ

各製品の特徴 42 GrapeCity Developer Solutions オール in ONE 表計算入力制御
帳票出力 Wijmo SpreadJS InputManJS ActiveReportsJS 汎用型用途特化型 • 40+ のコントロールを収録 • たった 1 つで多様な要件をカバー • 高性能スプレッドシートコントロール • Excel ライクを驚きのレベルで実現 • 日本仕様の入力コントロールセット • 全半角、検証、ふりがな、和暦の表示 • HTML5 時代の帳票エンジン • クライアントサイドで帳票出力

セミナーの内容や製品に関するご質問・ご相談を承っています 43 GrapeCity Developer Solutions お問い合わせグレープシティ株式会社ツール事業部営業部製品に関するご相談を
オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催など、柔軟にご対応可能です。セミナーの内容に関してご質問がある方はグレープシティ営業部までお気軽にお問い合わせください。 050-5490-4661 [email protected]

END セミナー受講、誠にありがとうございました。

よくわかるグレープシティのJavaScriptラインナップ/grapecity-javascr...

よくわかるグレープシティのJavaScriptラインナップ/grapecity-javascript-lineup

More Decks by メシウス 開発支援ツール

Other Decks in Programming

Featured

Transcript

More Decks by メシウス開発支援ツール