Ignite UI の始め方

- 2017/07/21(金) 時点の情報に基づいています -

こんにちは、インフラジスティックス・ジャパン デベロッパーサポート の桐生です。

Ignite UI の始め方と題して

• Ignite UI のオンラインサンプル
• Ignite UI のダウンロード
• Ignite UI の最小構成
• Ignite UI の実装基礎
• Ignite UI の他フレームワークへの組み込み（次回以降）

について整理していきたいと思います。既出の情報もあるかと思いますがご容赦ください。

Ignite UI のオンラインサンプル

https://jp.igniteui.com/

のページにてサンプルを公開していますので、気になったコントロールをオンライン上で試すことができます。

• グリッド（編集、ページング、フィルタリング、ソート、列固定、Excelエクスポート、グループ化など）
• チャート（カテゴリ、パイ、ドーナツなど）
• エディター（コンボ、日付ピッカー、数値、マスク、HTML、バリデーションなど）
• レイアウト（タイル、スプリッター、スクローラーなど）
• その他（ツリー、ダイアログ、ファイルアップロード、ポップオーバーなど）

など

個人的なおススメは、グリッドのパフォーマンスサンプルです。データ数、列数を好きな値に変更してどれくらいパフォーマンスが出るのかを簡単にチェックできます。詳細は以下のポストをご覧ください。

http://blogs.jp.infragistics.com/blogs/tatsushi-kiryu/archive/2017/01/31/ignite-ui-iggrid.aspx

 

Ignite UI のトライアルダウンロード

https://jp.infragistics.com/free-downloads/ignite-ui

のページからダウンロードすることができます。ダウンロード方法がいくつかあります。

1.インストーラーを使った方法

「ダウンロード」ボタンをクリックするとトライアル版をダウンロードすることができます。

ファイルサイズが 200MB を超えるため、通信環境によっては思いのほか時間がかかることがあります。

ダウンロード後、インストーラーを使ってインストールすると、

C:\Program Files (x86)\Infragistics\20XX.X\Ignite UI

配下に Ignite UI の JS、CSS ファイルが配置されますのでこれらを使ってトライアルすることができます。

2.CDN を使った方法

ダウンロードが面倒という場合は「CDNリンクを確認」ボタンをクリックして表示される JS、CSS の CDN リンクを使用してトライアルすることができます。

3.パッケージマネージャー を使った方法

npm, yarn, NuGet といったパッケージマネージャーを使ってダウンロードすることもできます。

「詳細」ボタンをクリックして表示されるダイアログからお好きなパッケージマネージャーのタブを選択し、表示されるコマンドを実行します。

注意として、npm, yarn でダウンロードした Ignite UI で使用できるコントロールは OSS 版のみになります。

https://github.com/IgniteUI/ignite-ui

グリッドやチャートを使いたい場合は、インストーラーや CDN あるいは NuGet 経由でのダウンロードが必要となります。

4.カスタムビルド を使った方法

必要な機能のみに絞ったカスタムビルドを作成してダウンロードすることもできます。カスタムビルドの「詳細」ボタンをクリックします。詳細は以下のポストをご覧ください。

http://blogs.jp.infragistics.com/blogs/tatsushi-kiryu/archive/2016/07/21/ignite-ui.aspx

 

Ignite UI の最小構成

ヘルプトピック：Ignite UI ボイラープレート HTML ページのサンプル (CDN リンクを使用)

https://jp.igniteui.com/help/getting-started#boilerplate

を参考に JS、CSS を読み込んでください。これが Ignite UI の最小構成となります。ただし、以下の点に注意してください。

• CSS について

• css/themes/infragistics/infragistics.theme.cssは css/structure/infragistics.css よりも先に読み込まなければなりません。

• JS について

• jQuery, jQuery UI の読み込みが必須です。js/infragistics.core.js よりも先に読み込まなければなりません。
• js/infragistics.core.jsは、js/infragistics.lob.jsや js/infragistics.dv.js よりも先に読み込まなければなりません。
• js/infragistics.lob.js には、グリッドやエディターなどのコントロールが含まれています。チャート系が不要であれば js/infragistics.dv.js の読み込みは不要です。
• js/infragistics.dv.js には、チャート系のコントロールが含まれています。グリッド系が不要であれば js/infragistics.lob.js の読み込みは不要です。

Ignite UI コントロールの実装基礎

Ignite UI はもともと jQuery UI をベースにしているので、基本的な使い方は jQuery UI と同じです。

コントロールの生成

Ignite UI コントロールをアタッチするための DOM を HTML に追加します。基本的には DOM に id 属性が必要で、id セレクターを使って DOM への参照を取得し、コントロールを生成します。

