Wijmo（ウィジモ）製品説明資料

グレープシティ株式会社

2019年10月現在

目次

Wijmo とは Wijmo の機能 主なコントロールの紹介 技術面の特長 ライセンス 価格 必要システム お問合せ窓口

2

Wijmo（ウィジモ）とは

3

Wijmoとは

4

コスト削減

短納期開発

業務アプリケーション向けJavaScriptライブラリ

+α高度なUIを実現

品質確保

UIの使い勝手を向上させたい 開発の生産性を向上させたい 品質の高いUI部品を長期的に利用したい

パッケージ製品の標準

UI

クラウドサービスのカスタマイズプラグイン開発

Webアプリ開発の社内基盤

こんな場面で使えます

5

業務アプリケーション

既存アプリのカスタマイズ

自社で展開するWebサービスの

UI基盤

パッケージから受託開発まで幅広い採用事例弥生株式会社

デスクトップ版「弥生シリーズ」と同じ画面をクラウドでも簡単に表現

日本ビジネスシステムズ株式会社

クラシックASPの社内システムを、Wijmo＋ASP.NET MVCで再構築

パッケージから受託開発まで幅広い採用事例株式会社日本プロテック

レガシーシステムをWijmo＋Angularでリプレース

Microsoft Dynamics CRM

Wijmoの入力／ゲージコントロールをモバイル入力用のUIに採用

Wijmoの優位性

10どのようなアプリ開発にも安心して利用できる製品です

軽量高速

独立ライブラリ

日本市場特化

• 徹底したコードレビューによるファイルサイズの管理• 大量データでもストレスなく動作• ライブラリ起因のパフォーマンス低下を回避

• コア機能にjQuery等の他ライブラリと依存関係がない• 既存アプリやサービスで利用中ライブラリと競合しない• どのようなアプリやサービスにも組み込み易い

• 日本市場に特化した機能（IME、2バイト文字制御等）• 日本語サポート• 日本語ドキュメント（ヘルプ／ナレッジベース等）

開発現場の課題を解決

開発／テスト工数5~10％

削減（実績参考値）

生産性の高いコントロールと

要件に即応できるカスタマイズ性

専門部門によるテストと

アップデートリリース

25年以上の提供実績と利用者の声を

反映したUIコントロール

コスト増 品質維持納期遅延 UX改善

11

開発工数削減シミュレーション

12

開発規模：240人月– 開発人数：20名／開発期間：12ヶ月（開発6ヶ月／テスト6ヶ月）

製品購入費用：1,800,000（2年目以降：720,000 60%off）– 初年度：20人×9,0000円／２年目以降：20人×36,000円

製品導入による工数削減率を7％と仮定（※効果はプロジェクトや活用方法により異なります）

開発費用

テスト費用

製品購入

開発費用

テスト費用

19,200万円 18,036万円

1,164万円コストダウン初年度

*人月：80万円で算出製品価格は税別

通常開発 Wijmo導入時

開発費用

テスト費用

製品購入

開発費用

テスト費用

19,200万円 17,928万円

1,272万円コストダウン

通常開発 Wijmo導入時

2年目以降

操作性と視認性に優れた機能

13

30年以上にわたりお客様のフィードバックを反映し続けている機能– 業務アプリケーションで使われる機能を網羅– カスタマイズが容易なため、急な仕様変更にもUIコントロールの設定により対応可能

グリッド チャート／ゲージ

入力

ピボットテーブル

Excel／PDF出力複数行グリッド

14

専門部門によるテスト品質を維持の専任部署が開発メンバーと密接に連携しながらテストをプランニングおよび実施

毎日自動テストを実施常にコードの健全性をチェックして一定の基準をクリアするまで修正とテストを繰り返す

高品質を維持できる４つの理由

30年以上の実績「コンポーネント」の品質を維持するための独自ノウハウを蓄積

フィードバックの蓄積大手企業を含む国内外のユーザーから寄せられるフィードバックをテストケースとして蓄積

15

ソース管理サーバー

開発者

ビルドサーバー

オートメーションテスト

