Webに今求められているレベル: HTML5 コントロールを利用した開発
0 likes2,319 views
HTML5 / jQuery コンポーネント Ignite UI のご紹介スライドです。詳細については http://jp.infragistics.com/IgniteUI をご参照ください。
![igDataSourceデータハンドリング例(2) // ソート $("#igAscSort").click(function() { ds.sort([{ fieldName: "Country"}], "asc", false); varrows = $.ig.tmpl(template, ds.dataView()); $("#igTabletbody").empty(); $("#igTable").html(rows); }); // ページング $("#igPagingEnable").click(function() { varmyPagingSettings= { enabled: true, pageSize: 10, pageIndex: 0, type: "local" }; // Setds.pagingSettings(myPagingSettings); ds.pageIndex(pageIndex); $("#igTabletbody").empty(); varrows = $.ig.tmpl(template, ds.dataView()); $("#igTable").html(rows); });
データレイヤーにおいて
データ操作を行う](https://image.slidesharecdn.com/web-141210183922-conversion-gate02/85/Web-HTML5-34-320.jpg)
Webに今求められているレベル: HTML5 コントロールを利用した開発
- 1. Webに今求められているレベル： HTML5コントロールを利用した開発 池原大然(@Neri78) [email protected] デベロッパーエバンジェリスト インフラジスティックス・ジャパン株式会社
- 2. アジェンダ Web アプリケーションに求められるもの HTML5/jQuery 対応コンポーネントの利用 まとめ
- 3. Web アプリケーションに求められるもの •今まで –デスクトップアプリに近しい機能で –パフォーマンスは落とさずに –主にデスクトップ環境（IE）で 動作するように
- 4. Web アプリケーションに求められるもの •加えて –様々なブラウザーに対応し –Windows OS 以外でも展開可能な Web ソリューション
- 8. パフォーマンス 開発生産性 スタイリング インフラジスティックス開発ツールのコンセプト 全プラットフォーム共通コンセプト
- 10. HTML5/jQuery 対応 コンポーネントの 利用
- 11. Ignite UI jQuery jQuery UI jQuery Mobile jQueryMobile ベース コントロール jQuery ベース データ コンポーネント jQueryUI ベース コントロール
- 12. Ignite UIとは JavaScript & HTML5 UI フレームワーク jQuery UI, jQuery Mobile ベース タッチ、モバイルサポート 開発生産性の向上、高パフォーマンス Line Of Business (LOB) フォーカス
- 13. jQuery UI ベース コントロール PC, タブレット向け •データグリッド •チャート •ツリー •ダイアログ •カレンダー •マップ •ゲージ •エディター
- 14. jQuery Mobile ベース コントロール スマートフォン向け コントロール •Mobile ListView •Mobile Rating •jQuery Mobile コントロール用 ラッパークラス
- 15. jQuery ベース データ コンポーネント クライアント側データ ソースオブジェクト コントロールとデータ ソースを仲介する レイヤーオブジェクト •ページング •フィルタリング •並び替え •データスキーマ •更新 Webサービス(Rest, Get, WCF) ローカルデータ(JSON, XML, Table, 配列） 関数が戻すデータ Olapデータ
- 16. 収録コンポーネント:一覧 •データグリッド –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 –TemplatingEngine –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 –RadioButtonGroup –SelectMenu –Slider –Toggle Switch –TextBox –Page –PageContent –PageFooter –PageHeader –Popup –Link –NavBar *ASP.NET 用サーバー側コンポーネント •jQuery ベース •jQuery UI ベース •jQuery Mobile ベース
- 17. // ダイアログの生成 $("#dialog").igDialog({ state: "opened", height: 460, width: 440}); @*ダイアログの生成*@ @(Html.Infragistics() .Dialog("dialog") .State(DialogState.Opened) .Height("460") .Width("440") .Render() ) ASP.NET MVC への対応 スタンダードな jQuery ASP.NET MVC を利用 Razor 構文 jQuery 構文が生成、 実行される
- 19. パフォーマンス
- 20. “カスタムコントロール≠ 遅い” を払拭 •UI 仮想化エンジンを利用 http://bit.ly/igGridPerformance
- 21. “業界最速” への取り組み •グリッド・チャートへのパフォーマンスチューニング(ms) アクション データ型 インフラジスティッ クス グリッド 競合製品1 競合製品2 初期ロード All 774 1,327 71 % 遅い 1,128 45% 遅い ソート Numeric 805 1,448 79% 遅い 2,712 236 % 遅い String 793 1,536 85 % 遅い 2,721 243 %遅い フィルタ Numeric 1,081 1,536 42% 遅い 2,618 142% 遅い String 218 267 22 % 遅い 1,609 638 % 遅い http://bit.ly/igGridPerformance
- 22. HTML5 など最新技術の採用 領域に合わせた 表示データ数の制御
- 23. Demo 高速グリッド・チャート
- 24. 開発生産性
- 25. Infragistics Loader •必要リソースを自動的に読み込む仕組みを提供 –バージョンアップや通常利用時における、 リソース管理の省力化
- 26. Infragistics Loader •スクリプト、cssのパスを指定 <scripttype="text/javascript"> // igLoaderの読み込み $.ig.loader({ scriptPath: 'Scripts/IG', cssPath: 'Content/IG', resources: 'igDialog', ready: function() { // 読み込みが完了した段階で初期化を開始する } }); </script> リソース コンポーネント 呼び出しなどの処理
- 27. Demo サンプルブラウザーを用いた試行・検証 Infragistics Loader を利用したリソースの 読み込み
- 28. WYSIWYG デザイナーの提供 •「ポトペタ」でのページデザイン •レスポンシブWeb デザイン(RWD）レイアウトの提供
- 29. Demo Ignite UI ページデザイナーを利用した ラピッド開発
- 30. 要件の70 –80 % はカバーできるが •100 % は難しい •選択肢 –要件をコンポーネントに合わせる –コンポーネントで足りないところを補う コンポーネントを活用できる「場合」もある
- 31. Ignite UI コンポーネント jQuery jQuery UI jQuery Mobile jQueryMobile ベース コントロール jQuery ベース データ コンポーネント jQueryUI ベース コントロール
- 33. igDataSourceデータハンドリング例(1) // データソースオブジェクト vards; // テンプレート vartemplate = "<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) { // テンプレートに結果セットを流し込む。 varrows = $.ig.tmpl(template, ds.dataView()); $("#igTable").empty(); $("#igTable").html(rows); } else{ alert(error);}}}); // データの読み込み開始 ds.dataBind(); });
- 34. igDataSourceデータハンドリング例(2) // ソート $("#igAscSort").click(function() { ds.sort([{ fieldName: "Country"}], "asc", false); varrows = $.ig.tmpl(template, ds.dataView()); $("#igTabletbody").empty(); $("#igTable").html(rows); }); // ページング $("#igPagingEnable").click(function() { varmyPagingSettings= { enabled: true, pageSize: 10, pageIndex: 0, type: "local" }; // Setds.pagingSettings(myPagingSettings); ds.pageIndex(pageIndex); $("#igTabletbody").empty(); varrows = $.ig.tmpl(template, ds.dataView()); $("#igTable").html(rows); }); データレイヤーにおいて データ操作を行う
- 35. igDataSourceが持つ機能 •ローカルデータ、 リモートデータのバインド •データスキーマサポート –配列, JSON, XML •ソート •ページング •フィルタリング •データの追加（クライアント側） •データの削除（クライアント側） •データの更新（クライアント側） •更新されたデータの把握（クライアント側） •更新系のロールバック（クライアント側） •リモートサービスの呼び出し –（サーバ側での）ロード、更新、ソート データの「操作」に特化
- 36. ig.DataSourceとその派生オブジェクト ig.DataSource •ig.ArrayDataSource •ig.FunctionDataSource •ig.HtmlTableDataSource •ig.JSONDataSource •ig.JSONPDataSource •ig.KnockoutDataSource •ig.MashupDataSource •ig.RemoteDataSource •ig.RESTDataSource •ig.XmlDataSource
- 37. UI コントロールが受け持つ部分 -エンドユーザーに対する機能UI の提供と データソースコンポーネントの機能呼び出し -上記行為の結果セットの表示 （グリッド形式、ツリー形式、チャート形式など）
- 39. スタイリング
- 40. スタイリングサポート jQuery UI, Mobile のテーマローラーを サポート
- 41. Bootstrap テーマへの対応 •Twitter Bootstrap 用に提供されているテーマとの親和性を向上
- 42. Demo テーマへの対応
- 43. パフォーマンス 開発生産性 スタイリング まとめ 高機能・高パフォーマンス、 クロスプラットフォーム対応 Web UI フレームワーク ＝
- 44. リソース 製品ページ http://jp.Infragistics.com/IgniteUI サンプルページ http://jp.igniteui.com オンラインヘルプ http://help.jp.Infragistics.com Bloghttp://blogs.jp.Infragistics.com オンライン記事 http://codezine.jp/component/infragistics/