よくわかる 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 ・・・ var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', { // データ設定処理を記述 });

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

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

Wijmo 参考事例 - 日本ビジネスシステムズ株式会社さま 18 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 ビューワ • 印刷 • 帳票閲覧 データ可視化 インプット • カレンダー • 日付入力 • 時刻入力 • 日付時刻入力 • マスク入力 • 数値入力 • コンボボックス • オートコンプリート • マルチオートコンプリート • リストボックス • カラーピッカー チャート • フレックスチャート • 金融チャート • チャート（バー） • チャート（折れ線） • チャート（面） • チャート（バブル） • チャート（散布図） • チャート（パイ） • チャート（サンバースト） • チャート（ポーラー） ナビゲーション • チャート（スタック） • チャート（ラダー） • タブパネル • ツリービュー • ポップアップ • メニュー

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

（再） Wijmo 収録機能一覧 22 GrapeCity Developer Solutions グリッドビュー データ入出力・閲覧 • フレックスグリッド • マルチロウ • フレックスシート 基本機能 • ピボット • ゲージ（ラディアル） • ゲージ（リニア） • ブレットグラフ • 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 sales@grapecity.com

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