Ignite UI for Angularを利用して開発を開始

 

Ignite UI for Angularのセットアップ方法

Ignite UI for AngularはコマンドラインツールであるIgnite UI CLIを利用する、あるいは、npmを使用し、手動で組み込むことが可能です。はじめて製品を利用になる場合は、Ignite UI CLIの利用をおすすめします。

Ignite UI CLIを利用し、Angularアプリケーションの開発を開始

Angular、JavaScriptアプリケーションの構築において、依存関係や必要ライブラリの参照は複雑化しています。Ignite UI CLI はコマンドライン ツールとして提供されており、複雑化するプロジェクトの構成の指定や、インフラジスティックスが提供するIgnite UI for JavaScriptIgnite UI for Angularのコンポーネントの追加を簡単に行えます。

1. 必要環境のインストール

Ignite UI CLIを使用するためには以下のツールが必要となります。

既に環境をインストール済みの場合は 2-1. Ignite UI CLIのインストール へスキップしてください。

1-1. Node.js, npmのインストール

https://nodejs.org/ja/から推奨版をダウンロードしてインストールします。インストールが終わったら、コマンドプロンプト(Windows)あるいはターミナル(macOS)を起動し、以下のコマンドを実行してNode.jsとnpmのバージョンを確認します。コマンド実行時の作業ディレクトリは任意です。

node -v
npm -v

以上で環境準備は完了です。

2. Ignite UI CLIのインストール

2-1. Ignite UI CLIのインストール

Ignite UI CLIをインストールするには、コマンドプロンプト(Windows)あるいはターミナル(macOS)を起動し、パッケージをインストールします。また、実行時には管理者権限が必要になる場合があります。

npm -g install igniteui-cli

完了後、下記のコマンドを実行し、インストールが行われていることを確認します。

ig -v

Ignite UI CLI バージョン

以上でインストール作業は完了です。

3. Ignite UI CLI を使用し、Angularアプリケーションを作成

3-1. Ignite UI CLIを起動

Ignite UI CLIには様々なオプションが提供されていますが、下記のコマンドを実行することで、ウィザード形式でオプションを選択することが可能です。

ig

ここからはウィザードの質問に答える形で設定を行います。

3-2. プロジェクト名を決定

最初に Ignite UI CLIで作成するプロジェクト名を指定します。ここではigApp1と指定します。

Ignite UI CLI プロジェクト名

3-3. フレームワークの選択 

このプロジェクトで使用するフレームワークを選択します。jQuery、Reactを選択した場合は、Ignite UI for JavaScriptを利用することになります。ここではAngularを選択します。

Ignite UI CLI プロジェクト名

3-4. Angular で使用する製品を選択

フレームワークの種類をAngularとした場合、Ignite UI for Angular、あるいはIgnite UI for JavaScriptで利用できるAngularラッパーのどちらかを選択します。ここでは、Ignite UI for Angularを選択します。

Ignite UI CLI 使用プロダクト

製品を選択するとプロジェクトのひな型が作成されます。

3-5. コンポーネントおよびビューを追加

ひな型の作成が完了すると、Complete & Run、Add component、Add viewというオプションが表示されます。Add component、Add viewは繰り返し実行できます。全ての設定が終わった段階でCompleteを選択します。

3-5-1. コンポーネントの追加 

Add componentを選択すると、単独のコンポーネントをプロジェクトに追加することができます。その際には下記の3点を実行します。

  1. コンポーネントのグループを選択 (Choose a group): Grids & Listsを選択
  2. 使用するコンポーネントの選択 (Choose a component): Gridを選択
  3. (提供されている場合) コンポーネント用のテンプレートの選択 (Choose one): Gridを選択
  4. コンポーネントの名前を決定 (Name your component): myGridと入力 

Ignite UI CLI コンポーネントの追加

3-5-2. ビューの追加 

Add viewを選択すると、複数のコンポーネントや機能が実装された画面を追加することができます。そのため、個々のコンポーネント動作を確認するというよりは、特定のビジネスシナリオを実装例の確認として利用できます。ビューを追加する場合は下記の手順を実行します。

  1. 使用するビューの選択 (Choose custom view): MonsterGridを選択
  2. ビューの名前を決定 (Name your view): myMonsterGridと入力

Ignite UI CLI ビューの追加

3-6. 実行確認

Completeを選択すると、ビルドが開始され、実行結果が表示されます。

Ignite UI CLI 実行結果
Ignite UI CLI myGrid1

Ignite UI CLI awesomeGrid

一度作成したプロジェクトに新たにコンポーネント、ビューを追加する場合は、プロジェクトのフォルダに移動し、再度下記のコマンドを実行します。

ig

また、Ignite UI CLIで作成された既存のプロジェクトを実行する場合は下記のコマンドを実行します。

ig start

無料ハンズオンセミナーでは、Ignite UI for Angularのインストールからコンポーネントの追加、グリッド、エディターの利用などをご体験いただけます。ぜひ、ご参加ください。

Ignite UI for Angularのセットアップ方法

1. 必要環境のインストール

Ignite UI for Angularを使用するためには以下のツールが必要となります。

  • Node.js v8.9.x以上(June 2018 Security Releasses 適用済みのバージョンを推奨)
  • npm v5.6.x以上
  • Angular CLI v6.x (2018/10/26現在、Ignite UI for Angular最新版の対応バージョンはAngular6です。そのため、Angular CLIはv6をご利用ください。今後Angular7対応版を公開予定です。)

