PureJSでWijmoを使用する

インストール

Wijmoは、npm上では各モジュールのパッケージとして表されます。他のnpmパッケージと同様に、このパッケージを使用するには、コンピュータにNodeJSがインストールされている必要があります。

npmから最新のwijmoリリースバージョンをインストールするには、NodeJSコマンドプロンプトから次のコマンドを実行します。

npm install @mescius/wijmo.purejs.all

これですべてのPure JavaScriptモジュールがインストールされます。他のフレームワークのサポートをインストールしたり、特定のコントロールモジュールをインストールしたい場合は、npmによるWijmoの参照を参照してください。

npmからモジュールのpackageをインストールしてWebアプリケーションとして実行する手順は、Wijmoクイックスタートのブログ記事を参照してください。

アプリケーションへのWijmoの追加

最初に、ホスト要素をアプリケーションに追加し、それにIDを指定します。これは、Wijmoコントロールに変換されるHTML要素です。

<div id="hostElement"></div>

Wijmoパッケージには、CommonJS形式のJavaScriptモジュールが含まれています。このモジュールは、WebpackバンドラーやSystemJSランタイムモジュールローダーのような、モジュールをロードする機能を備えたツールと共に使用できます。

TypeScriptやBabelで作成されたアプリケーションにWijmoモジュールをインポートするには、ES2015のimport文を使用します。import文では、すべてのモジュール名の先頭に「@mescius/」プリフィックスを付け、その後にモジュール名を続けます。たとえば、次のコードは、「wijmo.grid」モジュールをインポートし、FlexGridコントロールのインスタンスを作成します。

import * as wjcGrid from '@mescius/wijmo.grid';
let grid = new wjcGrid.FlexGrid('#hostElement');

ES5でコードを記述する場合は、CommonJSの**require()**関数を使用してモジュールをインポートできます。次に例を示します。

var wjcGrid = require('@mescius/wijmo.grid');
var grid = new wjcGrid.FlexGrid('#hostElement');

Wijmo CSSの追加

Wijmoコントロールを正常に表示および動作させるには、Wijmo CSSファイルをアプリケーションにロードする必要があります。スタイルは @mescius/wijmo.styles npmパッケージに含まれます。

アプリケーションでスタイルをロードするには、次のimportステートメントを共通のCSSファイルの先頭に追加します。

@import '@mescius/wijmo.styles/wijmo.css';