Embed Size (px)
Citation preview
Webに今求められているレベル：HTML5コントロールを利用した開発
池原 大然 (@Neri78)[email protected]
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
アジェンダ
Web アプリケーションに求められるもの
HTML5/jQuery 対応コンポーネントの利用
まとめ
Web アプリケーションに求められるもの
• 今まで
–デスクトップ アプリに近しい機能で
–パフォーマンスは落とさずに
–主にデスクトップ環境（IE）で動作するように
Web アプリケーションに求められるもの
• 加えて
–様々なブラウザーに対応し
–Windows OS 以外でも展開可能な
Web ソリューション
つみあがる要件と開発工数とのバランス
パフォーマンス 開発生産性 スタイリング
インフラジスティックス開発ツールのコンセプト
全プラットフォーム共通コンセプト
HTML5/jQuery 対応コンポーネントの
利用
Ignite UI
jQuery
jQuery UIjQuery 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
– 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 ベース
// ダイアログの生成$("#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 のパスを指定
<script type="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 UIjQuery Mobile
jQueryMobile ベース
コントロール
jQueryベースデータ
コンポーネント
jQueryUI
ベースコントロール
クライアント側データ コンポーネント
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 の提供とデータソース コンポーネントの機能呼び出し- 上記行為の結果セットの表示（グリッド形式、ツリー形式、チャート形式など）
Demo非 UI コンポーネントの活用
スタイリング
スタイリング サポート
jQuery UI, Mobile のテーマ ローラーをサポート
Bootstrap テーマへの対応
• Twitter Bootstrap 用に提供されているテーマとの親和性を向上
Demoテーマへの対応
パフォーマンス 開発生産性 スタイリング
まとめ
高機能・高パフォーマンス、クロスプラットフォーム対応Web UI フレームワーク
＝
リソース
製品ページ
http://jp.Infragistics.com/IgniteUI
サンプル ページ
http://jp.igniteui.com
オンラインヘルプ
http://help.jp.Infragistics.com
Blog
http://blogs.jp.Infragistics.com
オンライン記事
http://codezine.jp/component/infragistics/
