Web アプリケーションに
おけるクライアントサイド
のデータハンドリングと
可視化の実現
池原 大然
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
dikehara@Infragistics.com
自己紹介
池原 大然(いけはら だいぜん)
インフラジスティックス・ジャパン株式会社
デベロッパー エバンジェリスト
Microsoft MVP for Development Platforms
Client App Dev 2010/04 ...
インフラジスティックス

24

Years of Experience

#1

Component Vendor
According to IDC Report

Global

300+

EMPLOYEES

In Japan

5,0...
開発ツール製品
アジェンダ
Web アプリケーションとデータ
Ignite UI が提供するもの
データーソース コンポーネントの活用と視覚化
まとめ
Web アプリケーション
と
データ
データのやり取り

リクエスト

サーバーサイド

クライアント
レスポンス
“データ” が返ってくる
クライアント側での処理

リクエスト

Web ブラウザー(HTML/JavaScript)

HTML オブジェクト
クライアント
ハンドリングが必要
テーブル、ボタン
などの UI

HTML
XML
JSON
配列
レスポンス
JSON/XML 形式のデータの HTML テーブルへの落とし込み
JSON データのハンドリング例(表示)
$.ajax({
type: "GET",
url: "http://localhost/WebAPIs/api/customers",
dataType: "json",
success: funct...
XML データのハンドリング例(表示)
$.ajax({
type: "GET",
url: "http://localhost/WebAPIs/api/customers",
dataType: "xml",
success: functio...
課題点
• 要件によっては、複数のデータ形式を
混合して利用することもある。
• サーバーから受け取ったデータを表示するだけはない。
– ユーザーのアクションによるデータ操作
(いわゆる機能要件)
• フィルタリング
• ソート
• ページング...
Ignite UI が
提供するもの
What is Ignite UI ?
Ignite UI コンポーネント
jQuery
UI
ベース
コントロール

jQuery
Mobile
ベース
コントロール

jQuery UI
jQuery

jQuery
ベース
データ
コンポーネント

jQuery
Mobile
http://jp.igniteui.com
収録コンポーネント:一覧
•

データ グリッド
– Grid
– Hierarchical Grid

•

OLAP ピボット
– Pivot Data Selector
– Pivot View
– Pivot Grid

•

データ ...
収録コンポーネント:分類
•

データ グリッド
– Grid
– Hierarchical Grid

•

OLAP ピボット
– Pivot Data Selector
– Pivot View
– Pivot Grid

•

データ ...
データ コンポーネント
の活用とデータ視覚化
Ignite UI コンポーネント
jQuery
UI
ベース
コントロール

jQuery
Mobile
ベース
コントロール

jQuery UI
jQuery

jQuery
ベース
データ
コンポーネント

jQuery
Mobile
jQuery
ベース
データ
コンポーネント
クライアント側データ
ソースオブジェクト
コントロールとデータ
ソースを仲介する
レイヤーオブジェクト

Web サービス (REST, Get, WCF)
ローカルデータ (JSON, XML, ...
データ レイヤーを加えることで
• UI コントロール側からはデータの
“種類” を気にしなくて良い
–データの操作は共通の api を利用できる
• 複数の種類のデータを混合できる
データの “見せ場” としての UI
igDataSource / igTemplating を利用したクライアント側でのデータハンドリング
igDataSource データハンドリング例(1)
// データソースオブジェクト
var ds;
// テンプレート
var template = "<tr>" +
"<td>${CustomerID}</td><td>${CompanyN...
igDataSource データハンドリング例(2)
// ソート
$("#igAscSort").click(function () {
ds.sort([{ fieldName: "Country" }], "asc", false);
v...
igDataSource が持つ機能
• ローカル データ、
リモート データのバインド
• データスキーマ サポート
– 配列, JSON, XML
• ソート
• ページング
• フィルタリング

•
•
•
•
•
•

データの追加(ク...
ig.DataSource とその派生オブジェクト
• ig.ArrayDataSource
• ig.FunctionDataSource

• ig.HtmlTableDataSource
• ig.JSONDataSource

ig.D...
UI コントロールが受け持つ部分

- エンドユーザーに対する 機能 UI の提供と
データソース コンポーネントの機能呼び出し
- 上記行為の結果セットの表示
(グリッド形式、ツリー形式、チャート形式など)
jQuery UI
ベース
コントロール
PC, タブレット向け
•
•
•
•
•
•
•
•
•

データ グリッド
ピボット
チャート
ツリー
ダイアログ
カレンダー
マップ
ゲージ
エディター
機能 UI と様々なデータ視覚化パターン
開発においてなぜ、UI フレームワーク
を利用するのか?
できるだけ部品をそのまま利用することによって、
可能な限り「作らない」ことを検討する
そのために多くの UI パターンを
カードとして持っておく

既に顧客の頭の中にあるUIのイメージは...
手組み?
•
•
•
•

グリッド
データ チャート
コンボ ボックス
タイル マネージャー
まとめ
まとめ
• Web アプリケーションだからこそ、クライアント側で
データを操作する仕組みが必要
– JSON, XML, Array 形式のデータの
ハンドリングが必須
• データソースレイヤーを設定することで
機能と UI を分離したアーキテ...
http://jp.igniteui.com

豊富な機能をお試しください!
Appendix
Ignite UI 概要
サンプルコードの抽出と試行
スキルセットに合わせた UI 記述方式
スタンダード
JavaScript
// ダイアログの生成
$("#dialog").igDialog({
state: "opened",
height: 460,
width: 440
});

AS...
簡素化されたリソースの読み込み
• Infragistics Loader
– CSS, js ファイルなど必要リソースを自動的に読み込む仕組みを提供
リソースの定義
<script type="text/javascript">
// igLoader の読み込み
$.ig.loader({
scriptPath: 'Scripts/IG',
cssPath: 'Content/IG',
r...
プロパティの定義
• http://labs.infragistics.com/jquery/configure/
– プロパティウィンドウでコントロールを設定
– 生成されたコードをコピー & ペースト
“カスタム コントロール ≠ 遅い” を払拭
• UI 仮想化エンジンを利用したパフォーマンス チューニング

http://bit.ly/igGridPerformance
HTML5 など最新技術の採用

領域に合わせた
表示データ数の制御
テーマの提供
スタイリング サポート

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

通常サポート

プライオリティ
サポート
(¥52,500)

トライアル
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現
Upcoming SlideShare
Loading in...5
×

Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現

2,237

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,237
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web アプリケーションにおけるクライアントサイドのデータハンドリングと可視化の実現

  1. 1. Web アプリケーションに おけるクライアントサイド のデータハンドリングと 可視化の実現 池原 大然 デベロッパー エバンジェリスト インフラジスティックス・ジャパン株式会社 dikehara@Infragistics.com
  2. 2. 自己紹介 池原 大然(いけはら だいぜん) インフラジスティックス・ジャパン株式会社 デベロッパー エバンジェリスト Microsoft MVP for Development Platforms Client App Dev 2010/04 – 2014/03 Blog
  3. 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. 4. 開発ツール製品
  5. 5. アジェンダ Web アプリケーションとデータ Ignite UI が提供するもの データーソース コンポーネントの活用と視覚化 まとめ
  6. 6. Web アプリケーション と データ
  7. 7. データのやり取り リクエスト サーバーサイド クライアント レスポンス “データ” が返ってくる
  8. 8. クライアント側での処理 リクエスト Web ブラウザー(HTML/JavaScript) HTML オブジェクト クライアント ハンドリングが必要 テーブル、ボタン などの UI HTML XML JSON 配列 レスポンス
  9. 9. JSON/XML 形式のデータの HTML テーブルへの落とし込み
  10. 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. 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. 12. 課題点 • 要件によっては、複数のデータ形式を 混合して利用することもある。 • サーバーから受け取ったデータを表示するだけはない。 – ユーザーのアクションによるデータ操作 (いわゆる機能要件) • フィルタリング • ソート • ページング • 編集 … などなど • 結果これらの機能を持つ仕組みが UI を含めて必要となる
  13. 13. Ignite UI が 提供するもの
  14. 14. What is Ignite UI ?
  15. 15. Ignite UI コンポーネント jQuery UI ベース コントロール jQuery Mobile ベース コントロール jQuery UI jQuery jQuery ベース データ コンポーネント jQuery Mobile
  16. 16. http://jp.igniteui.com
  17. 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. 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. 19. データ コンポーネント の活用とデータ視覚化
  20. 20. Ignite UI コンポーネント jQuery UI ベース コントロール jQuery Mobile ベース コントロール jQuery UI jQuery jQuery ベース データ コンポーネント jQuery Mobile
  21. 21. jQuery ベース データ コンポーネント クライアント側データ ソースオブジェクト コントロールとデータ ソースを仲介する レイヤーオブジェクト Web サービス (REST, Get, WCF) ローカルデータ (JSON, XML, Table, 配列) 関数が戻すデータ Olap データ
  22. 22. データ レイヤーを加えることで • UI コントロール側からはデータの “種類” を気にしなくて良い –データの操作は共通の api を利用できる • 複数の種類のデータを混合できる
  23. 23. データの “見せ場” としての UI
  24. 24. igDataSource / igTemplating を利用したクライアント側でのデータハンドリング
  25. 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. 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. 27. igDataSource が持つ機能 • ローカル データ、 リモート データのバインド • データスキーマ サポート – 配列, JSON, XML • ソート • ページング • フィルタリング • • • • • • データの追加(クライアント側) データの削除(クライアント側) データの更新(クライアント側) 更新されたデータの把握(クライアント側) 更新系のロールバック(クライアント側) リモート サービスの呼び出し – (サーバ側での)ロード、更新、ソート データの「操作」に特化
  28. 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. 29. UI コントロールが受け持つ部分 - エンドユーザーに対する 機能 UI の提供と データソース コンポーネントの機能呼び出し - 上記行為の結果セットの表示 (グリッド形式、ツリー形式、チャート形式など)
  30. 30. jQuery UI ベース コントロール PC, タブレット向け • • • • • • • • • データ グリッド ピボット チャート ツリー ダイアログ カレンダー マップ ゲージ エディター
  31. 31. 機能 UI と様々なデータ視覚化パターン
  32. 32. 開発においてなぜ、UI フレームワーク を利用するのか? できるだけ部品をそのまま利用することによって、 可能な限り「作らない」ことを検討する そのために多くの UI パターンを カードとして持っておく 既に顧客の頭の中にあるUIのイメージは “標準” で提供されるものの範囲を大幅に超えている
  33. 33. 手組み? • • • • グリッド データ チャート コンボ ボックス タイル マネージャー
  34. 34. まとめ
  35. 35. まとめ • Web アプリケーションだからこそ、クライアント側で データを操作する仕組みが必要 – JSON, XML, Array 形式のデータの ハンドリングが必須 • データソースレイヤーを設定することで 機能と UI を分離したアーキテクチャを実現できる • “手札”としてのコンポーネント、フレームワーク
  36. 36. http://jp.igniteui.com 豊富な機能をお試しください!
  37. 37. Appendix Ignite UI 概要
  38. 38. サンプルコードの抽出と試行
  39. 39. スキルセットに合わせた 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 構文が生成、 実行される
  40. 40. 簡素化されたリソースの読み込み • Infragistics Loader – CSS, js ファイルなど必要リソースを自動的に読み込む仕組みを提供
  41. 41. リソースの定義 <script type="text/javascript"> // igLoader の読み込み $.ig.loader({ scriptPath: 'Scripts/IG', cssPath: 'Content/IG', resources: 'igGrid', ready: function () { // 読み込みが完了した段階で初期化を開始する } }); </script> • リソース指定 コンポーネント 呼び出しなどの処理 パスを切り替えることで複数のバージョンのコンポーネントを 呼び出すことも可能となる
  42. 42. プロパティの定義 • http://labs.infragistics.com/jquery/configure/ – プロパティウィンドウでコントロールを設定 – 生成されたコードをコピー & ペースト
  43. 43. “カスタム コントロール ≠ 遅い” を払拭 • UI 仮想化エンジンを利用したパフォーマンス チューニング http://bit.ly/igGridPerformance
  44. 44. HTML5 など最新技術の採用 領域に合わせた 表示データ数の制御
  45. 45. テーマの提供
  46. 46. スタイリング サポート jQuery UI, Mobile のテーマ ローラーを サポート 組織内におけるスタイリングの統一に対応
  47. 47. 技術サポートについて 通常サポート プライオリティ サポート (¥52,500) トライアル
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×