$('#grid').igGrid({ // オプション設定 });

コントロールが生成されているかをチェックする方法

コントロールのインスタンスを取得する方法があります。このインスタンスの有無で、生成されているかどうかを確認することができます。コントロールが生成されていない場合、undefined が返りますので、以下のように if を使って判定が可能です。

    // インスタンスの取得
    var igGrid = $('#grid').data('igGrid');
    // jQuery UI 1.11 からは instance メソッドを使用してインスタンスを取得することができます
    // http://api.jqueryui.com/jQuery.widget/#method-instance
    // var igGrid = $('#grid').igGrid('instance');
    if (igGrid) {
        console.log('生成されている')
    } else {
        console.log('生成されていない')
    }

コントロールのメソッド実行方法

https://jp.igniteui.com/help/api/2017.1/ui.iggrid#methods

など各コントロールの API リファレンスの「メソッド」タブに載っているメソッドを実行することができます。

    // $('#grid').igGrid('メソッド名');
    // 例：commit メソッドの実行
    $('#grid').igGrid('commit');

もう１つ、コントロールのインスタンスを介してメソッドを実行する方法があります。

    // インスタンスの取得
    var igGrid = $('#grid').data('igGrid');
    // commit メソッドの実行
    igGrid.commit();

こちらもご参考ください。

http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/

コントロールのオプションの動的な取得/設定方法

https://jp.igniteui.com/help/api/2017.1/ui.iggrid#options

など各コントロールの API リファレンスの「オプション」タブに載っているオプションを動的に取得/設定することができます。ただし、コードサンプル内で「// Set」の例示がないものは動的に設定することができない点に注意してください。

基本的には option メソッドを使用して取得/設定を行います。

    // Get
    // $('#grid').igGrid('option', 'オプション名');
    // 例：width オプション値の取得
    var width = $('#grid').igGrid('option', 'width');
    // Set
    // $('#grid').igGrid('option', 'オプション名', 値);
    // 例：width オプション値の設定
    $('#grid').igGrid('option', 'width', 1000);

コントロールのインスタンスを介して行う場合は以下のようになります。

    // インスタンスの取得
    var igGrid = $('#grid').data('igGrid');
    // Get
    var width = igGrid.option('width');
    // Set
    igGrid.option('width', 1000);

実は、コントロールのインスタンスプロパティからオプション値を取得することもできます。記述がシンプルになるのでオススメです。

    // インスタンスの取得
    var igGrid = $('#grid').data('igGrid');
    // Get
    var width = igGrid.options.width;

パフォーマンスを意識した実装方法

    // igGrid の生成
    $('#grid').igGrid({
        // オプション設定
    });
    // Get width
    var width = $('#grid').igGrid('option', 'width');
    // Set width
    $('#grid').igGrid('option', 'width', width + 100);
    // commit
    $('#grid').igGrid('commit');

実は、上記の実装はパフォーマンス的には良くありません。なぜなら $('#grid') のところで毎回 jQuery オブジェクトを生成するコストがかかっているためです。一度生成した jQuery オブジェクトはキャッシュしておくべきで、以下のようにリファクタリングできます。

    // jQuery オブジェクトをキャッシュ
    var $grid = $('#grid');
    // igGrid の生成
    $grid.igGrid({
        // オプション設定
    });
    // Get width
    var width = $grid.igGrid('option', 'width');
    // Set width
    $grid.igGrid('option', 'width', width + 100);
    // commit
    $grid.igGrid('commit');

あるいは、コントロールの生成直後にインスタンスを取得しておく方法もあります。上記よりもよりシンプルで見やすい記述になるので、オプションへのアクセスやメソッド実行が多くなる場合にはこちらのほうが適していると思います。また、純粋にコード量が減るので、ファイルサイズを抑えることにもつながります。

    // igGrid を生成してインスタンスを取得
    var igGrid = $('#grid').igGrid({
        // オプション設定
    }).data('igGrid');
    // Get width
    var width = igGrid.option('width');
    // Set width
    igGrid.option('width', width + 100);
    // commit
    igGrid.commit(); 

Ignite UI の他フレームワークへの組み込み（次回以降）

前述の通り、Ignite UI はもともと jQuery UI をベースにしたコントロールではありますが、現在では

• Angular
• React

といったフレームワークと共に使うことができるようになっています。

また、サーバーサイドテクノロジー

• ASP.NET MVC
• ASP.NET Core

に組み込んで開発することもできます。

次回以降、これらの技術と組み合わせて使用する方法について紹介していきたいと思います。