- 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

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

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

以前のブログで、Ignite UI の igDataChart に任意の Canvas 要素を追加する方法をご紹介しました。Infragistics WPF 製品には、igDataChart と似た構造を持つチャートコントロールの XamDataChart があります。XamDataChart でも同じように、チャートエリアに自由にUI要素を配置いただくことが可能です。

今回は、前回と同様、チャートに最大値と最小値を表すラインとラベル、そしてデータポイントを強調する視覚要素を追加してみたいと思います。

目指すチャートはこちらです。

上のチャートは、柱状シリーズを持つ XamDataChart に、カスタムで作成した ContentControl をオーバーレイして(重ねて)作成されています。この ContentControl の Content に、Max および Min のラインとそのラベル、それから「ここ重要!」のラベルと緑の丸印の要素を配置した Canvas インスタンスが割り当てられています。

まずは、オーバーレイの土台となる ContentControl の実装を見てみます。

    publicclassChartOverlay : ContentControl
    {
        protectedCanvas _overlayCanvas = newCanvas();
        public
ChartOverlay()
        {
            Viewport = Rect.Empty;
            HorizontalContentAlignment = HorizontalAlignment.Stretch;
            VerticalContentAlignment = VerticalAlignment.Stretch;
            Content = _overlayCanvas;
        }
 
        publicXamDataChart Chart
        {
            get { return (XamDataChart)GetValue(ChartProperty); }
            set {
SetValue(ChartProperty, value); }
        }
 
        publicstaticreadonlyDependencyProperty ChartProperty =
            DependencyProperty.Register(
            "Chart",
            typeof(XamDataChart),
            typeof(ChartOverlay),
            newPropertyMetadata(
                null,
                (o, e) => (o asChartOverlay).OnChartChanged(
                    (XamDataChart)e.OldValue,
(XamDataChart)e.NewValue)));
 
        privatevoid
OnChartChanged(XamDataChart oldChart, XamDataChart
newChart)
        {
            if (oldChart != null)
            {
                Detach(oldChart);
            }
            if (newChart != null)
            {
                Attach(newChart);
            }
        }
 
        protectedXamDataChart _chart = null;
 
        privatevoid
Attach(XamDataChart newChart)
        {
            _chart = newChart;
            newChart.RefreshCompleted +=
RefreshCompleted;
        }
 
        protectedRect Viewport { get; set; }
 
        privatevoid
RefreshCompleted(object sender, EventArgs e)
        {
            Viewport = GetChartViewport();
            DoRefresh();
        }
 
        privateRect GetChartViewport()
        {
            if (_chart == null)
            {
                returnRect.Empty;
            }
            var eles =
                _chart.Axes.OfType<FrameworkElement>()
                .Concat(_chart.Series.OfType<FrameworkElement>());
            if (!eles.Any())
            {
                returnRect.Empty;
            }
 
            var first =
eles.First();
            Point topLeft;
            try
            {
                topLeft =
first.TransformToVisual(this).Transform(newPoint(0, 0));
            }
            catch (Exception e)
            {
                returnRect.Empty;
            }
 
            returnnewRect(
                topLeft.X,
                topLeft.Y,
                _chart.ViewportRect.Width,
                _chart.ViewportRect.Height);
        }
 
        protectedvoid
DoRefresh()
        {
            DoRefreshOverride();
        }
 
        protectedvirtualvoid DoRefreshOverride()
        {
        }
 
        privatevoid
Detach(XamDataChart oldChart)
        {
            oldChart.RefreshCompleted -=
RefreshCompleted;
        }
    }

上記の ChartOverlay クラスは、Content に空の Canvas が割り当てられている状態です。ターゲットとなる XamDataChart の情報をもち、チャートが再描画された際に発生する RefreshCompleted() イベントでオーバーレイのリフレッシュを行う機能が実装されています。