テスター

UnitTests

SeleniumTests

失敗(バグ報告)

リリース

マニュアルテスト

毎日実施

毎日のビルドとオートメーションテストにより常にコードの健全性をチェック– 不具合は各開発担当者に自動でフィードバック（修正が完了するまでテストは失敗）

不具合は逐次テストケースに登録することで回帰バグを回避 テストをパスした場合のみ次工程へ

– マニュアルテストまでパスしたビルドのみ一般公開

徹底した品質管理Wijmoのビルドプロセス

やっぱりちょっと不安？？

一般的な懸念事項

サードパーティコンポーネント採用の課題

16

ブラックボックスなので何かあったら・・・

不具合があった時にすぐ直らなかったら・・・

製品がバージョンアップする度に買い替えが必要？・・・

学習コストは？使い方を把握するのに時間がかかりそう

実績あるの？

グレープシティのソリューション

17

製品ヘルプ

開発者ガイドとAPIリファレンスをサンプル付きで解説

サンプルコード（100種類以上）

基本機能から応用までをタスク別に活用可能

ナレッジベース（150件以上）

問合せの多い質問や不具合情報をリアルタイムで更新

サポートサービス

回数無制限E-mailサポート

サブスクリプションサービス

年３回のメジャーバージョンアップ+マイナーバージョンアップ

Web標準

Web標準をベースにしているため特別な学習なしで利用を開始できる

イベント開催

自社イベント開催ベンダーイベントへの出展

導入サポート

製品利用方法のコンサルティングオンサイトセミナー開催

万全のサポート体制と実績

※全て日本語

使ってみたいけど、敷居が高そう・・・

WijmoはWeb標準技術をベースにした製品です。JavaScriptの知識があれば、特別な学習なしで利用できます。

学習コスト

18

わずか数行のコードでグリッドやチャートを表示

<div id="grid1"></div><script type="text/javascript">

var grid = new wijmo.grid.FlexGrid("#grid1");grid.itemsSource = [{"id":1,"name":"test" }]

</script>

＋製品ヘルプ、豊富なサンプル、ナレッジベース、テクニカルサポートなどによる支援で開発者を強力にサポート

グリッド表示のコード例

テクニカルサポート 実績／迅速／安心のサポート

テクニカルサポートアンケートより(n=466)

19

72%

18%

7%

2% 1%

回答のレスポンス

77%

14%

6%

2%1%

回答のわかりやすさ

83%

11%

5%0% 1%回答のマナー

Wijmoの機能

20

Wijmo Enterprise

21

継続サポート中の旧製品Wijmo 3も利用可能

旧世代JavaScriptライブラリ– jQuery UIの拡張ウィジェット

レガシーブラウザサポート(IE7) メンテナンスモード

– フィードバックによってのみ修正と機能追加を実施

最新機能を継続リリース：Wijmo 5 新世代JavaScriptライブラリ

– ECMAScript 5準拠– 他ライブラリ非依存– TypeScript対応

軽量高速でパフォーマンス重視 モダンブラウザで動作

(Chrome、Firefox、Safari、Edge…) JSフレームワーク（Angular、React、Vue）、

フロントエンド開発環境と高い親和性

コントロール一覧

22

基本ライブラリ

GlobalizationCollectionViewClipboardValidationPrintDocument

グリッド

FlexGridMultiRowFlexSheet

入力

CalendarInputDateInputTimeInputDateTimeInputMaskInputNumberComboBoxMultiSelectAutoCompleteMultiAutoCompleteListBoxInputColorColorPicker

チャート

FlexChartFlexPieFinancialChartFlexRadarTreeMapSunburstBoxWhiskerWaterfallMovingAverageTrendLineErrorBarYFunctionParametricFunction

随時追加中 最新情報はWebサイトで確認<https://www.grapecity.co.jp/developer/wijmo#controlslist>

ファイル

ExcelPDF

ナビゲーション

TreeViewPopupMenuTabPanel

データ可視化

OLAPRadialGaugeLinearGaugeBulletGraph

コントロール一覧（日本語名）

