UjiieTwitterFacebookはてブPocketLINEはじめに「Wijmo(ウィジモ)」はグレープシティが提供しているJavaScriptライブラリです。エンタープライズ向けのWeb/モバイルアプリケーション開発で利用できるUIコンポーネントを提供しています。Wijmo(ウィジモ)の特長Wijmoは以下の特長を持っています。基本ライブラリ&必要なファイルのみ参照するプラガブルアーキテクチャ採用。モバイル/タッチでの動作に最適化。モバイルブラウザ/タッチ/レスポンシブレイアウト対応。Mobile等の外部ライブラリに非依存。JavaScriptフレームワーク(Angular/React/Vue.js)に対応。TypeScript/Sassに対応。TypeScriptやAngularをはじめとするJavaScriptフレームワークなどWebの最新テクノロジーを幅広くサポートしていて実装しやすいUIコントロールのセット、それが「Wijmo」です。本記事ではWijmoの中でも利用頻度が高いコンポーネントである「FlexGrid」をMonacaで使う方法を紹介します。FlexGridはアプリケーションにおけるグリッド要件に幅広く対応している高機能なグリッドコントロールです。データの表示や編集、ソートやフィルタ、ページングなどのデータ操作といった表形式データを取り扱うさまざまな機能を提供します。FlexGridなどWijmoに含まれるコンポーネントの機能は「プレイWijmo」で確認できます。Monacaで使ってみるではさっそくFlexGridをMonacaで使ってみます。IDEから新しいプロジェクトを作成します。テンプレートは[最小限のテンプレート]を選択します。Enterprise」のトライアル版を入手してください。フォルダを作成して、下記のファイルをアップロードします。wijmo.min.csswijmo.min.jswijmo.grid.min.jswijmo.culture.ja.min.jsWijmoのファイルをアップロードせずにCDNから取得する場合は、index.htmlのheadセクションに以下のコードを追加します。"></script>Wijmoはnpmでのインストールに対応しています。installを実行してインストールできます。HTMLを編集index.htmlのheadセクションにWijmoの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。src="vendors/wijmo/wijmo.culture.ja.min.js"></script>index.htmlのbodyセクションに、divとscriptタグを追加します。id="flexGrid"></div><script></script>scriptタグ内にJavaScriptコードを記述します。orders});編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告ダイアログが表示されますが、[閉じる]をクリックするとFlexGridでデータ表示できていることが確認できます。現時点ではWijmoはクラウド開発環境に対応していないため、ライセンスキーを設定した場合でも上記と同じように警告ダイアログが表示されます。CLIを使ったローカル開発、Monacaデバッガーを使用したデバッグにおいてライセンスキーを設定している場合、警告ダイアログは表示されません。列を設定する先程のコードでは列を設定していなかったためFlexGridが自動的に列を生成しました。列を設定すると列の表示/非表示や列の順序を設定できます。列の幅、見出し、書式の設定、テキストの配置なども設定できます。これらの設定は以下のようなプロパティを使用して設定できます。binding:列に表示されるデータ項目のプロパティ名を設定。header:列のヘッダーセルの内容を設定。format:数値と日付を列の表示文字列に変換するための書式文字列を設定。スターサイズを使用して列幅を相対単位で指定可。align:列のアイテムの水平方向の配置を設定。isReadOnly:列をユーザーが編集できるかどうかを設定。以下のコードで列を設定してみます。orders});プレビューで確認した結果はこちらです。書式を設定しているので、セルをクリックして[価格]や[数量]の数値を増やした場合、カンマが追加されて表示されます。まとめ本記事では、グレープシティのJavaScriptライブラリ「Wijmo」に含まれる「FlexGrid」を紹介しました。Wijmoにはグリッドの他にもチャートやゲージ、入力やナビゲーションなどWeb/モバイルアプリケーションで利用できるコンポーネントを収録しています。Ujiieグレープシティでプロダクトマーケティングマネージャーしてます。