あとは上記の ChartOverlay クラスを継承し、Canvas に表示したい要素を配置するのみです。

    publicclassMyCustomOverlay : ChartOverlay
    {

          //ここに以下で紹介するコードを追加します。

    }

それでは、MyCustomOverlay クラスのコードをご紹介します。

まずはメンバー変数の定義です。ここでは、最大値と最小値(タイプ: double )、また「ここ重要!」を付与する座標軸(タイプ: Point )を保持するプロパティ、それからUI要素である Line や TextBlock、Ellipse の宣言とインスタンス化を行っています。また、軸情報( CategoryXAxis、NumericYAxis )には頻繁にアクセスを行うため、getter を用意しています。

        publicdouble MyMaxY { get; set; }

        publicdouble MyMinY { get; set; }
        publicPoint HighlightP { get; set; }

        privateLine maxLine = newLine()

        {

            Stroke = newSolidColorBrush(Colors.Red),

            StrokeThickness = 2

        };

        privateLine minLine = newLine()

        {

            Stroke = newSolidColorBrush(Colors.Blue),

            StrokeThickness = 2

        };

        privateTextBlock maxLabel = newTextBlock()

        {

            Foreground = newSolidColorBrush(Colors.Red),

        };

        privateTextBlock minLabel = newTextBlock()

        {

            Foreground = newSolidColorBrush(Colors.Blue),

        };

        privateEllipse circle = newEllipse()

        {

            StrokeThickness = 2,

            Stroke = newSolidColorBrush(Colors.Green),

            Width = 50,

            Height = 50

        };

        privateTextBlock circleLabel = newTextBlock()

        {

            Foreground = newSolidColorBrush(Colors.Green),

            Text = "ここ重要！"

        };

        protectedCategoryXAxis XAxis

        {

            get{ return _chart.Axes.OfType<CategoryXAxis>().First(); }

        }

        protectedNumericYAxis YAxis

        {

            get{ return _chart.Axes.OfType<NumericYAxis>().First(); }

        }

次に、コンストラクタで上記のUI要素を Canvas に追加します。MyMaxY、MyMinY、HighlightP はそれぞれ最大値と最小値の線を描画する Y 軸値とデータを強調表示する X 軸値ですが、ここでハードコードしています。これらは外からアクセス可能なプロパティですので、お好みのタイミングで良いでしょう。

        public MyCustomOverlay()

        {

            _overlayCanvas.Children.Add(maxLine);

            _overlayCanvas.Children.Add(minLine);

            _overlayCanvas.Children.Add(maxLabel);

            _overlayCanvas.Children.Add(minLabel);

            _overlayCanvas.Children.Add(circle);

            _overlayCanvas.Children.Add(circleLabel);

            MyMaxY = 920;

            MyMinY = 100;

            HighlightP = newPoint(3, 430);

        }

これでUI要素は Canvas に追加されました。次に、これらの要素を Canvas.SetTop()、Canvas.SetLeft() を使用して Canvas 上のあるべき位置に移動させます。以下の drawElements() メソッドでこれを行います。

        privatevoid drawElements()

        {

            var maxYVal = YAxis.ScaleValue(MyMaxY) + Viewport.Top;

            maxLine.X1 = Viewport.Left;

            maxLine.X2 = Viewport.Right;

            maxLine.Y1 = maxYVal;

            maxLine.Y2 = maxYVal;

            var minYVal = YAxis.ScaleValue(MyMinY) + Viewport.Top;

            minLine.X1 = Viewport.Left;

            minLine.X2 = Viewport.Right;

            minLine.Y1 = minYVal;

            minLine.Y2 = minYVal;

            maxLabel.Text = "Max:" + MyMaxY;

            Canvas.SetTop(maxLabel, maxYVal - maxLabel.ActualHeight / 2);

            Canvas.SetLeft(maxLabel, Viewport.Right);

            minLabel.Text = "Min:" + MyMinY;

            Canvas.SetTop(minLabel, minYVal - minLabel.ActualHeight / 2);

            Canvas.SetLeft(minLabel, Viewport.Right);

            var cicleX = XAxis.ScaleValue(HighlightP.X) + Viewport.Left + (XAxis.ScaleValue(1) - XAxis.ScaleValue(0)) / 2 - circle.ActualWidth / 2;

           var cicleY = YAxis.ScaleValue(HighlightP.Y) + Viewport.Top - circle.ActualHeight / 2;

            Canvas.SetTop(circle, cicleY);

            Canvas.SetLeft(circle, cicleX);

            Canvas.SetTop(circleLabel, cicleY - circleLabel.ActualHeight);

            Canvas.SetLeft(circleLabel, cicleX);

       }