23

基本ライブラリグローバリゼーションデータ管理クリップボード検証印刷

グリッドデータグリッド複数行グリッドスプレッドシート

入力カレンダー日付入力時刻入力日時入力マスク入力数値入力コンボボックス複数選択入力補完タグ入力リストボックス色入力色選択

チャート基本チャート円、ドーナツ株価レーダー、ポーラーツリーマップサンバースト箱ひげ図ウォーターフォール移動平均線近似曲線エラーバーY関数パラメーター関数

随時追加中 最新情報はWebサイトで確認<https://www.grapecity.co.jp/developer/wijmo#controlslist>

ファイルExcelPDF

ナビゲーションツリービューポップアップメニュータブパネル

データ可視化ピボット分析円形ゲージ線形ゲージブレットグラフ

Wijmo

24

主なコントロールの紹介

FlexGrid

25

高速／軽量／柔軟なカスタマイズ性 1996年以来、あらゆるプラットフォームで提供 20年以上改善を繰り返して業務アプリにおけるグリッド要件を網羅 クライアントサイドでExcel／PDFに出力可能

FlexGridの操作性 洗練された操作性はFlexGridの大きな特徴のひとつです

一覧上でデータを直接編集キー入力により自動的に編集を開始して値設定が可能

コピー＆ペースト（複数行／複数列）

キーボードナビゲーションExcelをベースにしたキーボード操作でエンドユーザーが直感的に操作可能

①同一グリッド上でコピー＆ペースト ②外部ファイルへ（から）コピー＆ペースト

FlexGrid Excel

セル非編集状態からキーボードで[9]を入力

[Enter]：下方向セル移動、 [Tab]：次の要素にフォーカス移動（or 右方向セル移動）、[F2]：セル編集開始、[Ctl]+[A]：セル全選択、[Ctl]+[C] ：コピー、[Ctl]+[V] ：ペースト etc

FlexGrid - 機能（1/3）

セルの編集 セル編集開始方法（文字入力／F2キー／ダブルクリック）、クリップボード操作（セル範囲のコピー＆ペースト／外部アプリとのデータ受け渡し）、セルエディタ（テキストボックス／チェックボックス／ドロップダウン、マスク、カスタムエディタ）、編集禁止、入力必須、最大文字数 、データ検証（エラー表示／エラー時の編集状態維持）、セル内での改行

セルの表示 データ型（文字列／数値／ブール／日時／配列）、書式（標準数値書式、標準日時書式、カスタム日時書式、均等割り付け）、セルの結合（同じ値のセル／任意のセル）、HTMLコンテンツ、カスタムコンテンツ

セルのスタイル 水平方向の配置、文字列の折り返し、カスタムスタイル、交互行スタイル、選択セルの強調表示（セルの境界線／行列ヘッダの境界線）

列の操作 移動（ドラッグ）、サイズ変更（ドラッグ中にサイズ変更／マウスを離した時にサイズ変更／ダブルクリックで自動調整）

列の表示 幅（固定サイズ／自動サイズ／スターサイズ／最大値／最小値）、ヘッダ、複数行のヘッダ、フッタ、固定、非表示

行の操作 追加（最終行で追加／先頭行で追加）、削除、移動（ドラッグ）、サイズ変更（ドラッグ中にサイズ変更／マウスを離した時にサイズ変更／ダブルクリックで自動調整）

行の表示 高さ（固定サイズ／自動サイズ／スターサイズ／最大値／最小値）、ヘッダ、複数列のヘッダ、固定、非表示

FlexGrid - 機能（2/3）

データ連結 データソース（データ配列／JSON／OData）、列の自動生成、変更データの追跡（編集／追加／削除された項目の取得）、非連結

ソート 表示データでソート、ふりがななど他のデータでソート、ソート順のカスタマイズフィルタ 値フィルタ（値リストから選択）、値フィルタの表示名のカスタマイズ、条件フィル

タの種類（等しい／等しくない／より大きい／以上／より小さい／以下／で始まる／で終わる／含む／含まない）、2つまで条件を指定（AND／OR）

