Ignite UI for Angular を開始

Ignite UI for Angular を使い始めるためには

Ignite UI for Angular を商用目的で利用する場合、ライセンスを取得する必要があります。このライセンスは Ignite UI for JavaScript、Infragistics Professional、Infragistics Ultimate にも含まれています。

商用利用のための評価目的として利用する場合、インフラジスティックス アカウントを作成することで、30 日間の無料トライアル技術サポートを受けることができます。下記のフォームに入力してください。


評価用 30 日トライアル技術サポートへの申し込み

* 必須入力項目
Loading...

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 を使用するためには以下のツールが必要となります。

  • Node.js v6.9.x 以上(v8.x.x 以降を推奨)
  • npm v3.x.x 以上(Node.js にバンドル、v5.x.x 以降を推奨)

既に環境をインストール済みの場合は 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. コンポーネントのグループを選択 
  2. 使用するコンポーネントの選択
  3. (提供されている場合) コンポーネント用のテンプレートの選択
  4. コンポーネントの名前を決定

ここでは、Grid & List グループを選択し、Grid を追加、更には標準的な機能を設定している Grid を選択した後、myGrid と名前を付けます。

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

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

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

  1. 使用するビューの選択
  2. ビューの名前を決定

ここでは、大量データを表示、スクロールするシナリオを再現した Monster Grid ビューを選択し、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 v6.9.x 以上(v8.x.x 推奨)
  • npm v3.x.x 以上(v5.x.x 推奨)
  • Angular CLI v1.5.x 以降

既に環境をインストール済みの場合は 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 をインストールします。

npm install -g @angular/cli

インストールが終わったら、以下のコマンドを実行して 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 5 以降をターゲットにしているため、以前のバージョンを利用されている場合は、Angular CLI 1.5 以降にアップデートを行ってください。

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

igniteui-angular のインストール完了後、Hammer.js に関するワーニングメッセージが表示されます。例は下記となります。

npm WARN igniteui-angular@5.2.0-beta.1 requires a peer of hammerjs@^2.0.8 but none is installed. You must install peer dependencies yourself.

Hammer.js はタッチジェスチャー用のライブラリです。Ignite UI for Angular は Hammer.js に依存しているため、別途インストールする必要があります。

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

npm install hammerjs

コンパイル時に型定義ファイルも必要になるのでインストールします。

npm install @types/hammerjs

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

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/main';
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-cli.json を開いて以下のように、”apps” 配下の ”styles” にIgnite UI for Angular の スタイル定義を追加します

{
     ~中略~
     },
     "apps": [
             {
                 ~中略~
                 "styles": [
                     "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';

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、オンラインで実行できるサンプルをご確認ください。