軸の ScaleValue() メソッドや ViewPort 変数を利用して軸の値から Canvas における位置を求めています。ViewPort は ChartOverlay クラスから継承している変数ですが、これは Canvas 上での XamDataChart のプロット領域(軸ラベル等を除く、チャートのプロット可能な矩形領域です)の座標を表す Rectangle です。

これで要素を正しい位置に配置する準備が整いました。

さて、この drawElements() メソッドを実行するタイミングですが、チャートの再描画に合わせてオーバーレイも書き換えが必要です。XamDataChart のサイズが変わったり、ズームレベルが変更されたりして XamDataChart が再描画される都度、Canvas 上におけるUI要素の位置は再計算される必要があるためです。ChartOverlay クラスにはそのためのメソッド DoRefreshOverride() があります。このメソッドを、以下のようにオーバーライドします。

        protectedoverridevoid DoRefreshOverride()
        {

           base.DoRefreshOverride();

            if (Viewport.IsEmpty)
            {

                return;

            }

            SetClipRectangle();

            drawElements();
        }

最終行で先ほどの drawElements() メソッドを実行しています。その一行前の SetClipRectangle() ですが、これは Canvas を、表示したい部分を残して切り取る作業です。チャートのプロットエリアのみをオーバーレイの対象とするならばViewPort の大きさでクリップすればよいですが、今回は最大値と最小値のラベルをプロットエリアの右側に表示したいため、右側に少々マージンをとってクリップします。

        privatevoid SetClipRectangle()

        {

           _overlayCanvas.Clip = newRectangleGeometry()

            {

                 Rect = newRect(Viewport.X, Viewport.Y, Viewport.Width + 50, Viewport.Height)

            };

        }

MyCustomOverlay クラスの実装は以上です。

それでは、実際にMyCustomOverlay を配置してみましょう。

Xaml に、XamDataChart と MyCustomOverlay を定義します。

        <ig:XamDataChart x:Name="xamDataChart1" Margin="0,0,50,0" HorizontalZoomable="True" VerticalZoomable="True">

            <ig:XamDataChart.Axes>

                <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding}" Label="{}{Label}" Gap="1"/>

                <ig:NumericYAxis x:Name="yAxis" MinimumValue="0" MaximumValue="1000"/>

            </ig:XamDataChart.Axes>

            <ig:XamDataChart.Series>

                <ig:ColumnSeries XAxis="{Binding ElementName=xAxis}"

                               YAxis="{Binding ElementName=yAxis}"

                               ItemsSource="{Binding}"

                               ValueMemberPath="Value1">

                </ig:ColumnSeries>

            </ig:XamDataChart.Series>

        </ig:XamDataChart>

        <local:MyCustomOverlay x:Name="myCustomOverlay" Chart="{Binding ElementName=xamDataChart1}" MyMaxY="920" MyMinY="100">

            <local:MyCustomOverlay.HighlightP>

                <Point X="3" Y="430" />

            </local:MyCustomOverlay.HighlightP>

        </local:MyCustomOverlay>

MyCustomOverlay の Chart プロパティにターゲットとなる XamDataChart を指定します。