グループ化 集計（合計／nullでない値の数／nullを含む値の数／平均／最大／最小／最大と最小の差／標本標準偏差／標本分散／母標準偏差／母分散）、折りたたみ（すべて折りたたみ／すべて展開／指定レベルまで折りたたみ）、ヘッダ、ヘッダのインデント、列のドラッグでグループ化

グリッドの表示 選択モード（セル／行／複数行／セル範囲）、仮想データ（表示範囲のみ描画して処理を高速化）、描画更新の一時停止、ページング、ツリービュー、詳細行（行を展開して任意のコンテンツを表示）

FlexGrid - 機能（3/3）

Excel入出力 クライアント側処理（サーバー不要）、スタイル反映の有無、行列ヘッダの有無、出力する列、文字列の折り返し、シート名、アクティブなシート

PDF出力 クライアント側処理（サーバー不要）、ページサイズ（定義済みのサイズ／カスタムサイズ）、ページの向き、ページの余白、グリッドのサイズ（実際のサイズ／ページ幅／1ページ）、列幅（表示サイズと同じ／ページ幅に合わせてスターサイズを計算）出力範囲（すべて／選択範囲）、フォント埋め込み、セルのスタイル（フォント／背景色／境界線の色）、他のコンテンツと組み合わせて出力

キーボード操作 矢印／Home／End／Page Down／Page Up：セルの移動、Enter／Shift+Enter：編集確定して上下左右に移動、Tab／Shift+Tab：前後の要素にフォーカス移動／編集確定して上下左右に移動、F2（編集開始）、F4／Alt+上下：ドロップダウンリストの表示、Esc：編集中止、Delete：セル／行の削除、Space：チェックボックスの切り替え

グローバライズ UIのグローバライズ、書式のグローバライズ（数値／日時／通貨）、右から左の言語の表示（アラビア語など）

FlexChart／FlexPie

30

高速／軽量／柔軟なカスタマイズ性 タッチ操作に最適化したインタラクティブなチャート スタンダードから専門性の高いチャートまで簡単に開発可能 クライアントサイドで画像（PNG/JPEG/SVG）に出力可能

– 画像をPDFに出力することも可能

チャート種類（FinancialChartを除く）

縦棒 横棒 折れ線 スプライン 散布図

円 レーダー ポーラ エリア 複合

サンバースト ファンネル ウォーターフォール ツリーマップ

FlexChart／FlexPie 基本機能

– データバインド／系列・マーカーの選択／ツールチップ／ヒットテスト／マーカー／複数プロット／スケーリング／ドリルダウン／範囲セレクター

各種カスタマイズ設定– タイトル／凡例／系列表示・スタイル／軸／書式

分析機能– トレンドライン／移動平均／Y関数系列／パラメータ関数系列

その他– ア二メーション／アノテーション／タッチズーム・パン／

画像エクスポート

Gauge／Input

33

視認性に優れたインタラクティブなゲージ– 線形ゲージ／円形ゲージ／ブレットグラフ

日本語入力をサポートする入力系コントロール– InputDate／InputTime／InputDateTime／InputNumber／InputMask／ComboBox／

AutoComplete／MultiAutoComplete／MultiSelect／DropDown／Calendar／Menu／ListBox／ColorPicker／InputColor／Popup

データ出力機能

34

クライアントサイドで各種ファイル形式を出力可能 FlexGrid

– Excel（インポート／エクスポート）– PDF（エクスポート）

FlexChart– PNG／JPEG／SVG（エクスポート）

新規PDF／Excelファイルの生成– 新規ファイルを生成可能– 画像ファイルとして出力したFlexChartやFlexGridを表示することも可能

TreeView

35

データを階層的に表示 主な機能

– ノードの折りたたみ– 編集– チェックボックスで選択– ドラッグで移動– 展開時にデータを読み込み– ノードの動的追加、削除

Wijmoデザイナ

36

コントロールのプロパティやデザインを視覚的に設定し、コードを生成できるGUIデザイナ

