Wijmo[ウィジモ](グレープシティ株式会社)

はじめに

本Tipsでは、kintoneとWijmoの連携方法をご紹介します。Wijmoと連携することで、Excelライクなグリッド操作やチャートの描画、ゲージ等を活用したダッシュボードをkintone上で実現することができます。

Wijmo[ウィジモ]とは

GrapeCityが開発した、主にUI部品がワンセットになっているJavaScriptライブラリです。軽量／高速で動作し、ファイルサイズも小さいため、kintoneのようなプラットフォームにも組み込みやすく、様々なプラットフォームのUI部品として最適なライブラリです。20年以上業務向けのライブラリを提供してきた経験値をもとに、業務アプリケーションの要件を網羅する柔軟なAPI（プロパティやイベント）を提供しています。

製品構成

Wijmoには２つの製品があります。最新のWebテクノロジーで開発された「Wijmo 5」、レガシーブラウザから最新ブラウザまでをサポートする「Wijmo 3」、各々複数のコントロール(*)を収録するスイート製品です。

*コントロール：UI部品

Wijmo 5

• 軽量／高速（*1）
  • jQuery等の他ライブラリとの依存関係がなく軽量な設計
  • レガシーブラウザ対応のコードを削除してパフォーマンスにフォーカス
  • プラガブルモデル（*2）により不要なライブラリは参照が不要
• 開発効率を向上させるアーキテクチャ
  • ECMAScript 5に準拠したオブジェクト指向アーキテクチャ
• あらゆるプラットフォームへの組み込みやすい
  • 他ライブラリとの依存関係がないのでjQuery等のバージョンや競合を気にせず組み込める
• 業務アプリケーション向けコントロールを提供
  • 高速グリッド(FlexGrid)と多彩なインタラクティブチャート(FlexChart)が中心
  • 入力コントロールやメニュー等の業務アプリケーションの基本コントロールも提供
  • データレイヤー（CollectionView）によりクライアントサイドの変更データの追跡／管理が可能

*1 たとえば、下記サンプルで使用するWijmoライブラリのサイズはわずか288KB（v5.20152.90時点）

*2 機能単位にライブラリ(JSファイル)が分割されて必要なファイルのみ参照するアーキテクチャ

Wijmo 3

• あらゆる業務要件に対応できる豊富なコントロール
  • 40種類以上の jQuery UI拡張コントロール
  • マップやスパークライン、イベントカレンダ等のユーティリティコントロールを収録
• 日本固有の要件を実現可能
  • 和暦に強い入力コントロール
  • ２バイト文字やサロゲートペア文字の入力を制御可能
• レガシーブラウザをサポート
  • IE7等のレガシーブラウザにも対応

連携イメージ

JavaScript/CSSカスタマイズにおいて、kintoneから提供されているAPIとWijmoを利用することで、kintoneの標準機能では実現できない機能や操作性、ビジュアル表現を実現することができるようになります。

使用例

Wijmo 5 - FlexGrid

kintoneの一覧上でExcelのようにデータを直接編集したり、一覧上または外部ファイルからコピー＆ペーストによりデータを変更したり、柔軟な一覧操作が可能になります。

■kintone標準の一覧画面

■Wijmo 5- FlexGridでカスタマイズした一覧画面

Wijmo 5 – FlexChart／FlexGrid／FlexGauge

複数のコントロールを組み合わせることでダッシュボード画面を表示することもできます。

※このサンプルの作成方法はこちらに公開しています。

Wijmo 3 – Maps

kintone上でマップ機能も利用できます。

※このサンプルの作成方法はこちらに公開しています。

サンプルでは、Google Map APIを使用しています。 ご利用方法によってはGoogle Maps APIの有償ライセンスの購入が必要になる場合があります。Googleのライセンスをご確認ください。

デモ環境で試す

kintoneのデモ環境であらかじめ作成したkintoneアプリでWijmoを活用したサンプルを実際にお試しいただく事ができます。
下記アカウントでアクセスし、kintone上での実際の動作をお試しください。

サイトURL: https://gcdemo.cybozu.com/
ユーザーID: demo1
パスワード: test2

Wijmoを利用したサンプルの作成

ここでは、kintone上でWijmo 5を利用する基本的な手順とkintone標準の一覧の変わりにFlexGridを使用するサンプルを紹介します。

なお、WijmoのFlexGridは一般的なグリッド表示の他にグループ化やツリービュー等も容易に実現することができます。また、インタラクティブで高機能なチャートや入力フィールド等も提供しております。これらの利用方法についてはWijmoのWebサイトで確認することができます。

事前準備

Wijmoの入手

1. 30日間無料のトライアル版のWijmoを申し込み、ライブラリをダウンロードしておきます。

※トライアル期間終了後は製品の購入が必要です。

kintone

1. アプリの作成で「はじめから作成」を選択します
2. フォームの編集で以下のようにフィールドを設定します。
   

   フィールドタイプ	フィールド名	フィールドコード
   文字列(1行)	商品コード	商品コード
   文字列(1行)	仕入先コード	仕入先コード
   文字列(1行)	商品名	商品名
   数値	原価	原価
   数値	価格	価格
   ドロップダウン	分類	分類
   数値	発注点	発注点
   チェックボックス	生産中止	生産中止

3. 「アプリの設定」-「その他の設定」-「一覧の追加」で新しい一覧を作成します。この時、以下のように設定します。
• 一覧名「collectionview」
• レコード一覧の表示形式「カスタマイズ」
4. ドロップダウンリストから作成した一覧を選択して以下のようなHTMLタグを追加します。
5. <div id="grid" style="height: 500px; width: 1000px;" />
6. 「アプリの設定」-詳細設定 - 「JavaScript / CSSでカスタマイズ」でWijmoを動作させるために必要な以下のJavaScriptファイルとCSSファイルを設定します。

• wijmo.min.js
• wijmo.grid.min.js
• wijmo.input.min.js
• wijmo.grid.filter.min.js
• wijmo.culture.ja.min.js
• wijmo.min.css

※これらのファイルはWijmoをダウンロードしたファイルの以下のフォルダに配置されています。

Wijmoent(リリースバージョン) \Wijmo5Ent_(バージョン番号)\Dist

サンプルプログラム

プログラム

実行例

• 表示されたFlexGridはデータの直接編集やコピー＆ペーストが可能
• ソートやフィルタリング等も利用可能
• 一覧画面に「更新ボタン」を配置してボタン押下時にkintone APIを利用してグリッド上のデータを更新
• 画面上の変更データはWijmo 5のCollectionViewにより自動で取得可能

開発の参考情報

Wijmoでできること

Wijmoを使用することで実現できる機能は以下のオンラインデモで確認できます。

Wijmo 5

• Wijmo 5 エクスプローラー（基本機能を確認できます）
• Wijmo 5 サンプルエクスプローラー（全サンプルを確認できます）

Wijmo 3

• Wijmo 3 基本機能デモ（Wijmo 3の全コントロールのサンプルを確認できます）

製品ヘルプ

• Wijmo 5
• Wijmo 3

技術情報

• Wijmo – kintone連携特設ページ
• 製品ナレッジベース

その他

ライセンス

本製品はトライアル版を用意しております。トライアル版の利用期限は30日間です。

トライアル版ダウンロード

また、ライセンスと料金表は下記リンク先にてご確認ください。

ライセンスと料金

お問合せ

Wijmoに関するお問合せ先はこちらをご確認ください。