MyMinY、MyMaxY、HighlightP はコンストラクタでハードコードしましたが、プロパティとしてこのように指定することもできます。XamDataChartにバインドするデータはここでは省略していますので、詳しい内容は下のリンクよりサンプルをダウンロードして内容をご確認ください。

今回のサンプルの実装は以上です。

チャートに自由にアノテーション- Annotations -を追加し、ご要件に合わせたデータ表示を演出してください。

サンプルはこちらから。
(当サンプルは17.1.20171.1000バージョンを使用して作成されました)

XamDataChartでよくお問い合わせいただく、グラフの端にあるマーカーが切れないようにする方法を紹介します。

もし、軸と交わる部分のマーカーが切れてしまう、という問題にお悩みの場合は、これからご紹介する方法をお試しください。

方法

XamDataChartのPlotAreaMarginプロパティに表示に必要な十分な量を設定してください。

<ig:XamDataChart PlotAreaMargin="10">

実行結果

ご覧のように、すべてのマーカーがきちんと表示されるようになりました！ 

オンラインリソース

PlotAreaMargin プロパティ

サンプル

サンプルのダウンロード（Infragistics WPF 2017 vol.1 バージョン、C#）

XamDataChart_PlotAreaMargin.zip 

（このサンプルは17.1.20171.1000で作成されました。）

- 2017/08/16(水) 時点の情報に基づいています -

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

前回の記事(Ignite UI の始め方)では、Ignite UI そのもの構成方法や使い方などの基本をお伝えしました。今回から、Ignite UI を他のフレームワークと一緒に使う方法を紹介していきます。

今回は Angularと組み合わせる方法についてです。

0) 今回用意した環境

Windows 10

Node.js 8.4.0 - ダウンロードはこちらから

npm 5.3.0

1) Angular CLI でプロジェクトを生成

Angular CLIに関してこちらの記事で詳しく説明されていますのでご参考ください。Angular を使用したプロジェクトでは、Angular CLI を使うことが推奨されます。というよりは、使わない場合のデメリットが多すぎるので、特段の理由がない限りは Angular CLI を使ってプロジェクトを生成するようにしましょう。

1-1) Angular CLI のインストール

任意のフォルダ上でコマンドプロンプトを開き

https://github.com/angular/angular-cli#installation

のコマンドを入力して Angular CLI をグローバルインストールします。

npm install –g @angular/cli

インストール後、コマンドプロンプト上で「ng」コマンドが使用できるようになるので、

ng –v // @angular/cli: 1.3.0

と表示されればインストール成功です。

1-2) Angular プロジェクト生成

https://github.com/angular/angular-cli#generating-and-serving-an-angular-project-via-a-development-server

を参考に

ng new my-app // パッケージのダウンロードにしばらく時間がかかります
cd my-app
ng serve –o

と続けて入力します。

ブラウザが立ち上がって「Welcome to app!!」と表示されれば成功です。

2) Ignite UI の組み込み

2-1) 通常の Ignite UI ライブラリのインストール

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

で紹介しているように、Ignite UI で必要な JS, CSS を組み込みます。

my-app\src\index.html

をエディターで開き、以下のように編集します。

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>MyApp</title><base href="http://blogs.jp.infragistics.com/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><!-- Ignite UI Required Combined CSS Files --><link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"
  /><link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" /></head><body><app-root></app-root><!-- JavaScript Library Dependencies --><script src="http://code.jquery.com/jquery-3.1.1.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><!-- Ignite UI Required Combined JavaScript Files --><script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script><script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script><script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script></body></html>

2-2) Angular 用拡張モジュールのインストール

Ignite UI を組み込んだだけでは、Angular 上で動かすことができません。igniteui-angular2という拡張モジュールが必要になります。この拡張モジュールは npm 経由でインストールします。

npm install igniteui-angular2

インストールが終わったら

my-app\src\app\app.module.ts

をエディターで開き、以下のように編集します。

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