WebベースのデザイナとVisual Studio Codeの拡張機能として使用するデザイナ（Angular開発向け）の2種類

Wijmo

37

Enterpriseサブスクリプションでのみ利用可能な限定機能

＋Enterprise限定機能

FlexSheet

38

FlexGridの拡張コントロール– 同等の利用方法

Webアプリケーションでスプレッドシートを実現 数式／アンドゥ・リドゥ機能

＋Enterprise限定機能

MultiRow

39

FlexGridの拡張コントロール– 列レイアウト定義情報を設定する以外は同等の利用方法

複数行を１レコードとして扱える

＋Enterprise限定機能

OLAP

40

ExcelのピボットテーブルをWeb上で再現 エンドユーザーによる集計データのカスタマイズが可能 集計データの詳細（生データ）を閲覧可能

＋Enterprise限定機能

FinancialChart

41

金融系特化型の高機能チャート ローソク足に加えて平均足／練行足／カギ足等を標準搭載 移動平均曲線／トレンドライン等の分析機能

＋Enterprise限定機能

FinancialChart 種類新値足ローソク足 平均足

練行足 カギ足 カラムボリューム

エクイボリューム ローソクボリューム アームズローソクボリューム

＋Enterprise限定機能

ReportViewer／PdfViewer

43

帳票（FlexReport／SSRS）やPDFをプレビュー表示／印刷– 別途ComponentOne Enterpriseが必要です。

ページ画面はSVG形式で描画– 拡大表示しても高画質– 文字列の選択や検索も可能

FlexReport帳票はチャートやバーコードにも対応

＋Enterprise限定機能

Wijmo

44

技術面の特長

Wijmo の仲間たち（オフィシャルサポート）– 下記ライブラリの利用は必須ではありません– 下記以外のライブラリとも併用可

Wijmo ができるまで

45

Wijmo はTypeScriptと相性抜群– WijmoはTypeScript／Sassベース で開発– TypeScriptソース／型定義ファイルやSassファイルも製品に収録

TypeScriptファイル

.ts

Sassファイル.sass

JavaScriptファイル

.js

スタイルシート.css

TypeScript型定義ファイル

.d.ts

46

業務アプリケーション特化

生産性の高いコントロール 軽量／高速パフォーマンス

他ライブラリとの相互運用 マルチデバイス

Wijmoの特長

47

業務アプリケーション特化

生産性の高いコントロール 軽量／高速パフォーマンス

他ライブラリとの相互運用 マルチデバイス

Wijmoの特長

生産性の高いコントロール

48

オブジェクト指向コントロール（ECMAScript 5ベース）

//FlexGridで編集を許可var grid = new wijmo.grid.FlexGrid('#FlexGrid1');grid.isReadOnly = false;

//グリッドウィジェットで編集を許可$('#grid').wijgrid(‘option', ‘allowEditing', true);

値代入のようなプロパティ設定 文字列を使用しないコーディング インテリセンスの利用

Wijmo コントロール

jQuery UI ウィジェット “文字列”としてプロパティ名を記述 大文字小文字の区別も必要 ミスを誘発しやすい

列挙体の利用可

エラー検出が容易

簡単なプロパティ設定

コード比較(Wijmo vs jQueryUI ウィジェット)

クラス単位で継承可能なためカスタマイズ性が高い

インテリセンスも利用可能！

Visual Studio（VS）用テンプレートの利用手順

開発のご参考

49

Wijmo を開発する統合開発環境（IDE）について– 標準準拠のJavaScriptライブラリのため、あらゆるIDEで利用可– Visual Studio開発者向けには便利なテンプレートを付属

Step 1：インストール製品付属のVsTemplatesフォルダから以下のファイルをダブルクリックしてテンプレートをインストール。

Step 2：プロジェクトの作成VS上で新規プロジェクトを作成するとWijmoのアプリケーションが表示されます。

Step 3：開発開始Wijmoを参照したhtmlテンプレートができる

WijmoのJSファイルを参照済 *

*参照ファイルはCDN上にあるトライアル版となります。

50

業務アプリケーション特化

