2014 年 02 月 28 日に開催されたEnterprise × HTML5 Web Application Conference 2014 において弊社デベロッパー エバンジェリストの池原が講演させていただいた際の資料です。

1. Web アプリケーションに
おけるクライアントサイド
のデータハンドリングと
可視化の実現
池原 大然
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
dikehara@Infragistics.com

2. 自己紹介
池原 大然（いけはら だいぜん）
インフラジスティックス・ジャパン株式会社
デベロッパー エバンジェリスト
Microsoft MVP for Development Platforms
Client App Dev 2010/04 – 2014/03
Blog

3. インフラジスティックス
24
Years of Experience
#1
Component Vendor
According to IDC Report
Global
300+
EMPLOYEES
In Japan
5,000+
COMPANIES
∞
Email, Phone
SUPPORT
Readers Choice winners
Jolt & Visual Studio Magazine

4. 開発ツール製品

5. アジェンダ
Web アプリケーションとデータ
Ignite UI が提供するもの
データーソース コンポーネントの活用と視覚化
まとめ

6. Web アプリケーション
と
データ

7. データのやり取り
リクエスト
サーバーサイド
クライアント
レスポンス
“データ” が返ってくる

8. クライアント側での処理
リクエスト
Web ブラウザー(HTML/JavaScript)
HTML オブジェクト
クライアント
ハンドリングが必要
テーブル、ボタン
などの UI
HTML
XML
JSON
配列
レスポンス

9. JSON/XML 形式のデータの HTML テーブルへの落とし込み

10. JSON データのハンドリング例（表示）
$.ajax({
type: "GET",
url: "http://localhost/WebAPIs/api/customers",
dataType: "json",
success: function (data, textStatus, jqXHR) {
var rows = "";
// 直接データを割り当てられる
for (i = 0; i < data.length; i++) {
rows +=
"<tr>" +
"<td>" + data[i].CustomerID + "</td>" +
"<td>" + data[i].CompanyName + "</td>" +
"<td>" + data[i].ContactName + "</td>" +
"<td>" + data[i].Country + "</td>" +
"<td>" + data[i].City + "</td>" +
"<td>" + data[i].Address + "</td>" +
"</tr>";
}
$("#jsonTable").empty();
$("#jsonTable").append(rows);
}, // 以下省略
});

11. XML データのハンドリング例（表示）
$.ajax({
type: "GET",
url: "http://localhost/WebAPIs/api/customers",
dataType: "xml",
success: function (data, textStatus, jqXHR) {
var rows = "";
$(data).find('Customer').each(
function () {
// データの取り出しを行うため、ひと手間
var CustomerID = $(this).find("CustomerID").text();
var CompanyName = $(this).find("CompanyName").text();
var ContactName = $(this).find("ContactName").text();
var Country = $(this).find("Country").text();
var City = $(this).find("City").text();
var Address = $(this).find("Address").text();
rows +=
"<tr>" +
"<td>" + CustomerID + "</td>" +
"<td>" + CompanyName + "</td>" +
"<td>" + ContactName + "</td>" +
"<td>" + Country + "</td>" +
"<td>" + City + "</td>" +
"<td>" + Address + "</td>" +
"</tr>";
});
$("#xmlTable").empty();
$("#xmlTable").append(rows);
}, // 以下省略
});

12. 課題点
• 要件によっては、複数のデータ形式を
混合して利用することもある。
• サーバーから受け取ったデータを表示するだけはない。
– ユーザーのアクションによるデータ操作
（いわゆる機能要件）
• フィルタリング
• ソート
• ページング
• 編集 … などなど
• 結果これらの機能を持つ仕組みが UI を含めて必要となる

13. Ignite UI が
提供するもの

14. What is Ignite UI ?

15. Ignite UI コンポーネント
jQuery
UI
ベース
コントロール
jQuery
Mobile
ベース
コントロール
jQuery UI
jQuery
jQuery
ベース
データ
コンポーネント
jQuery
Mobile

16. http://jp.igniteui.com