以上で Ignite UI を使う準備が整いました。

3) igGrid コンポーネントの実装

それでは実際に igGrid を画面に表示するための実装を行っていきます。

https://github.com/IgniteUI/igniteui-angular2#configuring-control-options

を参考にします。

3-1) app.component.html

Angular CLI で作成されたコンポーネントは、デフォルトでテンプレートが外部 HTML として用意されるので、このファイルを修正します。

一旦すべてのタグを削除後、

<ig-grid [widgetid]="id" [options]="gridOptions"></ig-grid>

と入力します。

widgetId は id 属性を付与する行為に相当します。

options には igGridの生成オプションを指定します。

3-2) app.component.ts

以下のように編集します。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  id: string;
  gridOptions: IgGrid;
  constructor() {
    this.id = 'grid1';
    this.gridOptions = {
      width: '600px',
      height: '300px',
      dataSource: [
        { id: 1, column1: 'string 1', column2: true, column3: new Date() },
        { id: 2, column1: 'string 2', column2: false, column3: new Date() },
        { id: 3, column1: 'string 3', column2: true, column3: new Date() }
      ],
      primaryKey: 'id',
      columns: [
        { key: 'id', headerText: 'ID', dataType: 'number' },
        { key: 'column1', headerText: 'Column 1', dataType: 'string' },
        { key: 'column2', headerText: 'Column 2', dataType: 'bool' },
        { key: 'column3', headerText: 'Column 3', dataType: 'date' },
      ],
      defaultColumnWidth: '150px'
    }
  }
}

this.id <-> [widgetId]="id"

this.gridOptions <-> [options]="gridOptions"

に対応しています。

this.gridOptions = {・・・} は通常の igGrid の生成オプションを記述するのと全く同じです。特別なことはありません。

3-3) 動作確認

ブラウザ上にグリッドが表示されていれば成功です。

本手順の冒頭で

ng serve –o

コマンドを実行したと思いますが、これはファイルに変更が入ると自動でビルドをしなおしブラウザをリロードしてくれます。もしリロードされていなければ手動でリロードを試してみてください。

4) AOT ビルドへの対応

Ignite UI は Angular の AOT ビルド にも対応しています。

AOT ビルドとは、ビルド時に Angular の Module、Component をコンパイルしておくことです。

これによって得られるメリットは

• ブラウザ実行時に行われていたコンパイル時間がなくなり、パフォーマンス向上につながる。
• ブラウザ実行時にコンパイルを行うためのコンパイラが不要となるため、JS ファイルのロード時間が短縮され、パフォーマンス向上につながる。

の２点です。プロダクション環境ではパフォーマンスは非常に重要なポイントですので、基本的に AOT ビルドを行うべきと考えます。

AOT ビルドを行うには 「--prod」オプションを付けて

ng build --prod // ng build --aot でもかまいません

コマンドを実行するだけです。コードの改変は一切必要ありません。

詳しくは以下をご参考ください。

https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

5) まとめ

• Angular を使うなら Angular CLI を使う（ほぼほぼ必須と言っても過言でない）
• 通常の Ignite UI ライブラリに加えて、igniteui-angular2の追加インストールが必要
• オプションの設定方法は通常の Ignite UI コントロールの設定方法とほとんど同じ

です。

少し前までは Angular を使うための環境構築をすること自体が難関でしたが、Angular CLI の登場によって Angular を使うハードルが劇的に下がりました。今回は Angular CLI で生成した Angular プロジェクトに Ignite UI を組み込む方法をご紹介しました。

今回のサンプルのダウンロード

ダウンロードした後、zip ファイルを解凍し、解凍フォルダでコマンドプロンプトを開き

npm install

ng serve -o

で実行することができます。 

igGrid の列固定機能を利用した際に、クリックした行の背景色を変更する方法のご紹介です。

igGrid では、列を固定した際に、列の固定部分と非固定部分はそれぞれ別の table タグが生成されます。出力された HTML を見てみると、このようなレイアウトになっています。 