生産性の高いコントロール 軽量／高速パフォーマンス

他ライブラリとの相互運用 マルチデバイス

Wijmoの特長

軽量基本ライブラリ＆必要なファイルのみ参照するプラガブルアーキテクチャ

51

EventCollectionView

ControlGlobalize

StylesDirectives<wj-flex-grid><wj-flex-grid-column>…

必須

任意 任意 任意 任意

任意

100KB

223KB

149KB 204KB 29KB 119KB

※Ver 5.20192.624時点

FlexGrid Filterwijmo.grid.filter.js

FlexGrid GroupPanelwijmo.grid.grouppanel.js

FlexGrid Detailwijmo.grid.detail.js

ゲージwijmo.gauge.js

入力wijmo.input.js その他FlexGrid

wijmo.grid.js

拡張ライブラリ

基本ライブラリwijmo.js/css

Angularwijmo.angular2.js

FlexChartwijmo.chart.js

FlexChart Analyticswijmo.chart.analytics.js

FlexChart Annotationwijmo.chart.annotation.js

FlexChart Interactionwijmo.chart.interaction.js

ファイルサイズの比較

52

ファイルサイズはパフォーマンスに直結！ただでさえ業務ロジックはサイズが膨れがち

jQuery UIと同等もしくはそれ以下のファイルサイズ

※Ver 5.20162.207時点

53

業務アプリケーション特化

生産性の高いコントロール 軽量／高速パフォーマンス

他ライブラリとの相互運用 マルチデバイス

Wijmoの特長

高水準の Angular サポート

54

Angularをオフィシャルサポート– Googleの協力を得て早期からサポートを継続– 最新版にも迅速に対応– Angular導入ガイド

Angular コンポーネントの提供- 全コントロールとバインディング可能（2Wayを含む）- 詳細ヘルプ

豊富なサンプル‐ 50種類以上のサンプルを収録（随時追加中）- 一部はオンラインデモとして公開

参考記事– Publickey（その1／その2）– CodeZine

<wj-flex-grid [itemsSource]="data"><wj-flex-grid-column [header]=“'国名'" [binding]="'country'"></wj-flex-grid-column>

<wj-flex-grid-column [header]=“'売上'" [binding]="'sales'"></wj-flex-grid-column><wj-flex-grid-column [header]=“'経費'" [binding]="'expenses'"></wj-flex-grid-column>

</wj-flex-grid>

構文例（Angular）

JavaScriptライブラリの変遷とWijmo

55

第１世代（jQuery）– DOMセレクタ– クロスブラウザ対応

第２世代（AngularJSなど）– SPA（シングルページアプリケーション）– プログラム構造化／バインディング

第３世代（Angular、Reactなど）– 仮想DOM– コンポーネント志向

参考<https://www.slideshare.net/AsialCorp/web-64562831>

Wijmo 3（jQuery UI拡張）

jQueryの縛りを受けながら各ライブラリをサポート

Wijmo 5（ライブラリ非依存）

標準技術をベースに独立性を維持しライブラリの長所を活かしながら

サポート

相互運用モジュールAngularJS用連携

相互運用モジュールAngular用連携

任意利用

相互運用モジュールReact用連携

次世代– ？？

相互運用モジュール？？？

連携

任意利用

任意利用

任意利用次世代のライブラリが登場しても安心して利用しつづけられる

連携

Wijmoの進化（Wijmo 3 から Wijmo 5）

56

jQuery依存／レガシーブラウザ からの脱却jQueryから脱却することで以下の懸念点を払拭

パフォーマンスとファイルサイズ肥大化– jQuery内部のレガシーブラウザ対応コードによるオーバーヘッド– 製品ファイルの他にjQuery/jQuery UIの参照– ファイルサイズ重量化によるマルチデバイスにおける性能

マルチライブラリへの対応(Angular/React/Vueなど)– jQueryの対応範囲から逸脱

ライブラリの競合– 他ライブラリで使用するjQueryバージョンと競合– 導入しにくく／保守も煩わしくなる

57

業務アプリケーション特化

