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

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

on

  • 1,408 views

2014 年 02 月 28 日に開催されたEnterprise × HTML5 Web Application Conference 2014 において弊社デベロッパー ...

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

Statistics

Views

Total Views
1,408
Views on SlideShare
1,047
Embed Views
361

Actions

Likes
2
Downloads
11
Comments
0

4 Embeds 361

http://blogs.jp.infragistics.com 357
http://www.instapaper.com 2
https://twitter.com 1
https://www.chatwork.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Web アプリケーションに おけるクライアントサイド のデータハンドリングと 可視化の実現 池原 大然 デベロッパー エバンジェリスト インフラジスティックス・ジャパン株式会社 dikehara@Infragistics.com
    • 自己紹介 池原 大然(いけはら だいぜん) インフラジスティックス・ジャパン株式会社 デベロッパー エバンジェリスト Microsoft MVP for Development Platforms Client App Dev 2010/04 – 2014/03 Blog
    • インフラジスティックス 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
    • 開発ツール製品
    • アジェンダ 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: 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 UI ベース コントロール jQuery Mobile ベース コントロール jQuery UI jQuery jQuery ベース データ コンポーネント jQuery Mobile
    • http://jp.igniteui.com
    • 収録コンポーネント:一覧 • データ グリッド – 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
    • 収録コンポーネント:分類 • データ グリッド – 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 用ラッパークラスも提供
    • データ コンポーネント の活用とデータ視覚化
    • Ignite UI コンポーネント jQuery UI ベース コントロール jQuery Mobile ベース コントロール jQuery UI jQuery jQuery ベース データ コンポーネント jQuery Mobile
    • 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.ArrayDataSource • ig.FunctionDataSource • ig.HtmlTableDataSource • ig.JSONDataSource ig.DataSource • 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 豊富な機能をお試しください!
    • Appendix Ignite UI 概要
    • サンプルコードの抽出と試行
    • スキルセットに合わせた 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 構文が生成、 実行される
    • 簡素化されたリソースの読み込み • 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) トライアル