Tweet
Tweet

Slide 1

Slide 1 text

オールインワンな JavaScript ライブラリ 「Wijmo」の魅力 グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 村上 功光 多様な案件に コレ 1つ！

Slide 2

Slide 2 text

2 GrapeCity Developer Solutions はじめに - Wijmo について -

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Wijmo 収録コントロール例 4 GrapeCity Developer Solutions グリッドビュー チャート インプット ゲージ ピボット

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 GrapeCity Developer Solutions Wijmo の適用範囲

Slide 7

Slide 7 text

Wijmo 適用範囲 7 GrapeCity Developer Solutions server client network Front-end Back-end

Slide 8

Slide 8 text

8 GrapeCity Developer Solutions 使い方

Slide 9

Slide 9 text

Wijmo FlexGrid による グリッド 表示 9 GrapeCity Developer Solutions

Slide 10

Slide 10 text

コード の記述例 10 GrapeCity Developer Solutions

Slide 11

Slide 11 text

多様な参照 と インストール方法 に対応 11 GrapeCity Developer Solutions ES5 ES6 HTML JavaScript Command Line

Slide 12

Slide 12 text

12 GrapeCity Developer Solutions Wijmo その 特長 と 魅力

Slide 13

Slide 13 text

目次 13 GrapeCity Developer Solutions 1 2 3 多彩で高機能な収録コントロール 汎用ツールとしてのライセンス体系 Wijmo が掲げる 3 つのコンセプト

Slide 14

Slide 14 text

14 GrapeCity Developer Solutions Wijmo が掲げる 3 つのコンセプト 1

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

軽量であることの重要性 16 GrapeCity Developer Solutions server client network アクセス 画面表示 リクエスト レスポンス 重いモジュールは 時間が掛かります

Slide 17

Slide 17 text

FlexGrid モジュールサイズと速度例 17 GrapeCity Developer Solutions モジュールサイズ 速度パフォーマンス Wijmo 収録 FlexGrid 150KB 200ms ※ データ 100 万個 展開時のソート時間

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Angular を使ったテーブルの実装例 19 GrapeCity Developer Solutions Angular でのテーブル設定 table.html （Angularにおけるページテンプレート） ポイント • HTML を拡張した記法 • タグ設定でテーブルのデータソースを指定

Slide 20

Slide 20 text

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 はフレームワークに合わせた 用法でお使いいただけます。

Slide 21

Slide 21 text

人気の JS フレームワークに漏れなく対応 21 GrapeCity Developer Solutions Angular React Vue.js knockout AngularJS ✔︎ ✔︎ ✔︎ ✔︎ ✔︎

Slide 22

Slide 22 text

22 GrapeCity Developer Solutions 多彩で高機能な収録コントロール 2

Slide 23

Slide 23 text

多彩で高機能な収録コントロール 23 GrapeCity Developer Solutions 2.1 2.2 2.3 豊富なチャートとインプット 痒いところに手が届くナビゲーション系UI 3 種のグリッドビュー

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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…

Slide 26

Slide 26 text

MultiRow 26 GrapeCity Developer Solutions 柔軟なデータレイアウトに対応する複数行グリッド • 1レコード複数行の表示機能を持った グリッドコントロール • 柔軟な列のレイアウトで 複雑な明細表示も実現 • FlexGrid の拡張コントロール。 基本的なグリッド性能も ◎

Slide 27

Slide 27 text

FlexSheet 27 GrapeCity Developer Solutions マルチシート と 表計算 を実現するグリッド • スプレッドシート表示に特化した グリッドコントロール • マルチシートや数式・関数、 テーブル表示などの機能を実現 • FlexGrid の拡張コントロール。 基本的なグリッド性能も ◎

Slide 28

Slide 28 text

多様なグリッド表示要件をカバー 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

Slide 29

Slide 29 text

• 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 を収録

Slide 30

Slide 30 text

出力例 （ FlexGrid → Excel ） 30 GrapeCity Developer Solutions

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Wijmo の チャートコントロール 32 GrapeCity Developer Solutions 豊富な種類 高機能 • 80 種以上のチャートを収録 • 金融系に特化した 「ファイナンシャルチャート」 もご用意 • 凡例 • ズーム • 範囲選択 • ラベル • フィルタ • 対数軸 • 注釈 • 近似曲線 • Etc…

Slide 33

Slide 33 text

チャート機能の例 33 GrapeCity Developer Solutions ロウソク足 チャート 範囲選択 スライダー 選択内容が 上部のチャートに 反映されます

Slide 34

Slide 34 text

Wijmo の インプットコントロール 34 GrapeCity Developer Solutions 豊富な種類 高機能 • 入力フォーム開発で利用頻度の高い インプット系コントロールを網羅 • FlexGrid のセルに組み込むことも可能 • 日付入力 • 色入力 • コンボ • 時刻入力 • 色ピッカー • リスト • 数値入力 • マスク • Etc…

Slide 35

Slide 35 text

Wijmo の インプットコントロール 35 GrapeCity Developer Solutions 豊富な種類 高機能 • 入力フォーム開発で利用頻度の高い インプット系コントロールを網羅 • FlexGrid のセルに組み込むことも可能 • 日付入力 • 色入力 • コンボ • 時刻入力 • 色ピッカー • リスト • 数値入力 • マスク • Etc…

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Wijmo の ツリービュー 37 GrapeCity Developer Solutions 階層構造を持ったデータの選択に最適な ツリーUI を提供 CSSによるカスタマイズ ノードへの画像設定 チェックボックスによる 項目選択

Slide 38

Slide 38 text

Wijmo のポップアップ 38 GrapeCity Developer Solutions 柔軟なカスタムに対応した使い易いポップアップ • システムにおける各種手続きの実装に 便利なポップアップコントロール • 親（呼び出し元）と関連付いた ポップアップのほか、単一の呼出にも対応 • CSSによるカスタマイズも可

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

40 GrapeCity Developer Solutions 汎用ツールとしてのライセンス体系 3

Slide 41

Slide 41 text

Wijmo ライセンス体系 41 GrapeCity Developer Solutions 開発 ライセンス 配布 ライセンス • 年次更新スタイルのサブスクリプション形式 • 1開発者 88,000円 〜 • なし （ SaaS/ASPサービスへの組み込みおよび開発ツールの開発などで ご利用の場合は特別契約が必要となります。 )

Slide 42

Slide 42 text

42 GrapeCity Developer Solutions まとめ

Slide 43

Slide 43 text

まとめ 43 GrapeCity Developer Solutions 1 2 3 多彩で高機能な収録コントロール - 開発要件を幅広くカバー - 汎用ツールとしてのライセンス体系 - 開発ライセンスのみで利用可 - Wijmo が掲げる 多機能・軽量/高速・最先端 という 3 つのコンセプト

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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