生産性の高いコントロール 軽量／高速パフォーマンス

他ライブラリとの相互運用 マルチデバイス

Wijmoの特長

マルチデバイス

58

タッチ／モバイルでの動作に最適化– 単一ライブラリによるサポート– モバイルブラウザ／タッチサポート／レスポンシブレイアウト

HTML5ハイブリッドアプリの開発も可能– Ionic + AngularJS + Cordova + Wijmo 5– Monaca『企業向けアプリ開発に最適なチャートライブラリWijmoを試す』

確かな実績– Microsoft Dynamics CRM Onlineのモバイル用入力コントロールとして採用

様々な利用シーンで活用できるアプリケーションを開発可能

59

業務アプリケーション特化

生産性の高いコントロール 軽量／高速パフォーマンス

他ライブラリとの相互運用 マルチデバイス

Wijmoの特長

業務アプリケーション特化

60

FlexGrid の JavaScriptバージョンを収録‐ 1991年から様々なテクノロジーで提供するデータグリッド

(ActiveX、WinForms、Silverlight、WPF、UWP、Xamarin)‐ 業務アプリにおけるグリッド要件のAPIを既に網羅

CollectionViewによるデータ管理‐ WijmoのUIにバインドする共通データレイヤー

‐ UIからデータの種類を意識しなくてよい‐ UIとデータ（操作）を分離できるようになる‐ クライアント側で変更データの追跡が可能！

‐ Microsoft .NET FrameworkのAPIをベース‐ UI要素にデータをバインドするための手段を提供‐ .NET FrameworkのICollectionViewインターフェースのJavaScript版

Web標準に準拠‐ 長い期間、安心して使い続けることが可能

‐ 参考記事：Build Insiderに掲載「5年後も使い続けたい」JavaScript UIコンポーネントを目指す「Wijmo」とは？

CollectionViewによるUIとデータの分離

61

CollectionViewクラスFlexGridJavaScript

配列（データ）

データバインド（双方向）

提供する処理カレントレコード管理 ソート／フィルタ

ページング

グループ化

編集

変更データの追跡

実行例（変更データの追跡）元データ

編集行

チェックボックス値を変更編集データのみをメモリ上にプールできます。クライアント側のデータ管理を容易にしてサーバー側に編集データのみを送信できるためPostデータの削減にも貢献。

オンラインデモで実際の動作を確認可能<https://demo.grapecity.com/wijmo/demos/Core/CollectionView/EditingViews/TrackingChanges/purejs>

概念図

Silverlightからの移行にも最適

62

Silverlightアプリケーションからの移行情報を公開– ホワイトペーパー（移行手順等を解説）– 移行セミナービデオ（英語）– 移行セミナー資料（英語）– 移行サンプル（ホワイトペーパーで解説）

CollectionViewによるデータ管理‐ Microsoft .NET FrameworkのAPIをベース

‐ Silverlightからの移行に最適なAPIを持つ‐ UI要素にデータをバインドするための手段を提供‐ .NET FrameworkのICollectionViewインターフェースのJavaScript版

ライセンス

63

ライセンス体系

64

契約方式 サブスクリプション方式

契約期間 1年間（初年度のみ契約タイミングにより１年間+α）2年目以降の継続は契約更新が必要

ライセンス形態 ユーザーライセンス（１開発者につき１ライセンス必要）

契約期間中の提供サービス

・製品使用権（契約期間中の最新版と旧版）・回数無制限の技術サポート（E-mail）・特別価格で契約更新

使用者の特定 Webユーザー登録が必要（ユーザーの変更可能）場所の特定 不要（3台までのPCで利用可能）

契約終了時・以降の最新バージョンを利用不可（バグ修正版含む）※契約期間終了以前のバージョンは永続的に利用可能

・サポートサービス利用不可

ライセンスの考え方

65

開発者 アプリ利用者

開発者

エンドユーザー企業

開発会社（SI企業／

情報システム部門等）

開発者ライセンス：１開発者につき１ライセンス必要（ランタイムフリー：運用時の配布ライセンスは不要）