17. 収録コンポーネント:一覧
•
データ グリッド
– Grid
– Hierarchical Grid
•
OLAP ピボット
– Pivot Data Selector
– Pivot View
– Pivot Grid
•
データ ビジュアリゼーション
– Data Chart
– Bullet Graph
– Pie Chart
– Linear Gauge
– Doughnut Chart
– Map
– Funnel Chart
– Barcode
– Radial Gauge
– Zoombar
– Sparkline
•
レイアウト
– Layout Manager
– Tile Manager
– Splitter
•
エディター
– Combo Box
– Editors
– Date Picker
– HTML Editor
•
フレームワーク
– Infragistics Loader
– Data Source
– Templating Engine
– Infragistics Excel*
– Infragistics Word*
– Infragistics Document*
*ASP.NET 用サーバー側コンポーネント
•
操作
–
–
–
–
–
–
Tree
Popover
Dialog Window
Rating
File Upload
Video Player
•
モバイル
– List View
– Rating
– Button
– Check Box
– Check Box Group
– Collapsible
– Collapsible Set
– RadioButton Group
– SelectMenu
– Slider
– Toggle Switch
– TextBox
– Page
– PageContent
– PageFooter
– PageHeader
– Popup
– Link
– NavBar

18. 収録コンポーネント:分類
•
データ グリッド
– Grid
– Hierarchical Grid
•
OLAP ピボット
– Pivot Data Selector
– Pivot View
– Pivot Grid
•
データ ビジュアリゼーション
– Data Chart
– Bullet Graph
– Pie Chart
– Linear Gauge
– Doughnut Chart
– Map
– Funnel Chart
– Barcode
– Radial Gauge
– Zoombar
– Sparkline
•
レイアウト
– Layout Manager
– Tile Manager
– Splitter
•
エディター
– Combo Box
– Editors
– Date Picker
– HTML Editor
•
フレームワーク
– Infragistics Loader
– Data Source
– Templating Engine
– Infragistics Excel*
– Infragistics Word*
– Infragistics Document*
*ASP.NET 用サーバー側コンポーネント
•
操作
–
–
–
–
–
–
Tree
Popover
Dialog Window
Rating
File Upload
Video Player
•
モバイル
– List View
– Rating
– Button
– Check Box
– Check Box Group
– Collapsible
– Collapsible Set
– RadioButton Group
– SelectMenu
– Slider
– Toggle Switch
– TextBox
– Page
– PageContent
– PageFooter
– PageHeader
– Popup
– Link
– NavBar
•
•
•
jQuery ベース
jQuery UI ベース
jQuery Mobile ベース
併せて ASP.NET MVC 用ラッパークラスも提供

19. データ コンポーネント
の活用とデータ視覚化

20. Ignite UI コンポーネント
jQuery
UI
ベース
コントロール
jQuery
Mobile
ベース
コントロール
jQuery UI
jQuery
jQuery
ベース
データ
コンポーネント
jQuery
Mobile