既に環境をインストール済みの場合は2-2. Ignite UI for Angularパッケージのインストール へスキップしてください。

1-1. Node.js, npmのインストール

https://nodejs.org/ja/から 推奨版 をダウンロードし、インストールします。インストール終了後コマンドプロンプト(Windows)あるいはターミナル(macOS)を起動し、以下のコマンドを実行してNode.jsとnpmのバージョンを確認します。コマンド実行時の作業ディレクトリは任意です。

node -v
npm -v

1-2. Angular CLIのインストール

1-1. Node.js, npmのインストール の際に起動したコマンドプロンプトまたはターミナル上で引き続き作業を行なっていきます。以下のコマンドを実行してAngular CLIをインストールします。現時点では、Angular CLI v6系をインストールしてください。

npm install -g @angular/cli@v6-lts

インストール終了後、以下のコマンドを実行してAngular CLIのバージョンを確認します。

ng -v

以上で環境準備は完了です。

2. Ignite UI for Angularのインストール

2-1. Angular CLIプロジェクトの作成

Documentsディレクトリ直下にAngular CLIプロジェクトを作成します。Documentsディレクトリの代わりに任意のディレクトリで作業を進めても構いません。

cd Documents
ng new my-app

作成後、プロジェクトディレクトリに移動します。

cd my-app

次のコマンドを実行し、Angular CLIによってアプリケーションが作成されていることを確認します。

ng serve -o

以降、コマンド実行はプロジェクトのディレクトリ内で実施します。

2-2. Ignite UI for Angularパッケージのインストール

Ignite UI for Angularのパッケージ名はigniteui-angularです。現在の最新バージョンは、Angular 6をターゲットにしているため、以前のバージョンを利用されている場合は、Angular CLI 6.x.x以降にアップデートを行ってください。

Angular CLI v6の環境で、Ignite UI for Angularパッケージをインストール
npm install igniteui-angular

igniteui-angularのインストール時に環境によっては、下記の例のように必要な依存関係のインストールを求める警告メッセージが表示されます。

npm WARN igniteui-angular@6.1.3 requires a peer of web-animations-js@^2.3.1 but none is installed. You must install peer dependencies yourself.

この例では、Web-Animation.jsはRipple コンポーネントなどで使用されているWeb Animations APIをサポートしていないブラウザーでも動作させるためのライブラリーを主導でインストールするように促すメッセージが表示されています。

2-3. 依存パッケージのインストール

上記の警告メッセージに出力されたパッケージをインストールします。

npm install web-animations-js

これでインストール作業は完了です。

3. Ignite UI for Angularの組み込み

3-1. app.module.tsの編集

エディターでmy-app\src\app\app.module.tsを開いて以下のように編集します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { IgxNavbarModule } from 'igniteui-angular';
import 'hammerjs'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, IgxNavbarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

3-2. app.component.htmlの編集

続いてmy-app\src\app\app.component.htmlを開いて以下のように編集します。

<igx-navbar
    [title]="title"
    actionButtonIcon="menu"
    (onAction)="onClickMenu()">
</igx-navbar>
<h1>{{title}}</h1>

3-3. app.component.tsの編集

最後にmy-app\src\app\app.component.tsを開き、以下のように編集します。

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = '備品リスト';

    onClickMenu() {
       console.log('Menu Clicked');
} }

3-4. Ignite UI for AngularのCSS読み込み 

エディタでmy-app\angular.jsonを開いて以下のように、"projects" - ”my-app” - "architect" - "build" - "options" - "assets" 配下の ”styles” にIgnite UI for Angularの スタイル定義を追加します

{
     ~中略~
     },
     "projects": {
         "my-app" {
             "architect" {
                 "build" {
                     "options" {
                         "styles" : [
                             "src/styles.css", 
                              "node_modules/igniteui-angular/styles/igniteui-angular.css"
                          ],
                 ...

3-5. マテリアル アイコンをインポート

Ignite UI for Angularはマテリアル アイコンを使用しているため、my-app\src\index.htmlのヘッダー要素でマテリアル アイコンをインポートします。

<head>
     ~中略~
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

3-6. ポリフィル有効化(任意)

Angular CLIプロジェクトは、デフォルトではIE11や古いブラウザーなど、EcmaScript 6をサポートしないブラウザーでは実行することができません。IE11で実行したい場合はmy-app\src\polyfills.ts内の以下の行のコメントを外します。その他の古いブラウザーに関する設定も同ファイルの中に存在するため、必要に応じてコメントを外してください。

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

IE11で使用される場合は下記のトピックも併せてご覧ください。

Ignite UI for Angular - IE11で使用する際の注意点

3-7. 実行確認

ng serve -o

成功すると、ブラウザが起動し、Ignite UI for Angularのナビゲーションバーコンポーネントが画面上に表示されます。

備品リスト

無料ハンズオンセミナーでは、上記のIgnite UI for Angularのインストールからコンポーネントの追加、グリッド、エディターの利用などをご体験いただけます。ぜひ、ご参加ください。

Ignite UI for Angularコンポーネント

Getting Started with Ignite UI for Angular is Easy

開発を加速させるコンポーネント

Ignite UI for Angularの使用方法やAPI、オンラインで実行できるサンプルをご確認ください。