サブスクリプション契約

アプリ開発

アプリ配布

追加費用なし

アプリ利用者

ライセンス費用

サブスクリプションの考え方 契約期間

– １年間：3ターム毎に契約更新（初年度は特別に４ターム有効となり１年以上になることがあります）• タームは１年を３分割した単位：第1ターム（5月～8月）／第2ターム（9月～12月）／第3ターム（1月～4月）• 契約期間の算出基準は全てターム単位

契約期間中に利用できるサービス– 最新バージョンの入手（契約期間満了後も「契約満了前のバージョン」は継続利用可能）

– 技術サポート（回数無制限のE-mailサポート）

– 特別価格で契約更新（1度満了を迎えた契約はお買い直しとなります）

製品ライフサイクル– 1タームにつき１回メジャーバージョンアップを実施（不具合修正版の公開は不定期）

第1ターム 第2ターム 第3ターム5 6 7 8 9 10 11 12 1 2 3 4

第1ターム 第2ターム 第3ターム5 6 7 8 9 10 11 12 1 2 3 4

第1ターム5 6 7 8月

ターム

製品ver 2018v1 2018v2 2018v3 2019v1 2019v2 2019v3 2020v1

契約期間 1年目契約期間 2年目契約期間期間内に特別価格で更新

2018年5月サブスクリプション開始

2019年8月末サブスクリプション

満了／更新

2020年8月末サブスクリプション

満了／更新

例）2018年5月に契約を開始した場合：2019年8月末で契約満了となり、契約更新をしない場合は2018v2以降の製品はご利用頂けません。2018v1以前のバージョンは継続利用可能です。契約期間は全てターム単位です。例えば、2018年5月～8月のどのタイミングで契約を開始しても、契約満了日は2019年8月末となります。

初年度は４ターム経験後に契約満了

２年目以降は３ターム経験後に契約満了

価格

67

ライセンス費用ライセンス種別 製品形態 ライセンス数 税込価格

開発ライセンス

• 1年間のサブスクリプション契約

• 開発者1名に1ライセンス必要

• 1名で3つの開発環境まで利用可能

Enterprise

年間サブスクリプション

契約

1開発者(年間) 132,000円

1開発者(2年目以降) 更新 52,800円

Wijmo 5

1開発者(年間) 88,000円

1開発者(2年目以降) 更新 35,200円

配布ライセンス 共通 永続ライセンス ランタイムフリー 0円

特別契約開発環境で利用するアプリケーション（開発ツール、SDK、フレームワーク等）にWijmoを組み込む場合など

お問い合わせ

オプション契約ユーザー単位での導入が難しいケース、企業・団体、プロジェクト単位の導入、複数年契約など

お問い合わせ

ご不明点は営業窓口へお問い合わせください。

無料でお試し

69

動作は「デモを試す」もしくは「トライアル版」でお試しいただけます。

ウィジモ 検索

必要システム

70

サポートブラウザInternet Explorer

Microsoft Edge

Chrome Firefox Safari Opera 備考

Wijmo 5 11以上 最新版 5以上 4以上 5以上 12以上ECMAScript 5をサポートしているブラウザに準拠

最新情報はWebサイトで確認

<https://www.grapecity.co.jp/developer/wijmo#system>

お問合せ窓口

71

グレープシティ株式会社 ツール事業部 営業部

メール sales@grapecity.com

電話 048-222-3001

営業時間 9:00 ～ 12:00 ／ 13:00 ～ 17:30 (月~金)

営業窓口所在地

〒332-0012埼玉県川口市本町4-1-8 川口センタービル3F

本社所在地 〒981-3205仙台市泉区紫山3-1-4

グレープシティ株式会社

72

本 社 仙台市泉区紫山3－1－4資本金 9,000万円創 業 1980年5月(旧：文化オリエント)代表者 馬場直行従業員 国内200名 海外800名

グレープシティは日本の企業です– 海外に多くの拠点を持つ仙台本社の企業です– 日本市場に対する強い覚悟を持って製品開発に臨んでいます