Webに今求められているレベル: HTML5 コントロールを利用した開発

Webに今求められているレベル： HTML5コントロールを利用した開発
池原大然(@Neri78) dikehara@infragistics.com
デベロッパーエバンジェリスト
インフラジスティックス・ジャパン株式会社

アジェンダ
Web アプリケーションに求められるもの
HTML5/jQuery 対応コンポーネントの利用
まとめ

•今まで
–デスクトップアプリに近しい機能で
–パフォーマンスは落とさずに
–主にデスクトップ環境（IE）で動作するように

•加えて
–様々なブラウザーに対応し
–Windows OS 以外でも展開可能な
Web ソリューション

つみあがる要件と開発工数とのバランス

パフォーマンス
開発生産性
スタイリング
インフラジスティックス開発ツールのコンセプト
全プラットフォーム共通コンセプト

HTML5/jQuery 対応コンポーネントの利用

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

Ignite UIとは
JavaScript & HTML5 UI フレームワーク
jQuery UI, jQuery Mobile ベース
タッチ、モバイルサポート
開発生産性の向上、高パフォーマンス
Line Of Business (LOB) フォーカス

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

jQuery Mobile
ベース
コントロール
スマートフォン向けコントロール
•Mobile ListView
•Mobile Rating
•jQuery Mobile コントロール用ラッパークラス

jQuery ベース
データコンポーネント
クライアント側データソースオブジェクト
コントロールとデータソースを仲介するレイヤーオブジェクト
•ページング
•フィルタリング
•並び替え
•データスキーマ
•更新
Webサービス(Rest, Get, WCF)
ローカルデータ(JSON, XML, Table, 配列）
関数が戻すデータ
Olapデータ

収録コンポーネント:一覧
•データグリッド
–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 ベース

// ダイアログの生成 $("#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 構文が生成、実行される

http://jp.igniteui.com

“カスタムコントロール≠ 遅い” を払拭
•UI 仮想化エンジンを利用
http://bit.ly/igGridPerformance

“業界最速” への取り組み
•グリッド・チャートへのパフォーマンスチューニング(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

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

Demo
高速グリッド・チャート

Infragistics Loader
•必要リソースを自動的に読み込む仕組みを提供
–バージョンアップや通常利用時における、リソース管理の省力化

Infragistics Loader
•スクリプト、cssのパスを指定 <scripttype="text/javascript"> // igLoaderの読み込み $.ig.loader({ scriptPath: 'Scripts/IG', cssPath: 'Content/IG', resources: 'igDialog', ready: function() { // 読み込みが完了した段階で初期化を開始する } }); </script>
リソース
コンポーネント呼び出しなどの処理

Demo
サンプルブラウザーを用いた試行・検証
Infragistics Loader を利用したリソースの
読み込み

WYSIWYG デザイナーの提供
•「ポトペタ」でのページデザイン
•レスポンシブWeb デザイン(RWD）レイアウトの提供

Demo
Ignite UI ページデザイナーを利用した
ラピッド開発

要件の70 –80 % はカバーできるが
•100 % は難しい
•選択肢
–要件をコンポーネントに合わせる
–コンポーネントで足りないところを補う
コンポーネントを活用できる「場合」もある

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

クライアント側データコンポーネント

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(); });

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); });
データレイヤーにおいて
データ操作を行う

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 の提供とデータソースコンポーネントの機能呼び出し
-上記行為の結果セットの表示（グリッド形式、ツリー形式、チャート形式など）

Demo
非UI コンポーネントの活用

スタイリングサポート
jQuery UI, Mobile のテーマローラーをサポート

Bootstrap テーマへの対応
•Twitter Bootstrap 用に提供されているテーマとの親和性を向上

パフォーマンス
開発生産性
スタイリング
まとめ
高機能・高パフォーマンス、
クロスプラットフォーム対応
Web UI フレームワーク
＝

リソース
製品ページ http://jp.Infragistics.com/IgniteUI
サンプルページ http://jp.igniteui.com
オンラインヘルプ http://help.jp.Infragistics.com
Bloghttp://blogs.jp.Infragistics.com
オンライン記事 http://codezine.jp/component/infragistics/

Webに今求められているレベル: HTML5 コントロールを利用した開発

More Related Content

What's hot (20)

Similar to Webに今求められているレベル: HTML5 コントロールを利用した開発 (20)

More from インフラジスティックス・ジャパン株式会社 (20)

Webに今求められているレベル: HTML5 コントロールを利用した開発