igGrid の固定列利用時には、上記のように固定列部分と非固定列部分が別れていますので、それぞれの TR 要素に対してスタイリングを行います。

igGrid の rowAt メソッドでは、igGrid の対象行の非固定部分の TR のみが取得されます。列の固定部分を取得するには、rowAt メソッドと併せて fixedRowAt メソッドも呼び出します。rowAt メソッド、fixedRowAt メソッドで取得した両方の TR にスタイルを行います。

$("#grid").igGrid({
    ...
    cellClick: function (evt, ui) {
        changeRowStyle(ui.cellElement);
    },
    ...
});

function changeRowStyle(cellElem) {

    //行要素から行に紐づく情報を取得
    var cellInfo = $("#grid").igGrid("getElementInfo", cellElem);

    //スタイリング対象の TR 要素（固定列の TR 要素、非固定列の TR 要素）
    var targetElems = [];

    /* スタイリング対象の TR 要素を取得 */
    //行の非固定列部分
    var unfixedRow = $("#grid").igGrid("rowAt", cellInfo.recordIndex);
    targetElems.push(unfixedRow);
    
    //行の固定列部分
    var fixedRow = $("#grid").igGrid("fixedRowAt", cellInfo.recordIndex);
    targetElems.push(fixedRow);

    //対象の TR 要素をスタイリング
    targetElems.forEach(function (tr) {
        if (tr !== null) {
            if (tr.classList.contains("myColor")) {
                tr.classList.remove("myColor");
            }
            else {
                tr.classList.add("myColor");
            }
        }
    });
}

実行結果：

任意の行（セル）をクリックすると、クリック行全体が配色されます。

サンプルのダウンロード（Ignite UI 2017.1 バージョン）

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.インストーラーを使った方法

「ダウンロード」ボタンをクリックするとトライアル版をダウンロードすることができます。ここからダウンロードされるファイルは Ignite UI を含む弊社製品の全てをインストールできるインストーラーです。ダウンロード後、インストーラーを使って Ignite UI のソースコードをインストールします。

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 への参照を取得し、コントロールを生成します。

view plainprint?

1. <table id="grid"></table>  
2.   
3. $('#grid').igGrid({  
4.     // オプション設定  
5. });  

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

など各コントロールの API リファレンスの「オプション」タブに載っているオプションを生成時に設定することができます。オプションの具体的な設定方法についてはオンラインサンプル内のコードビューで確認するか、

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

APIリファレンスの「概要」タブのコードサンプルでも確認することができます。

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

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

view plainprint?

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

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

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

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

view plainprint?

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

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

view plainprint?

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

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

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

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

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

コントロールのオプションは、コントロールの生成後でも動的に取得/設定することができます。ただし、コードサンプル内で「// Set」の例示がないものは動的に設定することができない点に注意してください。

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

view plainprint?

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

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

view plainprint?

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

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

view plainprint?

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

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

view plainprint?

1. // igGrid の生成  
2. $('#grid').igGrid({  
3.     // オプション設定  
4. });  
5. // Get width  
6. var width = $('#grid').igGrid('option', 'width');  
7. // Set width  
8. $('#grid').igGrid('option', 'width', width + 100);  
9. // commit  
10. $('#grid').igGrid('commit');  

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

view plainprint?

1. // jQuery オブジェクトをキャッシュ  
2. var $grid = $('#grid');  
3. // igGrid の生成  
4. $grid.igGrid({  
5.     // オプション設定  
6. });  
7. // Get width  
8. var width = $grid.igGrid('option', 'width');  
9. // Set width  
10. $grid.igGrid('option', 'width', width + 100);  
11. // commit  
12. $grid.igGrid('commit');  

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

view plainprint?

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

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

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

• Angular
• React

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

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

• ASP.NET MVC
• ASP.NET Core

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

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