21. jQuery
ベース
データ
コンポーネント
クライアント側データ
ソースオブジェクト
コントロールとデータ
ソースを仲介する
レイヤーオブジェクト
Web サービス (REST, Get, WCF)
ローカルデータ (JSON, XML, Table, 配列）
関数が戻すデータ
Olap データ

22. データ レイヤーを加えることで
• UI コントロール側からはデータの
“種類” を気にしなくて良い
–データの操作は共通の api を利用できる
• 複数の種類のデータを混合できる

23. データの “見せ場” としての UI

24. igDataSource / igTemplating を利用したクライアント側でのデータハンドリング

25. igDataSource データハンドリング例(1)
// データソースオブジェクト
var ds;
// テンプレート
var template = "<tr>" +
"<td>${CustomerID}</td><td>${CompanyName}</td>" +
"<td>${ContactName}</td><td>${Country}</td>" +
"<td>${City}</td><td>${Address}</td>" +
"</tr>";
$("#igGetJSON").click(function () {
ds = new $.ig.DataSource({
type: "json",
dataSource: "http://localhost/WebAPIs/api/customers",
callback: function (success, error) {
if (success) {
// テンプレートに結果セットを流し込む。
var rows = $.ig.tmpl(template, ds.dataView());
$("#igTable").empty();
$("#igTable").html(rows);
}
else { alert(error); } }});
// データの読み込み開始
ds.dataBind();
});

26. igDataSource データハンドリング例(2)
// ソート
$("#igAscSort").click(function () {
ds.sort([{ fieldName: "Country" }], "asc", false);
var rows = $.ig.tmpl(template, ds.dataView());
$("#igTable tbody").empty();
$("#igTable").html(rows);
});
// ページング
$("#igPagingEnable").click(function () {
var myPagingSettings = {
enabled: true,
pageSize: 10,
pageIndex: 0,
type: "local"
};
// Set
ds.pagingSettings(myPagingSettings);
ds.pageIndex(pageIndex);
データレイヤーにおいて
データ操作を行う
$("#igTable tbody").empty();
var rows = $.ig.tmpl(template, ds.dataView());
$("#igTable").html(rows);
});

27. igDataSource が持つ機能
• ローカル データ、
リモート データのバインド
• データスキーマ サポート
– 配列, JSON, XML
• ソート
• ページング
• フィルタリング
•
•
•
•
•
•
データの追加（クライアント側）
データの削除（クライアント側）
データの更新（クライアント側）
更新されたデータの把握（クライアント側）
更新系のロールバック（クライアント側）
リモート サービスの呼び出し
– （サーバ側での）ロード、更新、ソート
データの「操作」に特化

28. ig.DataSource とその派生オブジェクト
• ig.ArrayDataSource
• ig.FunctionDataSource
• ig.HtmlTableDataSource
• ig.JSONDataSource
ig.DataSource
• ig.JSONPDataSource
• ig.KnockoutDataSource
• ig.MashupDataSource
• ig.RemoteDataSource
• ig.RESTDataSource
• ig.XmlDataSource

29. UI コントロールが受け持つ部分
- エンドユーザーに対する 機能 UI の提供と
データソース コンポーネントの機能呼び出し
- 上記行為の結果セットの表示
（グリッド形式、ツリー形式、チャート形式など）

30. jQuery UI
ベース
コントロール
PC, タブレット向け
•
•
•
•
•
•
•
•
•
データ グリッド
ピボット
チャート
ツリー
ダイアログ
カレンダー
マップ
ゲージ
エディター

31. 機能 UI と様々なデータ視覚化パターン

32. 開発においてなぜ、UI フレームワーク
を利用するのか?
できるだけ部品をそのまま利用することによって、
可能な限り「作らない」ことを検討する
そのために多くの UI パターンを
カードとして持っておく
既に顧客の頭の中にあるUIのイメージは
“標準” で提供されるものの範囲を大幅に超えている

33. 手組み？
•
•
•
•
グリッド
データ チャート
コンボ ボックス
タイル マネージャー

34. まとめ

35. まとめ
• Web アプリケーションだからこそ、クライアント側で
データを操作する仕組みが必要
– JSON, XML, Array 形式のデータの
ハンドリングが必須
• データソースレイヤーを設定することで
機能と UI を分離したアーキテクチャを実現できる
• “手札”としてのコンポーネント、フレームワーク

36. http://jp.igniteui.com
豊富な機能をお試しください!

37. Appendix
Ignite UI 概要

41. サンプルコードの抽出と試行

42. スキルセットに合わせた UI 記述方式
スタンダード
JavaScript
// ダイアログの生成
$("#dialog").igDialog({
state: "opened",
height: 460,
width: 440
});
ASP.NET MVC
Razor 構文
@*ダイアログの生成*@
@(Html.Infragistics()
.Dialog("dialog")
.State(DialogState.Opened)
.Height("460")
.Width("440")
.Render()
)
jQuery 構文が生成、
実行される

43. 簡素化されたリソースの読み込み
• Infragistics Loader
– CSS, js ファイルなど必要リソースを自動的に読み込む仕組みを提供

44. リソースの定義
<script type="text/javascript">
// igLoader の読み込み
$.ig.loader({
scriptPath: 'Scripts/IG',
cssPath: 'Content/IG',
resources: 'igGrid',
ready: function () {
// 読み込みが完了した段階で初期化を開始する
}
});
</script>
•
リソース指定
コンポーネント
呼び出しなどの処理
パスを切り替えることで複数のバージョンのコンポーネントを
呼び出すことも可能となる

45. プロパティの定義
• http://labs.infragistics.com/jquery/configure/
– プロパティウィンドウでコントロールを設定
– 生成されたコードをコピー & ペースト

46. “カスタム コントロール ≠ 遅い” を払拭
• UI 仮想化エンジンを利用したパフォーマンス チューニング
http://bit.ly/igGridPerformance

47. HTML5 など最新技術の採用
領域に合わせた
表示データ数の制御

48. テーマの提供

49. スタイリング サポート
jQuery UI, Mobile のテーマ ローラーを
サポート
組織内におけるスタイリングの統一に対応

50. 技術サポートについて
通常サポート
プライオリティ
サポート
（¥52,500）
トライアル