Angular & InputManJSクイックスタート

「InputManJS（インプットマンJS）」のバージョンV2.3JではJavaScriptフレームワーク（Angular、React、Vue.js）のnpmパッケージを提供するようになりました。

また、各フレームワークのデモアプリケーションもWebサイトで新たに公開しています。

今回はその中から、Angular上でInputManJSを使用する方法を解説します。

Angularを使う準備
サンプルの作成
おわりに

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をインストールする

npm install -g @angular/cli

ngコマンドを使ってインストールしたAngular CLIのバージョンを確認する

ng --version

Visual Studio Codeで上記の操作を実行したときのようすを以下に示します。

これで準備完了です。

サンプルの作成

さあ、いよいよサンプルの作成です。

今回は、InputManJSのカレンダーコントロールとコンボコントロールを使います。それでは、以下の手順に沿ってサンプルを作成してみましょう。

Visual Studio Codeを起動し、Terminalを開きます。

cdコマンドを実行して、アプリケーションを作成するディレクトリに移動します。ここではルートディレクトリにアプリケーションを作成します。

cd C:\

Angular CLIのng newコマンドを実行して、新しいAngularアプリケーションを作成します。下の例では、defaults=trueオプションを設定して詳細設定のわずらわしさを回避しています。

ng new inputmanjs-angular --defaults=true

cdコマンドを実行して、作成したアプリケーションのディレクトリに移動します。

cd inputmanjs-angular

npm installコマンドでInputManJSのAngularパッケージをインストールします。

npm install @grapecity/inputman.angular

Visula Stuido CodeのExplorerボタンをクリックして表示されるOpen Folderボタンをクリックし、アプリケーションフォルダ（inputmanjs-angular）内のsrcフォルダを開きます。

「/src/styles.css」ファイルを開いて次のように記述します。これにより、InputManJSのCSSファイルのインポートとカレンダーコントロールのスタイル設定を行います。

@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;
}

「/src/app/app.module.ts」ファイルの記述を次のように変更して、InputManJSのAngularモジュールをインポートします。ライセンスを設定する場合には、コメントアウトしている行のコメントを外してライセンスキーを設定してください。

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 { }

「/src/app/app.component.ts」ファイルのAppComponentの内容を次のように変更し、各コントロールに連結するデータを定義します。

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);
}

「/src/app/app.component.html」ファイルの内容をすべて削除し、次のように記述します。これによってInputManJSのコンポーネントが生成されます。

カレンダーコントロール<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>