npmによるWijmoの参照
インストール
npmではWijmoは@mesciusスコープ内のwijmo.*パッケージのセットで表されます。@mescius/wijmo.allはライブラリのすべてのパッケージを表します。
他のnpmパッケージと同様に、使用するにはNodeJSがコンピュータにインストールされている必要があります。
コマンドラインから次のコマンドを実行すると、Wijmoの最新のリリース版をnpmからインストールできます。
npm install @mescius/wijmo.all@の後ろに製品バージョンを指定すると、特定のバージョンをインストールできます。
npm install @mescius/wijmo.all@5.20191.xxxリリース版に加えて、RC版（リリース候補版）とナイトリー版も公開しています。RC版とナイトリー版はテスト専用であり、本番環境では使用しないでください。
最新のRC版をインストールするには、次のコマンドを使います。
npm install @mescius/wijmo.all@rc最新のナイトリー版をインストールするには、次のコマンドを使います。
npm install @mescius/wijmo.all@nightlyまた、RC版とナイトリー版は@mesciusスコープでのみ公開されます。
パッケージグループをインストールする
通常、アプリケーションにはWijmoパッケージの特定のサブセットのみが必要です。これは、使用するフレームワークの有無と使用方法によって異なります。
Wijmoはこの作業を容易にする特別なグループパッケージ（wijmo.*.all）を提供しています。グループパッケージにはコードが含まれておらず、パッケージ依存関係のみが指定され、_npm_または_yarn_でグループに関連する実際のパッケージをインストールできます。
コアとなるPure JavaScript（フレームワークを含まない）パッケージのみをインストールするには、このコマンドを使用します。
npm install @mescius/wijmo.purejs.all特定のフレームワーク用のパッケージをコアPure JavaScriptパッケージと一緒にインストールするには、次のコマンドを使用します。
npm install @mescius/wijmo.{framework}.all**{framework}**は、angular2、react、vue2、webcomponentsのいずれかの値を取ります。
たとえば、このコマンドはPure JavaScriptパッケージと一緒に Angular パッケージをインストールします。
npm install @mescius/wijmo.angular2.all特定のパッケージをインストールする
特定のWijmoパッケージをインストールすることもできます。このパッケージが依存するすべてのパッケージは自動的にインストールされます。
たとえば、アプリケーションにwijmo.gridパッケージしか必要ない場合は、次のコマンドを使用してインストールできます。
npm install @mescius/wijmo.grid次の wijmo.grid 依存パッケージは自動的にインストールされます。
@mescius/wijmo.input
@mescius/wijmo
@mescius/wijmo.styles
スタイルをインストールする
WijmosのCSSスタイル、テーマ、SCSSのファイルは、@mescius/wijmo.stylesパッケージに含まれます。
最も基本的な**@mescius/wijmo**パッケージはstylesパッケージへの依存を宣言しているので、通常はこのパッケージを明示的にインストールする必要はなく、他のWijmoパッケージと一緒に自動的にインストールされます。
カルチャーをインストールする
言語／国固有の書式記述子とUI文字列を含むカルチャーファイルは、独立した**@mescius/wijmo.cultures**パッケージに含まれます。このコマンドを使用してインストールすることができます。
npm install @mescius/wijmo.culturesアプリケーションにWijmoを追加する
JavaScriptモジュールを追加する
すべてのWijmoパッケージには、複数の形式（ES5／ES2015言語とCommonJS／ESMモジュール形式の組み合わせ）のJavaScriptファイルが含まれています。package.jsonのmainフィールドでは、既定の形式としてES5＋CommonJSファイルを参照します。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('grapecity/wijmo.grid');
var grid = new wjcGrid.FlexGrid('#hostElement');スタイルを追加する
コントロールを画面に正しく表示するには、Wijmo CSSスタイルファイルへの参照を追加する必要があります。
HTMLページに_link_タグを追加することも可能です。
<link href="node_modules/@mescius/wijmo.styles/wijmo.css" rel="stylesheet" />または、次のようにES2015の_import_文を記述します。
import '@mescius/wijmo.styles/wijmo.css';または、相対パスで指定します。
import './node_modules/@mescius/wijmo.styles/wijmo.css';import文で指定されたパスの実際の形式は、アプリケーションで使用されているバンドラー／モジュールローダーと、その設定内容によって異なります。
SPAアプリケーションの場合は、アプリケーションのルートモジュールのどこかに、CSSファイルを1回だけインポートするだけで十分です。
同様に、次のようにテーマファイルをインポートすることができます。
import '@mescius/wijmo.styles/themes/wijmo.theme.cerulean.css';テーマファイルをインポートする場合は、wijmo.cssスタイルファイルをインポートする必要はありません。機能的には、これを両方ともインポートしても間違いではありません。
カルチャーを追加する
次のような_import_ステートメントを使用して**@mescius/wijmo.cultures**パッケージから特定のカルチャーファイルを適用できます。
import '@mescius/wijmo.cultures/wijmo.culture.ja';一般的なフレームワークでWijmoを使用する
Angular CLI、create-react-app、Vue CLIなどの一般的な開発ツールでWijmo npmモジュールを使用する方法については、Wijmoクイックスタートのブログ記事を参照してください。
2018J v3以前の旧バージョンからの移行方法
Wijmo 2019J v1では、npmパッケージの仕様が変更されました。そのため、2018J v3以前のバージョンから2019J v1以降のバージョンに移行するには、次の手順を行う必要があります。
旧バージョンのnpmパッケージをアンインストールします。
npm uninstall wijmo新バージョンのnpmパッケージをインストールし直します。
npm install @mescius/wijmo.xxx.allimport文のモジュール名を次のルールに従って置換します。
wijmo/wijmo→@mescius/wijmowijmo/styles→@mescius/wijmo.styleswijmo/cultures→@mescius/wijmo.cultures
2019J v1以降の旧バージョンからの移行方法
Wijmo 2019J v1以降のバージョンから新バージョンへ移行するには、次の手順を行います。
npm updateコマンドを実行します。
npm updatenpm updateコマンドで最新版へアップデートできない場合は、次のコマンドで最新版をインストールし直します。
npm install @mescius/wijmo.xxx.all@latest特定のバージョンへアップデートする場合は、次のコマンドで特定のバージョンをインストールし直します。
npm install @mescius/wijmo.xxx.all@バージョン番号