5.20212.812
5.20212.812

npmによるWijmoの参照

インストール

npmではWijmoは@grapecityスコープ内のwijmo.*パッケージのセットで表されます。@grapecity/wijmo.allはライブラリのすべてのパッケージを表します。 他のnpmパッケージと同様に、使用するにはNodeJSがコンピュータにインストールされている必要があります。

コマンドラインから次のコマンドを実行すると、Wijmoの最新のリリース版をnpmからインストールできます。

npm install @grapecity/wijmo.all

@の後ろに製品バージョンを指定すると、特定のバージョンをインストールできます。

npm install @grapecity/wijmo.all@5.20191.xxx

リリース版に加えて、RC版(リリース候補版)とナイトリー版も公開しています。RC版とナイトリー版はテスト専用であり、本番環境では使用しないでください。

最新のRC版をインストールするには、次のコマンドを使います。

npm install @grapecity/wijmo.all@rc

最新のナイトリー版をインストールするには、次のコマンドを使います。

npm install @grapecity/wijmo.all@nightly

パッケージグループをインストールする

通常、アプリケーションにはWijmoパッケージの特定のサブセットのみが必要です。これは、使用するフレームワークの有無と使用方法によって異なります。 Wijmoはこの作業を容易にする特別なグループパッケージ(wijmo.*.all)を提供しています。グループパッケージにはコードが含まれておらず、パッケージ依存関係のみが指定され、npmまたはyarnでグループに関連する実際のパッケージをインストールできます。

コアとなるPure JavaScript(フレームワークを含まない)パッケージのみをインストールするには、このコマンドを使用します。

npm install @grapecity/wijmo.purejs.all

特定のフレームワーク用のパッケージをコアPure JavaScriptパッケージと一緒にインストールするには、次のコマンドを使用します。

npm install @grapecity/wijmo.{framework}.all

{framework}は、angular2reactvue2webcomponentsangularknockoutのいずれかの値を取ります。 たとえば、このコマンドはPure JavaScriptパッケージと一緒に Angular パッケージをインストールします。

npm install @grapecity/wijmo.angular2.all

特定のパッケージをインストールする

特定のWijmoパッケージをインストールすることもできます。このパッケージが依存するすべてのパッケージは自動的にインストールされます。 たとえば、アプリケーションにwijmo.gridパッケージしか必要ない場合は、次のコマンドを使用してインストールできます。

npm install @grapecity/wijmo.grid

次の wijmo.grid 依存パッケージは自動的にインストールされます。

  • @grapecity/wijmo.input
  • @grapecity/wijmo
  • @grapecity/wijmo.styles

スタイルをインストールする

WijmosのCSSスタイル、テーマ、SCSSのファイルは、@grapecity/wijmo.stylesパッケージに含まれます。 最も基本的な@grapecity/wijmoパッケージはstylesパッケージへの依存を宣言しているので、通常はこのパッケージを明示的にインストールする必要はなく、他のWijmoパッケージと一緒に自動的にインストールされます。

カルチャーをインストールする

言語/国固有の書式記述子とUI文字列を含むカルチャーファイルは、独立した@grapecity/wijmo.culturesパッケージに含まれます。このコマンドを使用してインストールすることができます。

npm install @grapecity/wijmo.cultures

アプリケーションにWijmoを追加する

JavaScriptモジュールを追加する

すべてのWijmoパッケージには、複数の形式(ES5/ES2015言語とCommonJS/ESMモジュール形式の組み合わせ)のJavaScriptファイルが含まれています。package.jsonのmainフィールドでは、既定の形式としてES5+CommonJSファイルを参照します。WebpackバンドラーやSystemJSランタイムモジュールローダーなどのツールと一緒にそれらのモジュールを使うことができます。

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

import * as wjcGrid from '@grapecity/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/@grapecity/wijmo.styles/wijmo.css" rel="stylesheet" />

または、次のようにES2015のimport文を記述します。

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

または、相対パスで指定します。

import './node_modules/@grapecity/wijmo.styles/wijmo.css';

import文で指定されたパスの実際の形式は、アプリケーションで使用されているバンドラー/モジュールローダーと、その設定内容によって異なります。 SPAアプリケーションの場合は、アプリケーションのルートモジュールのどこかに、CSSファイルを1回だけインポートするだけで十分です。

同様に、次のようにテーマファイルをインポートすることができます。

import '@grapecity/wijmo.styles/themes/wijmo.theme.cerulean.css';

テーマファイルをインポートする場合は、wijmo.cssスタイルファイルをインポートする必要はありません。機能的には、これを両方ともインポートしても間違いではありません。

カルチャーを追加する

次のようなimportステートメントを使用して@grapecity/wijmo.culturesパッケージから特定のカルチャーファイルを適用できます。

import '@grapecity/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以降のバージョンに移行するには、次の手順を行う必要があります。

  1. 旧バージョンのnpmパッケージをアンインストールします。

    npm uninstall wijmo
    
  2. 新バージョンのnpmパッケージをインストールし直します。

    npm install @grapecity/wijmo.xxx.all
    
  3. import文のモジュール名を次のルールに従って置換します。

    • wijmo/wijmo@grapecity/wijmo
    • wijmo/styles@grapecity/wijmo.styles
    • wijmo/cultures@grapecity/wijmo.cultures

2019J v1以降の旧バージョンからの移行方法

Wijmo 2019J v1以降のバージョンから新バージョンへ移行するには、次の手順を行います。

  1. npm updateコマンドを実行します。 sh npm update
  2. npm updateコマンドで最新版へアップデートできない場合は、次のコマンドで最新版をインストールし直します。 sh npm install @grapecity/wijmo.xxx.all@latest
  3. 特定のバージョンへアップデートする場合は、次のコマンドで特定のバージョンをインストールし直します。 sh npm install @grapecity/wijmo.xxx.all@バージョン番号