業務アプリ開発に最適なUIライブラリ「Wijmo（ウィジモ）」をMonacaで使ってみよう

はじめに

「Wijmo（ウィジモ）」はグレープシティが提供しているJavaScriptライブラリです。エンタープライズ向けのWeb／モバイルアプリケーション開発で利用できるUIコンポーネントを提供しています。

Wijmo（ウィジモ）の特長

Wijmoは以下の特長を持っています。

高速／軽量。基本ライブラリ＆必要なファイルのみ参照するプラガブルアーキテクチャ採用。
モバイル／タッチでの動作に最適化。モバイルブラウザ／タッチ／レスポンシブレイアウト対応。
ECMAScript 6（ECMAScript 2015）に対応。
jQuery／jQuery UI／jQuery Mobile等の外部ライブラリに非依存。
JavaScriptフレームワーク（Angular／React／Vue.js）に対応。
TypeScript／Sassに対応。

TypeScriptやAngularをはじめとするJavaScriptフレームワークなどWebの最新テクノロジーを幅広くサポートしていて実装しやすいUIコントロールのセット、それが「Wijmo」です。

FlexGrid（フレックスグリッド）の紹介

本記事ではWijmoの中でも利用頻度が高いコンポーネントである「FlexGrid」をMonacaで使う方法を紹介します。FlexGridはアプリケーションにおけるグリッド要件に幅広く対応している高機能なグリッドコントロールです。データの表示や編集、ソートやフィルタ、ページングなどのデータ操作といった表形式データを取り扱うさまざまな機能を提供します。

FlexGridなどWijmoに含まれるコンポーネントの機能は「プレイWijmo」で確認できます。

Monacaで使ってみる

ではさっそくFlexGridをMonacaで使ってみます。

プロジェクトの作成

Monaca Cloud IDEから新しいプロジェクトを作成します。テンプレートは［最小限のテンプレート］を選択します。

Wijmoのファイルを追加

ダウンロードページより、「Wijmo Enterprise」のトライアル版を入手してください。

Monacaで www/vendors/wijmo フォルダを作成して、下記のファイルをアップロードします。

wijmo.min.css
wijmo.min.js
wijmo.grid.min.js
wijmo.culture.ja.min.js

WijmoのファイルをアップロードせずにCDNから取得する場合は、index.htmlのheadセクションに以下のコードを追加します。

<link href="https://cdn.grapecity.com/wijmo/5.20183.550/styles/wijmo.min.css" rel="stylesheet"/>
<script src="https://cdn.grapecity.com/wijmo/5.20183.550/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20183.550/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20183.550/controls/cultures/wijmo.culture.ja.min.js "></script>

Wijmoはnpmでのインストールに対応しています。Proプラン以上ではMonaca Cloud IDEからターミナルでnpm installを実行してインストールできます。

HTMLを編集

index.htmlのheadセクションにWijmoの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。

<link rel="stylesheet" href="vendors/wijmo/wijmo.min.css" />
<script src="vendors/wijmo/wijmo.min.js"></script>
<script src="vendors/wijmo/wijmo.grid.min.js"></script>
<script src="vendors/wijmo/wijmo.culture.ja.min.js"></script>

index.htmlのbodyセクションに、divとscriptタグを追加します。

<div id="flexGrid"></div>

<script>
</script>

scriptタグ内にJavaScriptコードを記述します。

var orders = [
  { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', price: 200, amount: 30 },
  { id: 17, product: 'だしこんぶ', date: '2017/01/08', price: 290, amount: 50 },
  { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', price: 200, amount: 20 },
  { id: 84, product: 'なまわさび', date: '2017/01/21', price: 200, amount: 40 },
  { id: 85, product: 'なまからし', date: '2017/01/13', price: 200, amount: 40 },
  { id: 86, product: 'なましょうが', date: '2017/01/20', price: 200, amount: 40 },
];

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: orders
});

編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告ダイアログが表示されますが、［閉じる］をクリックするとFlexGridでデータ表示できていることが確認できます。

現時点ではWijmoはクラウド開発環境に対応していないため、ライセンスキーを設定した場合でも上記と同じように警告ダイアログが表示されます。LocalKit／Monaca CLIを使ったローカル開発、Monacaデバッガーを使用したデバッグにおいてライセンスキーを設定している場合、警告ダイアログは表示されません。

列を設定する

先程のコードでは列を設定していなかったためFlexGridが自動的に列を生成しました。列を設定すると列の表示／非表示や列の順序を設定できます。さらに列の幅、見出し、書式の設定、テキストの配置なども設定できます。これらの設定は以下のようなプロパティを使用して設定できます。

binding：列に表示されるデータ項目のプロパティ名を設定。
header：列のヘッダーセルの内容を設定。
format：数値と日付を列の表示文字列に変換するための書式文字列を設定。
width：列の幅。スターサイズを使用して列幅を相対単位で指定可。
align：列のアイテムの水平方向の配置を設定。
isReadOnly：列をユーザーが編集できるかどうかを設定。

以下のコードで列を設定してみます。

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  autoGenerateColumns: false,
  columns: [
    { binding: 'id', header: '商品番号', width: '*', align: 'left', isReadOnly: true },
    { binding: 'product', header: '商品名', width: '2*' },
    { binding: 'date', header: '日付', width: '1.5*' },
    { binding: 'price', header: '価格', format: 'c0', width: '*' },
    { binding: 'amount', header: '数量', format: 'n0', width: '*'  },
  ],
  itemsSource: orders
});

プレビューで確認した結果はこちらです。