本記事では、「Wijmo(ウィジモ)」のnpmパッケージを使用して、Wijmoのデータグリッド「FlexGrid(フレックスグリッド)」でデータ表示を行うWebアプリケーションを作成する方法を紹介します。2018年3月19日に投稿した記事「Wijmoクイックスタート with npm!」を、2020年2月時点における最新の技術と弊社製品で更新した内容です。
Wijmoのnpmパッケージ
Wijmoのnpmパッケージは複数用意されています。あまりサイズを気にしなくていい場合や、とりあえず全てのパッケージをインストールする場合は@grapecity/wijmo.all
を使用します。
JavaScriptフレームワークで使用する場合には個別に以下のパッケージを使用できます。これにより余計なパッケージのインストールがなくなり、アプリケーションのサイズを減らせます。
- Angular:
@grapecity/wijmo.angular2.all
- React:
@grapecity/wijmo.react.all
- Vue:
@grapecity/wijmo.vue2.all
- 使用しない:
@grapecity/wijmo.purejs.all
本記事ではフレームワークを使用せずにアプリケーションを作成するので、@grapecity/wijmo.purejs.all
を使用します。
プロジェクトの作成
まず、Visual Studio Codeのターミナルでプロジェクトのフォルダquickstart
を作成してquickstart
フォルダに移動します。
mkdir quickstart cd quickstart
npm init
コマンドを実行して、package.json
ファイルを作成します。途中、プロジェクトの設定についていくつか質問されますが、すべてEnterを押して既定値を選択して問題ありません。
npm init
次にnpm install
コマンドを実行して各パッケージをインストールします。今回インストールするパッケージは以下です。
- webpack
- webpack-cli
- style-loader
- css-loader
- sass-loader
- node-sass
- html-webpack-plugin
npm install --save-dev webpack webpack-cli style-loader css-loader sass-loader node-sass html-webpack-plugin
webpack
を利用してWijmoのSassをバンドルし、htmlファイルも生成するために必要なパッケージをインストールしています。全てインストールするとpackage.json
のdevDependencies
は以下のように構成されます。
"devDependencies": { "css-loader": "^3.4.0", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.13.1", "sass-loader": "^8.0.2", "style-loader": "^1.1.3", "webpack": "^4.41.6", "webpack-cli": "^3.3.11" }
quickstart
フォルダにwebpackの設定ファイルwebpack.config.js
を作成して、下記のコードを追加します。
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };
package.json
のscripts
に以下のコードを追加します。
"scripts": { "build": "webpack" },
quickstart
フォルダにsrc
フォルダを作成してindex.html
とindex.js
を作成します。
Wijmoのパッケージをインストール
まず、npm
でWijmoをインストールします。
npm install @grapecity/wijmo.purejs.all
index.html
のbody
要素に、FlexGridを表示するためのdiv
要素を追加します。
<!DOCTYPE html> <html> <head> <title>Wijmoクイックスタート FlexGridサンプル</title> </head> <body> <div> <div id="flexGrid" style="height: 600px;"></div> </div> </body> </html>
index.js
に下記のコードを追加します。FlexGridを生成します。
import '@grapecity/wijmo.styles/wijmo.scss'; import '@grapecity/wijmo.cultures/wijmo.culture.ja'; import * as wjGrid from '@grapecity/wijmo.grid'; let flexGrid = new wjGrid.FlexGrid('#flexGrid',{ itemsSource: getData(), columns: [ { binding: 'id', header: 'ID'}, { binding: 'product', header: '商品名'}, { binding: 'date', header: '受注日'}, { binding: 'amount', header: '金額'} ] }); function getData() { return [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 }, { id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 }, ]; }
アプリケーションのビルドと確認
Visual Studio Codeのターミナルでnpm run build
を実行するとdist
フォルダにindex.html
とmain.js
が作成されます。
ローカルの開発環境において、簡易的な開発サーバー(ローカルサーバー)を使用して確認する方法は色々ありますが、Visual Studio Codeの拡張機能「Live Server」を利用するのが簡単でおススメです。
Live Server – Visual Studio Marketplace
Live ServerをインストールしてVisual Studio Codeを再起動した後、index.html
を右クリックして「Open with Live Server」をクリックします。
ブラウザが起動しindex.html
が表示されます。ページ内のFlexGridでデータが表示されていることが確認できます。