第4章 データハンドリングと可視化 - jma.go.jp · イ 表参照型通報式 次の第I.2巻は表参照型通報式(TDCF: Table-Driven Code Form) に分類されるGRIB,
Web...
51
Web アプリケーションに おけるクライアントサイド のデータハンドリングと 可視化の実現 池原 大然 デベロッパー エバンジェリスト インフラジスティックス・ジャパン株式会社 [email protected]
-
date post
20-Aug-2015 -
Category
Technology
-
view
2.232 -
download
3
Transcript of Web...
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
池原 大然デベロッパー エバンジェリストインフラジスティックス・ジャパン株式会社[email protected]
自己紹介
池原 大然（いけはら だいぜん）インフラジスティックス・ジャパン株式会社デベロッパー エバンジェリストMicrosoft MVP for Development PlatformsClient App Dev 2010/04 – 2014/03
Blog
Global
300+EMPLOYEES
5,000+In Japan
COMPANIES∞
Email, Phone
SUPPORT
24Years of Experience
#1Component VendorAccording to IDC Report
Readers Choice winnersJolt & Visual Studio Magazine
インフラジスティックス
開発ツール製品
アジェンダ
Web アプリケーションとデータ
Ignite UI が提供するもの
データーソース コンポーネントの活用と視覚化
まとめ
Web アプリケーションと
データ
データのやり取り
クライアントサーバーサイド
リクエスト
レスポンス“データ” が返ってくる
クライアント側での処理
クライアント
Web ブラウザー(HTML/JavaScript)
レスポンス
HTMLXMLJSON配列
HTML オブジェクトテーブル、ボタン
などの UI
ハンドリングが必要
リクエスト
JSON/XML 形式のデータの HTML テーブルへの落とし込み
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);
}, // 以下省略});
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);
}, // 以下省略});
課題点
• 要件によっては、複数のデータ形式を混合して利用することもある。
• サーバーから受け取ったデータを表示するだけはない。
– ユーザーのアクションによるデータ操作（いわゆる機能要件）
• フィルタリング
• ソート
• ページング
• 編集 … などなど
• 結果これらの機能を持つ仕組みが UI を含めて必要となる
Ignite UI が提供するもの
What is Ignite UI ?
Ignite UI コンポーネント
jQuery
jQuery UIjQuery Mobile
jQueryMobile ベース
コントロール
jQueryベースデータ
コンポーネント
jQueryUI
ベースコントロール
収録コンポーネント:一覧• データ グリッド
– 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*
• 操作
– 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
*ASP.NET 用サーバー側コンポーネント
収録コンポーネント:分類• データ グリッド
– 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*
• 操作
– 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
*ASP.NET 用サーバー側コンポーネント
• jQuery ベース• jQuery UI ベース• jQuery Mobile ベース
併せて ASP.NET MVC 用ラッパークラスも提供
データ コンポーネントの活用とデータ視覚化
Ignite UI コンポーネント
jQuery
jQuery UIjQuery Mobile
jQueryMobile ベース
コントロール
jQueryベースデータ
コンポーネント
jQueryUI
ベースコントロール
jQueryベースデータコンポーネント
クライアント側データソースオブジェクト
コントロールとデータソースを仲介するレイヤーオブジェクト
Web サービス (REST, Get, WCF)ローカルデータ (JSON, XML, Table, 配列）関数が戻すデータOlap データ
データ レイヤーを加えることで
• UI コントロール側からはデータの“種類” を気にしなくて良い
–データの操作は共通の api を利用できる
• 複数の種類のデータを混合できる
データの “見せ場” としての UI
igDataSource / igTemplating を利用したクライアント側でのデータハンドリング
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();
});
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);
});
データレイヤーにおいてデータ操作を行う
igDataSource が持つ機能
• ローカル データ、リモート データのバインド
• データスキーマ サポート
– 配列, JSON, XML
• ソート
• ページング
• フィルタリング
• データの追加（クライアント側）
• データの削除（クライアント側）
• データの更新（クライアント側）
• 更新されたデータの把握（クライアント側）
• 更新系のロールバック（クライアント側）
• リモート サービスの呼び出し
– （サーバ側での）ロード、更新、ソート
データの「操作」に特化
ig.DataSource とその派生オブジェクト
ig.DataSource
• ig.ArrayDataSource
• ig.FunctionDataSource
• ig.HtmlTableDataSource
• ig.JSONDataSource
• ig.JSONPDataSource
• ig.KnockoutDataSource
• ig.MashupDataSource
• ig.RemoteDataSource
• ig.RESTDataSource
• ig.XmlDataSource
UI コントロールが受け持つ部分
- エンドユーザーに対する 機能 UI の提供とデータソース コンポーネントの機能呼び出し- 上記行為の結果セットの表示（グリッド形式、ツリー形式、チャート形式など）
jQuery UI ベースコントロール
PC, タブレット向け• データ グリッド• ピボット• チャート• ツリー• ダイアログ• カレンダー• マップ• ゲージ• エディター
機能 UI と様々なデータ視覚化パターン
できるだけ部品をそのまま利用することによって、可能な限り「作らない」ことを検討する
そのために多くの UI パターンをカードとして持っておく
既に顧客の頭の中にあるUIのイメージは“標準” で提供されるものの範囲を大幅に超えている
開発においてなぜ、UI フレームワークを利用するのか?
手組み？• グリッド• データ チャート• コンボ ボックス• タイル マネージャー
まとめ
まとめ
• Web アプリケーションだからこそ、クライアント側でデータを操作する仕組みが必要
–JSON, XML, Array 形式のデータのハンドリングが必須
• データソースレイヤーを設定することで機能と UI を分離したアーキテクチャを実現できる
• “手札”としてのコンポーネント、フレームワーク
http://jp.igniteui.com
豊富な機能をお試しください!
AppendixIgnite UI 概要
サンプルコードの抽出と試行
スキルセットに合わせた UI 記述方式スタンダードJavaScript
ASP.NET MVC Razor 構文
// ダイアログの生成$("#dialog").igDialog({
state: "opened",height: 460,width: 440
});
jQuery 構文が生成、実行される
@*ダイアログの生成*@@(Html.Infragistics().Dialog("dialog").State(DialogState.Opened).Height("460").Width("440").Render()
)
簡素化されたリソースの読み込み• Infragistics Loader
– CSS, js ファイルなど必要リソースを自動的に読み込む仕組みを提供
リソースの定義
• パスを切り替えることで複数のバージョンのコンポーネントを呼び出すことも可能となる
<script type="text/javascript">// igLoader の読み込み$.ig.loader({
scriptPath: 'Scripts/IG',cssPath: 'Content/IG',resources: 'igGrid',ready: function () {
// 読み込みが完了した段階で初期化を開始する}
});</script>
リソース指定
コンポーネント呼び出しなどの処理
プロパティの定義• http://labs.infragistics.com/jquery/configure/
– プロパティウィンドウでコントロールを設定
– 生成されたコードをコピー & ペースト
“カスタム コントロール ≠ 遅い” を払拭• UI 仮想化エンジンを利用したパフォーマンス チューニング
http://bit.ly/igGridPerformance
HTML5 など最新技術の採用
領域に合わせた表示データ数の制御
テーマの提供
スタイリング サポート
jQuery UI, Mobile のテーマ ローラーをサポート組織内におけるスタイリングの統一に対応
通常サポート
プライオリティサポート
（¥52,500）
トライアル
技術サポートについて
