Download - Webに今求められているレベル: HTML5 コントロールを利用した開発
![Page 1: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/1.jpg)
Webに今求められているレベル:HTML5コントロールを利用した開発
池原 大然 (@Neri78)[email protected]
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
![Page 2: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/2.jpg)
アジェンダ
Web アプリケーションに求められるもの
HTML5/jQuery 対応コンポーネントの利用
まとめ
![Page 3: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/3.jpg)
Web アプリケーションに求められるもの
• 今まで
–デスクトップ アプリに近しい機能で
–パフォーマンスは落とさずに
–主にデスクトップ環境(IE)で動作するように
![Page 4: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/4.jpg)
Web アプリケーションに求められるもの
• 加えて
–様々なブラウザーに対応し
–Windows OS 以外でも展開可能な
Web ソリューション
![Page 5: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/5.jpg)
![Page 6: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/6.jpg)
つみあがる要件と開発工数とのバランス
![Page 7: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/7.jpg)
![Page 8: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/8.jpg)
パフォーマンス 開発生産性 スタイリング
インフラジスティックス開発ツールのコンセプト
全プラットフォーム共通コンセプト
![Page 9: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/9.jpg)
![Page 10: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/10.jpg)
HTML5/jQuery 対応コンポーネントの
利用
![Page 11: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/11.jpg)
Ignite UI
jQuery
jQuery UIjQuery Mobile
jQueryMobile ベース
コントロール
jQueryベースデータ
コンポーネント
jQueryUI
ベースコントロール
![Page 12: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/12.jpg)
Ignite UI とは
JavaScript & HTML5 UI フレームワーク
jQuery UI, jQuery Mobile ベース
タッチ、モバイル サポート
開発生産性の向上、高パフォーマンス
Line Of Business (LOB) フォーカス
![Page 13: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/13.jpg)
jQuery UI ベースコントロール
PC, タブレット向け• データ グリッド• チャート• ツリー• ダイアログ• カレンダー• マップ• ゲージ• エディター
![Page 14: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/14.jpg)
jQuery Mobileベースコントロール
スマートフォン向けコントロール
• Mobile ListView• Mobile Rating• jQuery Mobile
コントロール用ラッパークラス
![Page 15: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/15.jpg)
jQueryベースデータコンポーネント
クライアント側データソースオブジェクト
コントロールとデータソースを仲介するレイヤーオブジェクト
• ページング• フィルタリング• 並び替え• データスキーマ• 更新
Web サービス (Rest, Get, WCF)ローカルデータ (JSON, XML, Table, 配列)関数が戻すデータOlap データ
![Page 16: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/16.jpg)
収録コンポーネント:一覧• データ グリッド
– 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 ベース
![Page 17: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/17.jpg)
// ダイアログの生成$("#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 構文が生成、実行される
![Page 18: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/18.jpg)
http://jp.igniteui.com
![Page 19: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/19.jpg)
パフォーマンス
![Page 20: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/20.jpg)
“カスタム コントロール ≠ 遅い” を払拭• UI 仮想化エンジンを利用
http://bit.ly/igGridPerformance
![Page 21: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/21.jpg)
“業界最速” への取り組み
• グリッド・チャートへのパフォーマンス チューニング (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
![Page 22: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/22.jpg)
HTML5 など最新技術の採用
領域に合わせた表示データ数の制御
![Page 23: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/23.jpg)
Demo高速グリッド・チャート
![Page 24: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/24.jpg)
開発生産性
![Page 25: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/25.jpg)
Infragistics Loader
• 必要リソースを自動的に読み込む仕組みを提供
–バージョンアップや通常利用時における、リソース管理の省力化
![Page 26: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/26.jpg)
Infragistics Loader
• スクリプト、css のパスを指定
<script type="text/javascript">// igLoader の読み込み$.ig.loader({
scriptPath: 'Scripts/IG',cssPath: 'Content/IG',resources: 'igDialog',ready: function () {
// 読み込みが完了した段階で初期化を開始する}
});</script>
リソース
コンポーネント呼び出しなどの処理
![Page 27: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/27.jpg)
Demo
サンプル ブラウザーを用いた試行・検証
Infragistics Loader を利用したリソースの
読み込み
![Page 28: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/28.jpg)
WYSIWYG デザイナーの提供
• 「ポトペタ」でのページ デザイン
• レスポンシブ Web デザイン (RWD)レイアウトの提供
![Page 29: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/29.jpg)
Demo
Ignite UI ページ デザイナーを利用した
ラピッド開発
![Page 30: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/30.jpg)
要件の 70 – 80 % はカバーできるが
• 100 % は難しい
• 選択肢
– 要件をコンポーネントに合わせる
– コンポーネントで足りないところを補う
コンポーネントを活用できる「場合」もある
![Page 31: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/31.jpg)
Ignite UI コンポーネント
jQuery
jQuery UIjQuery Mobile
jQueryMobile ベース
コントロール
jQueryベースデータ
コンポーネント
jQueryUI
ベースコントロール
![Page 32: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/32.jpg)
クライアント側データ コンポーネント
![Page 33: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/33.jpg)
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();
});
![Page 34: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/34.jpg)
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);
});
データレイヤーにおいてデータ操作を行う
![Page 35: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/35.jpg)
igDataSource が持つ機能
• ローカル データ、リモート データのバインド
• データスキーマ サポート
– 配列, JSON, XML
• ソート
• ページング
• フィルタリング
• データの追加(クライアント側)
• データの削除(クライアント側)
• データの更新(クライアント側)
• 更新されたデータの把握(クライアント側)
• 更新系のロールバック(クライアント側)
• リモート サービスの呼び出し
– (サーバ側での)ロード、更新、ソート
データの「操作」に特化
![Page 36: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/36.jpg)
ig.DataSource とその派生オブジェクト
ig.DataSource
• ig.ArrayDataSource
• ig.FunctionDataSource
• ig.HtmlTableDataSource
• ig.JSONDataSource
• ig.JSONPDataSource
• ig.KnockoutDataSource
• ig.MashupDataSource
• ig.RemoteDataSource
• ig.RESTDataSource
• ig.XmlDataSource
![Page 37: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/37.jpg)
UI コントロールが受け持つ部分
- エンドユーザーに対する 機能 UI の提供とデータソース コンポーネントの機能呼び出し- 上記行為の結果セットの表示(グリッド形式、ツリー形式、チャート形式など)
![Page 38: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/38.jpg)
Demo非 UI コンポーネントの活用
![Page 39: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/39.jpg)
スタイリング
![Page 40: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/40.jpg)
スタイリング サポート
jQuery UI, Mobile のテーマ ローラーをサポート
![Page 41: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/41.jpg)
Bootstrap テーマへの対応
• Twitter Bootstrap 用に提供されているテーマとの親和性を向上
![Page 42: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/42.jpg)
Demoテーマへの対応
![Page 43: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/43.jpg)
パフォーマンス 開発生産性 スタイリング
まとめ
高機能・高パフォーマンス、クロスプラットフォーム対応Web UI フレームワーク
=
![Page 44: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/44.jpg)
リソース
製品ページ
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/
![Page 45: Webに今求められているレベル: HTML5 コントロールを利用した開発](https://reader034.vdocuments.site/reader034/viewer/2022050818/55af7ea71a28ab15368b4630/html5/thumbnails/45.jpg)