インフラジスティックス・ジャパンでは 2017 年 3 月 30 日付で下記製品に対しましてのサービスリリースを提供開始致しました。 WPF Infragistics WPF 2016 Volume 2 (Build 2109) Infragistics WPF 2016 Volume 1 (Build 2231) Infragistics WPF 修正一覧16.2 Infragistics WPF 修正一覧16.1 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法 Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。 削除後、一旦、VisualStudioを終了し、Windowsのスタートメニューから、...(read more)![]()
↧
サービスリリースのお知らせ 2017年3月 : Infragistics WPF
↧
サービスリリースのお知らせ 2017年3月 : Infragistics Silverlight
インフラジスティックス・ジャパンでは 2017 年 3 月 30 日付で下記製品に対しましてのサービスリリースを提供開始致しました。 Silverlight Infragistics Silverlight 2016 Volume 1 (Build 2183 ) Infragistcs Silverlight 修正一覧16.1 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法 Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。 削除後、一旦、VisualStudioを終了し、Windowsのスタートメニューから、 ツールボックスタブの作成 を実行してください。 以前のビルドで作成されたプロジェクトが存在する場合は、必ずバックアップを取り、参照アセンブリを新しいビルド番号を持つアセンブリに変更して下さい。...(read more)![]()
↧
↧
サービスリリースのお知らせ 2017年3月 - Infragistics ASP.NET
インフラジスティックス・ジャパンでは 2017 年 3 月 30 日付で下記製品のサービスリリースを提供開始致しました。 ASP.NET Infragistics ASP.NET 2016 Volume 2 Service Release (Build 2043) Infragistics ASP.NET 2016 Volume 1 Service Release (Build 2236) Infragistics ASP.NET 修正一覧16.2 Infragistics ASP.NET 修正一覧16.1 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロード ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法 Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。...(read more)![]()
↧
サービスリリースのお知らせ 2017年3月 - Infragistics Ignite UI
インフラジスティックス・ジャパンでは 2017 年 4 月 3 日付で下記製品のサービスリリースを提供開始致しました。 Ignite UI Ignite UI 2016 Volume 2 Service Release (Build 2114) Ignite UI 2016 Volume 1 Service Release (Build 2270) Infragistics Ignite UI 修正一覧16.2 Infragistics Ignite UI 修正一覧16.1 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロード ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法 Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。...(read more)![]()
↧
[Xamarin] Infragistics Ultimate UI for Xamarin 日本語版リリース!
Microsoft Visual Studio で提供されている Xamarin は C# を用いて iOS、Android で動作する クロスプラットフォーム モバイル アプリケーションの開発を行うことができます。今回、Xamarin に対応する開発 UI コントロール セット Infragistics Ultimate UI for Xamarin をリリースしました！ モバイル向けにデザインされたデータ グリッド、チャートといったコントロールに加えて、開発生産性を向上する Productivity Pack を提供します。 このリリースのコンセプトは 「Fast」 - アプリケーションを 短期間で 構築でき、かつ、そのアプリケーションが 高速 であることを実現するためのコントロール、ツール、サポートを提供します。 Write Fast 初めて Xamarin.Forms を利用してアプリケーションを開発する際には Xamarin.Forms そのものの仕組みを理解することや、モバイル アプリケーションにおける画面遷移をどのように行えば良いかというビジネス上の課題を解決する前段階の技術の習得が必要になります。...(read more)![]()
↧
↧
Indigo Studio から簡単なユーザビリティテストを実施する!
この記事ではプロトタイピングツール Indigo Studio から生成したプロトタイプを利用し
簡単なユーザビリティテストを行う方法をご紹介致します。
----------------------------------------------------------
1.事前にご用意ください。
----------------------------------------------------------
■Indigo Studio
Indigo Studio の無料トライアル版のダウンロードは下記のリンクから!
https://jp.infragistics.com/products/indigo-studio/download-trial
■Infragistics ユーザーアカウント
ユーザビリティテストの作成などを行う indigodesigned.com 接続に必要です。
----------------------------------------------------------
2.デザイン
----------------------------------------------------------
まずは、ユーザビリティテストを実施するためのプロトタイプを Indigo Studio を使って作ります。
今回は Infragistics の製品を販売するオンラインショップのプロトタイプを作ってみましょう。
大きな流れとしては2種類の製品の中から一つの製品を選び、
ショッピングカートに入れて数量と支払い方法を選び、購入を確定するプロトタイプになります。
----------------------------------------------------------
3.実装(ユーザビリティテスト)
----------------------------------------------------------
１．まず作成したプロトタイプを共有し、Indigo Studio コミュニティサイトから共有されているプロトタイプを表示します。
https://indigodesigned.com/home
２．プロトタイプ上部メニューから「ユーザビリティ テストを作成」をクリックします。
３． ユーザビリティテストの作成が始まります。次はユーザーが行うべきタスクを登録します。
「新しいタスクの追加」をクリックします。
４．タスクの内容を入力し「タスクフローの編集」 をクリックします。
５．タスク登録画面で「開始ポイントとしてマーク」 をクリックします。
（タスクを実施するスクリーンもしくはステートが画面に表示されていることを確認してください。
もし現在表示されているスクリーン、もしくはステート以外の画面からタスクを実施する場合は
「他を選択」をクリックし該当するスクリーン、ステートを選んでください。）
６．３～５ を繰り返して希望するタスクをすべて登録します。
７．最後に「このテストを開始」 をクリックするとテスト実施の準備が終わります。
テストが始まると「招待」 ボタンをクリックしテストのリンクを取得できます。
テストのリンクを複数のユーザーと共有することでテストを実施することが出来ます。
テスト結果はリアルタイムで更新されます。
「クリックマップを表示」をクリックするとテストに参加した参加者達が
タスクに対してどの様な動作をしたかがわかります。
参加者達の動作傾向から間違いやすいタスクなどが把握出来ます。
（タスクで指定された動作は青いアイコン、失敗した動作は赤いアイコン）
----------------------------------------------------------
4.オンラインリソース
----------------------------------------------------------
プロトタイピングツール Indigo Studio：
http://jp.infragistics.com/products/indigo-studio
プロトタイプの共有：
http://jp.infragistics.com/help/wpf/xamgeographicmap-adding-xamgeographicmap-to-a-page
ユーザビリティテストに使われたプロトタイプ：
https://indigodesigned.com/share/hg0uvhm1xmhd
ユーザビリティテスト：
https://indigodesigned.com/study/run/p7r43trj7w06/
↧
サービスリリースのお知らせ 2017年5月 - Infragistics ASP.NET
インフラジスティックス・ジャパンでは 2017 年 5 月 19 日付で下記製品のサービスリリースを提供開始致しました。 ASP.NET Infragistics ASP.NET 2016 Volume 2 Service Release (Build 2056) Infragistics ASP.NET 修正一覧16.2 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロード ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法 Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。 削除後、一旦、VisualStudioを終了し、Windowsのスタートメニューから、 ツールボックスタブの作成 を実行してください。 以前のビルドで作成されたプロジェクトが存在する場合は、必ずバックアップを取り、参照アセンブリを新しいビルド番号を持つアセンブリに変更して下さい。...(read more)![]()
↧
サービスリリースのお知らせ 2017年 5月 - Infragistics Windows Forms
インフラジスティックス・ジャパンでは 2017 年 5 月 19 日付で下記製品のサービスリリースを提供開始致しました。 Windows Form Infragistics Windows Forms 2016 Volume 2 Service Release (Build 2111) Infragistcs Windows Forms 修正一覧16.2 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法: Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。 削除後、一旦、VisualStudioを終了し、Windowsのスタートメニューから、 ツールボックスタブの作成 を実行してください。...(read more)![]()
↧
サービスリリースのお知らせ 2017年5月 : Infragistics WPF
インフラジスティックス・ジャパンでは 2017 年 5 月 22 日付で下記製品に対しましてのサービスリリースを提供開始致しました。 WPF Infragistics WPF 2016 Volume 2 (Build 2141) Infragistics WPF 修正一覧16.2 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法 Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。 削除後、一旦、VisualStudioを終了し、Windowsのスタートメニューから、 ツールボックスタブの作成 を実行してください。 以前のビルドで作成されたプロジェクトが存在する場合は、必ずバックアップを取り、参照アセンブリを新しいビルド番号を持つアセンブリに変更して下さい。...(read more)![]()
↧
↧
サービスリリースのお知らせ 2016年5月 - Infragistics Ignite UI
インフラジスティックス・ジャパンでは 2016 年 5 月 23 日付で下記製品のサービスリリースを提供開始致しました。 Ignite UI Ignite UI 2016 Volume 2 Service Release (Build 2141) Infragistics Ignite UI 修正一覧16.2 ダウンロード: ホットフィックスダウンロードは弊社サイト登録者情報-キーとダウンロードより可能です。 ダウンロード ダウンロードの際はバージョン番号をお確かめ下さい。 アップデート方法 Visual Studioを起動している場合は終了させて下さい。 今回リリースされたインストーラーを起動させ、インストールを開始して下さい。 インストール終了後、Visual Studioを起動させ、ツールボックスに以前のビルドバージョンでのコン ポーネントが表示されている場合は該当する全てのツールコンポーネントを削除してください。 削除後、一旦、VisualStudioを終了し、Windowsのスタートメニューから、 ツールボックスタブの作成 を実行してください。 以前のビルドで作成されたプロジェクトが存在する場合は、必ずバックアップを取り、参照アセンブリを新しいビルド番号を持つアセンブリに変更して下さい。...(read more)![]()
↧
igGrid 入力検証を利用してみよう
igGrid の入力検証を利用してみましょう。
入力検証は、igGrid の編集機能（igGridUpdating）のオプションとして設定していきます。ここでは、igGridUpdating > columnSettings にある required オプションと validation オプションを設定していきます。
required オプション
入力が必須となる列であれば、required オプションを設定します。
$("#grid").igGrid({
...
features: [
{
name: "Updating",
columnSettings: [
...
{
columnKey : "Col1",
required: true,
...
},
...
]
}
]
});
Col1 列を編集し、セルの値が空の状態で編集を終了しようとすると、エラーメッセージが表示されます。
validation オプション
igGrid の入力検証は、igValidator を組み合わせることでより柔軟な検証条件を指定することもできます。例えば、ある列には任意の値入力を抑止したい際には、igValidator の custom オプションを組み合わせて利用することができます。ここでは、Col2 列のセルに "b1"という入力があった場合にはエラーとするようにロジックを実装しています。
{
columnKey : "Col2",
editorOptions:{
validatorOptions:{
custom: function(value, fieldOptions){
if(value == "b1"){
//入力検証に失敗するときは false を返す
return false;
}
//入力検証に成功するときは true を返す
return true;
}
}
}
}
igValidator では、エラーメッセージをデフォルトの文字列から置き換えることもできます。”Col1” と “Col2” それぞれの、デフォルトのエラーメッセージを変更してみましょう。
エラーメッセージは editorOptions > validatorOptions > errorMessage オプションで任意の文字列を指定します。
{
columnKey : "Col1",
required: true,
editorOptions:{
validatorOptions:{
errorMessage : "必ず入力して下さい"
}
}
},
{
columnKey : "Col2",
editorOptions:{
validatorOptions:{
custom: function(value, fieldOptions){
if(value == "b1"){
//入力検証に失敗するときは false を返す
return false;
}
//入力検証に成功するときは true を返す
return true;
},
errorMessage: "b1 は無効です。"
}
}
}
Col1 のエラーメッセージ
Col2 のエラーメッセージ
サンプル
サンプルのダウンロード（Ignite UI 2016.2 バージョン）
(本サンプルは 16.2.20162.2114 バージョンで作成されました)
↧
[セミナー情報] 2017 年 6 月セミナー情報
2017 年 6 月に開催を予定いたしておりますセミナーをご案内させていただきます。 多様化するUIを背景に、アプリケーション開発における手戻りの防止やチーム内での意識合わせを目的に、プロトタイピングのニーズが高まりつつあります。 本セミナーでは、プロトタイプの作成からその評価やユーザビリティの確認までの一連のプロセスを素早く回す方法を、プロトタイピングツール 「Indigo Studio」 のハンズオンを通じて無料で習得できます。 開催概要 名称: Indigo Studio 無料ハンズオン セミナー 日時: 2017 年 06 月 22 日 (木) 14:00 - 17:00 会場: インフラジスティックス・ジャパン株式会社 セミナールーム 費用: 無料 定員: 20 名 Infragistics Ultimate 2017 Vol.1 最新情報セミナー モバイル、Web、デスクトップ全てに対応する統合開発コンポーネントスイート Infragistics Ultimate の最新バージョンである、2017 Vol.1 の新機能も含め、 インフラジスティックスが提供する開発ツールの特長をご紹介するセミナーを開催いたします。...(read more)![]()
↧
UltraGrid ソートの状態をクリアする
UltraGrid では列ヘッダをクリックすることで列のソートを行うことができます。
但し、状況によってはソートをクリアして UltraGrid のデータを、グリッド初回表示時と同じ並びに戻したいことがあります。このような時には、下記コードを呼び出すことで対応することができます。
１．SortedColumns.Clear メソッド
２．Rows.Refresh メソッド
private void button1_Click(object sender, EventArgs e)
{
this.ultraGrid1.DisplayLayout.Bands[0].SortedColumns.Clear();
this.ultraGrid1.Rows.Refresh(Infragistics.Win.UltraWinGrid.RefreshRow.ReloadData);
}サンプルのダウンロード（Windows Forms 2016.2 バージョン）
↧
↧
XamDockManager のフローティングペインにアクセスする
XamDockManager の利用でよくお問い合わせいただく、フローティングペインにアクセスする方法をご紹介します。
XamDockManager のペインをフローティングするタイミングで発生する、ToolWindowLoaded イベントをハンドルし、イベント引数 e.Window.Pane からペインを参照することができます。
例えば、SplitPane をフローティングした際に任意のスタイルを適用する場合、下記のように実装することができます。
<!--SplitPane をフローティングした時に適用するスタイル-->
<Style x:Key="floatingSplitPaneStyle1" TargetType="igDock:SplitPane">
<Setter Property="IsEnabled" Value="False"/>
</Style>private void XamDockManager1_ToolWindowLoaded(object sender, Infragistics.Windows.DockManager.Events.PaneToolWindowEventArgs e)
{
if(e.Window.Pane is SplitPane)
{
e.Window.Pane.Style = this.Resources["floatingSplitPaneStyle1"] as Style;
}
}実行結果
“Pane 1” の SplitPane をフローティングします。
すると、フローティングペインに floatingSplitPaneStyle1 が適用されて、ボタンが非活性状態になりました。
オンラインリソース
xamDockManager について > フローティング ペインの制限https://jp.infragistics.com/help/wpf/xamdockmanager-understanding-xamdockmanager#___2
サンプル
サンプルのダウンロード（WPF 2016.2 バージョン）↧
Write Fast, Run Fast: Infragistics Ultimate 2017 Vol.1 の新機能
モバイル、Web、デスクトップ全てに対応する UI コントロール開発スイート、Infragistics Ultimate の最新バージョンである、 Infragistics Ultimate 2017 Vol.1 がリリースされました! 新機能の概要を各プラットフォームごとにご紹介します。 Ignite UI for JavaScript インフラジスティックスの開発ツールは、“Write Fast, Run Fast”—アプリケーションを迅速に開発し、また、高いパフォーマンスを実現する、というコンセプトで開発されています。今回のリリースでもこのコンセプトを踏襲しつつ、お客様からのニーズに応える新コントロールや新機能を追加しました。 スケジュール 2017 Vol.1 では、多くのお客様からご要望いただいていた スケジュール コントロール が追加されました。 このコントロールを利用することで、カレンダーと予定の有無の表示、また予定のアジェンダを表示することができます。更に、単純な予定だけではなく、繰り返しの予定、会議室などのリソースを管理することも可能です。 このスケジュールコントロールはモバイルでの利用も念頭に開発されています。...(read more)![]()
↧
[セミナー情報] 2017 年 7 月セミナー情報
2017 年 7 月開催予定のセミナーは下記の通りとなります。 Infragistics Ultimate 2017 Vol.1 最新情報オンラインセミナー モバイル、Web、デスクトップ全てに対応する統合開発コンポーネントスイート Infragistics Ultimate の最新バージョンである、2017 Vol.1 をリリースいたしました！ この 2017 Vol.1 の新機能についてご紹介します。 *このオンラインセミナーは 2017 年 6 月 29 日に開催された Infragistics Ultimate 2017 Vol.1 最新情報セミナー のオンライン開催となります。 開催概要 名称: Infragistics Ultimate 2017 Vol.1 最新情報セミナー 日時: 2017 年 07 月 13 日 (木) 16:00 - 17:00 会場: オンライン開催 費用: 無料 定員: 無制限 Xamarin.Forms 対応開発ツールを用いた効率的な iOS/Android アプリケーション開発入門ハンズオン セミナー iOS/Android 向けのモバイルアプリケーションを共通のコードで構築できる...(read more)![]()
↧
Ignite UI for JavaScript 2017 Vol.1 新機能
先日リリースを発表しました Infragistics Ultimate 2017 Vol.1 には JavaScript/HTML5、Angular、React、ASP.NET MVC に対応するライブラリー、Ignite UI が含まれています。この新機能についてより詳しく解説します。 新機能のハイライト グリッドの新機能 – テキスト フィルタリング、GroupBy 集計、グリッドのキャプション機能が高機能、高速グリッドである igGrid に追加 新コントロール: スプレッドシートコントロール – Microsoft Excel ライクなスプレッドシート UI を実現 新コントロール: スケジュール コントロール – レスポンシブレイアウトに対応するJavaScript/HTML5 版スケジュール コントロール それでは早速見ていきましょう。 グリッドの新機能 テキスト検索とフィルタリング Ignite UI で提供している高速 JavaScript グリッド、igGrid に新たに複数列を跨いでのテキスト検索およびフィルタリング機能が追加されました。これまで行のフィルタリングを行う際には各列ごとにフィルター条件を設定する必要がありましたが、この機能を活用することでグリッドにバインドされているデータの全ての列をテキスト検索し、絞り込むことができるようになります。...(read more)![]()
↧
↧
[Xamarin] Productivity Pack を継続的にアップデート
Infragistics Ultimate UI for Xamarin にはコントロールの他に開発生産性を向上させる Productivity Pack が提供されています。 AppMap Nuget ツールボックス コントロール コンフィギュレーター それぞれ Xamarin.Forms を使用した開発の生産性を大幅に向上できるツールですが、インストールしたバージョンによっては期限が設定されており、下記のように使用できない旨の警告メッセージが表示される場合があります。 そんな時は更新を試してみてください。Productivity Pack は現在 Visual Studio Marketplace で公開されており、バージョンの更新を適宜行っています。 [ツール] メニューから [拡張機能と更新プログラム] をクリックするとインストールされている拡張機能を確認できます。 インストールされている拡張機能に更新が存在する場合は、[更新プログラム] – [Visual Studio Marketplace] に表示されます。 現時点 (2017/07/14) のバージョンはそれぞれ AppMap...(read more)![]()
↧
[セミナー情報] 2017 年 8 月セミナー情報
2017 年 8 月開催予定のセミナーは下記の通りとなります。 Indigo Studio 無料ハンズオン セミナー - 8 月開催 多様化するUIを背景に、アプリケーション開発における手戻りの防止やチーム内での意識合わせを目的に、プロトタイピングのニーズが高まりつつあります。 本セミナーでは、プロトタイプの作成からその評価やユーザビリティの確認までの一連のプロセスを素早く回す方法を、プロトタイピングツール 「Indigo Studio」 のハンズオンを通じて無料で習得できます。 開催概要 名称: Indigo Studio 無料ハンズオン セミナー 日時: 2017 年 08 月 02 日 (水) 14:00 - 17:00 会場: インフラジスティックス・ジャパン株式会社 セミナールーム 費用: 無料 定員: 20 名 Angular で始めるモダン Web アプリケーション開発セミナー アプリケーション フレームワークである、Angular を活用することでチーム開発への対応や、保守性、拡張性に優れたモダン Web アプリケーションを構築することが可能となります。 このセミナーではこれから...(read more)![]()
↧
Ignite UI の始め方
- 2017/07/21(金) 時点の情報に基づいています -
こんにちは、インフラジスティックス・ジャパン デベロッパーサポート の桐生です。
Ignite UI の始め方と題して
- Ignite UI のオンラインサンプル
- Ignite UI のダウンロード
- Ignite UI の最小構成
- Ignite UI の実装基礎
- Ignite UI の他フレームワークへの組み込み（次回以降）
について整理していきたいと思います。既出の情報もあるかと思いますがご容赦ください。
Ignite UI のオンラインサンプル
のページにてサンプルを公開していますので、気になったコントロールをオンライン上で試すことができます。
- グリッド（編集、ページング、フィルタリング、ソート、列固定、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
に組み込んで開発することもできます。
次回以降、これらの技術と組み合わせて使用する方法について紹介していきたいと思います。
↧
