「InputManJS(インプットマンJS)」のバージョンV2.3JではJavaScriptフレームワーク(Angular、React、Vue.js)のnpmパッケージを提供するようになりました。
また、各フレームワークのデモアプリケーションもWebサイトで新たに公開しています。
今回はその中から、Angular上でInputManJSを使用する方法を解説します。
Angularを使う準備
Angularを利用するには、開発環境にNode.jsとAngular CLIがインストールされている必要があります。最初にこれらのインストールについて説明します。
Node.jsのインストール
以下では、パッケージ管理ツール「npm」を使うので、npmを提供しているNode.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。
Angular CLIのインストール
次にコマンドラインツールを使ってAngular CLIをインストールします。コマンドラインツールにはいろいろありますが、ここではVisual Studio Codeに搭載されているTerminalを使うことにします。Terminalは、Visual Studio CodeでCtrl+@を押下することで表示できます。
具体的な手順は次のようになります。
- Terminalを起動する
- 次のように入力し、Enterを押下してAngular CLIをインストールする
- ngコマンドを使ってインストールしたAngular CLIのバージョンを確認する
npm install -g @angular/cli
ng --version
Visual Studio Codeで上記の操作を実行したときのようすを以下に示します。
これで準備完了です。
サンプルの作成
さあ、いよいよサンプルの作成です。
今回は、InputManJSのカレンダーコントロールとコンボコントロールを使います。それでは、以下の手順に沿ってサンプルを作成してみましょう。
- Visual Studio Codeを起動し、Terminalを開きます。
- cdコマンドを実行して、アプリケーションを作成するディレクトリに移動します。ここではルートディレクトリにアプリケーションを作成します。
- Angular CLIのng newコマンドを実行して、新しいAngularアプリケーションを作成します。下の例では、defaults=trueオプションを設定して詳細設定のわずらわしさを回避しています。
- cdコマンドを実行して、作成したアプリケーションのディレクトリに移動します。
- npm installコマンドでInputManJSのAngularパッケージをインストールします。
- Visula Stuido CodeのExplorerボタンをクリックして表示されるOpen Folderボタンをクリックし、アプリケーションフォルダ(inputmanjs-angular)内のsrcフォルダを開きます。
- 「/src/styles.css」ファイルを開いて次のように記述します。これにより、InputManJSのCSSファイルのインポートとカレンダーコントロールのスタイル設定を行います。
- 「/src/app/app.module.ts」ファイルの記述を次のように変更して、InputManJSのAngularモジュールをインポートします。ライセンスを設定する場合には、コメントアウトしている行のコメントを外してライセンスキーを設定してください。
- 「/src/app/app.component.ts」ファイルのAppComponentの内容を次のように変更し、各コントロールに連結するデータを定義します。
- 「/src/app/app.component.html」ファイルの内容をすべて削除し、次のように記述します。これによってInputManJSのコンポーネントが生成されます。
- npm startコマンドを実行して、アプリケーションを起動します。
- コンパイルが成功し、待機状態になった旨の文言が表示されたら、ブラウザで「http://localhost:4200/」を参照してアプリケーションを表示します。
cd C:\
ng new inputmanjs-angular --defaults=true
cd inputmanjs-angular
npm install @grapecity/inputman.angular
@import '@grapecity/inputman/CSS/gc.inputman-js.css'; /* カレンダーコントロールのスタイル */ .gcim-calendar__header { color: white; background-color: steelblue; } .gcim-calendar__month-body__week-title { background-color : lightsteelblue; } .gcim-calendar__month-body__corner-cell { background-color: lightsteelblue; } .gcim-calendar__weekday_sunday { color: red; } .gcim-calendar__weekday_saturday { color: blue; } .gcim-calendar__today-button { color: steelblue; }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { InputManModule } from '@grapecity/inputman.angular'; import { AppComponent } from './app.component'; // ライセンスを設定する場合 // import { InputMan } from "@grapecity/inputman"; // InputMan.LicenseKey = "ここにライセンスキーを設定します"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, InputManModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public orders = [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', price: 200, amount: 30 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', price: 290, amount: 50 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', price: 200, amount: 20 }, { id: 84, product: 'なまわさび', date: '2017/01/21', price: 200, amount: 40 }, { id: 85, product: 'なまからし', date: '2017/01/13', price: 200, amount: 40 }, { id: 86, product: 'なましょうが', date: '2017/01/20', price: 200, amount: 40 }, ]; dateValue = new Date(2020, 4, 11); }
カレンダーコントロール<br> <gc-calendar [(selectedDate)]="dateValue" [focusDate]="dateValue"> </gc-calendar> <br> コンボコントロール<br> <gc-combo-box [items]="orders" [displayMemberPath]="'product'" [valueMemberPath]="'product'" [dropDownWidth]="'auto'"> <gc-combo-box-column [name]="'id'" [label]="'商品コード'" [width]="80"> </gc-combo-box-column> <gc-combo-box-column [name]="'product'" [label]="'商品名'" [width]="180"> </gc-combo-box-column> <gc-combo-box-column [name]="'date'" [label]="'受注日'" [width]="100"> </gc-combo-box-column> <gc-combo-box-column [name]="'price'" [label]="'単価'" [width]="60"> </gc-combo-box-column> <gc-combo-box-column [name]="'amount'" [label]="'数量'" [width]="60"> </gc-combo-box-column> </gc-combo-box>
npm start
InputManJSのカレンダーコントロールとコンボコントロールがブラウザ上に表示されているようすを以下に示します。なお、ライセンス文字列を設定した場合には、末尾に表示されている「トライアル版」の文言は表示されません。
おわりに
製品Webサイトでは、InputManJS V2.3Jの各コントロールに焦点を絞ったデモと実際の利用シーンを想定したデモなどを用意しています。各デモでは、プラットフォーム別のコードや設定も確認できますので、以下より是非お試しください。