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

はじめに

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

Wijmo[ウィジモ]とは

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

製品構成

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

*1: Wijmo 3 は販売終了しました
*2: コントロール：UI部品

Wijmo 5

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

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

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

連携イメージ

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

使用例

Wijmo 5 - FlexGrid

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

■kintone標準の一覧画面

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

Wijmo 5 – FlexChart／FlexGrid／FlexGauge

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

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

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

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

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

事前準備

Wijmoの入手

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

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

kintone

アプリの作成で「はじめから作成」を選択します

フォームの編集で以下のようにフィールドを設定します。

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

「アプリの設定」-「その他の設定」-「一覧の追加」で新しい一覧を作成します。この時、以下のように設定します。

一覧名「collectionview」
レコード一覧の表示形式「カスタマイズ」

ドロップダウンリストから作成した一覧を選択して以下のようなHTMLタグを追加します。
<div id="grid" style="height: 500px; width: 1000px;" />
「アプリの設定」-詳細設定 - 「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 5

技術情報

製品ナレッジベース

その他

ライセンス

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

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

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

ライセンスと料金

お問合せ

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

mikan 2016年02月05日 06:47

こちらのサンプルコードを試させていただいたのですが、以下の点の解決方法がわからない状況です。分かる方がいらっしゃいましたらお教えいただけませんでしょうか。・コピー＆ペーストで貼り付けした場合、”更新”ボタンが押せない（更新できない）・ドロップダウンができない

AY 2016年03月03日 07:58

grid.rowEditEnded.addHandler(function(sender, args) {
を以下のようにコレクション変更のイベントに修正すると、コピー&ペーストでも問題なく動作すると思います。
cv.collectionChanged.addHandler(function(sender, args) {
http://wijmo.c1.grapecity.com/5/docs/topic/wijmo.collections.CollectionView.Class.html

Toshimichi Konno 2016年04月22日 09:06

更新ボタンが押せない件は、初期状態では押せませんが、どこかフィールドを変更し、行移動などをして編集中から編集終了状態になると、更新ボタンがenabled=trueになり、押せるようになりました。コードを見てもそのような仕様になっています。

ドロップボタンにならない件は、確かにその通りです。分類にフォーカスが移動し、編集可能な状態になったらドロップボックスで選択できる状態になって欲しいです。

サインインしてコメントを残してください。