GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

GrapeCity

Angular & InputManJSクイックスタート

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+@を押下することで表示できます。

具体的な手順は次のようになります。

  1. Terminalを起動する

  2. 次のように入力し、Enterを押下してAngular CLIをインストールする
  3. npm install -g @angular/cli
    
  4. ngコマンドを使ってインストールしたAngular CLIのバージョンを確認する
  5. ng --version
    

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

Angularのインストール

これで準備完了です。

サンプルの作成

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

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

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

  2. cdコマンドを実行して、アプリケーションを作成するディレクトリに移動します。ここではルートディレクトリにアプリケーションを作成します。
  3. cd C:\
    
  4. Angular CLIのng newコマンドを実行して、新しいAngularアプリケーションを作成します。下の例では、defaults=trueオプションを設定して詳細設定のわずらわしさを回避しています。
  5. ng new inputmanjs-angular --defaults=true
    
  6. cdコマンドを実行して、作成したアプリケーションのディレクトリに移動します。
  7. cd inputmanjs-angular
    
  8. npm installコマンドでInputManJSのAngularパッケージをインストールします。
  9. npm install @grapecity/inputman.angular
    
  10. Visula Stuido CodeのExplorerボタンをクリックして表示されるOpen Folderボタンをクリックし、アプリケーションフォルダ(inputmanjs-angular)内のsrcフォルダを開きます。

  11. 「/src/styles.css」ファイルを開いて次のように記述します。これにより、InputManJSのCSSファイルのインポートとカレンダーコントロールのスタイル設定を行います。
  12. @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;
    }
    
  13. 「/src/app/app.module.ts」ファイルの記述を次のように変更して、InputManJSのAngularモジュールをインポートします。ライセンスを設定する場合には、コメントアウトしている行のコメントを外してライセンスキーを設定してください。
  14. 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 { }
    
  15. 「/src/app/app.component.ts」ファイルのAppComponentの内容を次のように変更し、各コントロールに連結するデータを定義します。
  16. 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);
    }
    
  17. 「/src/app/app.component.html」ファイルの内容をすべて削除し、次のように記述します。これによってInputManJSのコンポーネントが生成されます。
  18. カレンダーコントロール<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>
    
  19. npm startコマンドを実行して、アプリケーションを起動します。
  20. npm start
    
  21. コンパイルが成功し、待機状態になった旨の文言が表示されたら、ブラウザで「http://localhost:4200/」を参照してアプリケーションを表示します。

InputManJSのカレンダーコントロールとコンボコントロールがブラウザ上に表示されているようすを以下に示します。なお、ライセンス文字列を設定した場合には、末尾に表示されている「トライアル版」の文言は表示されません。

サンプル

メモ
AngularをはじめとするJSフレームワーク上でInputManJSを使用するときの手順についてヘルプデモで解説していますので、ご参考にしてください。


おわりに

製品Webサイトでは、InputManJS V2.3Jの各コントロールに焦点を絞ったデモと実際の利用シーンを想定したデモなどを用意しています。各デモでは、プラットフォーム別のコードや設定も確認できますので、以下より是非お試しください。

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品・技術資料をご覧ください。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。