jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
1 like2,243 views
2012/11/16 のセミナーで使用した Ignite UI スライドです
![JavaScript
• JavaScript (jQuery) を用いて UI を記述
– IDE に依存しない
– プラットフォームに依存しない
(ASP.NET, ASP.NET MVC, HTML, PHP, etc..)
– jQuery の習得が必要
// グリッドの呼び出し
$("#grid1").igGrid({
dataSource: products,
columns: [
{
headerText: "Product ID",
key: "ProductID",
dataType: "number"
}
]
});](https://image.slidesharecdn.com/jqueryhtml5asp-netmvc-121115190812-phpapp01/85/jQuery-Html5-ASP-NET-MVC-16-320.jpg)
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
- 1. jQuery/HTML5/ASP.NET MVC 対応コンポーネントを 用いたデバイス対応 業務アプリケーション開発 セッションレベル : 200 – Basic Daizen Ikehara : Marketing & Developer Evangelist [email protected] Twitter @Neri78
- 2. 自己紹介 池原 大然（いけはら だいぜん） インフラジスティックス・ジャパン株式会社 マーケティング & デベロッパー エバンジェリスト Microsoft MVP for Development Platforms Client App Dev 2010/04 – 2013/03 Blog
- 3. Build Richer Apps Reach More Clients
- 4. Ignite UI 概要 JavaScript and ASP.NET MVC 開発生産性への取り組み まとめ
- 5. Ignite UI 概要
- 7. Ignite UI JavaScript & HTML5 UI フレームワーク jQuery UI, jQuery Mobile ベースコントロール HTML5 機能を活用 業務要件に必要なコントロール モバイル対応コントロール Javascript または ASP.NET MVC に対応
- 9. igGrid • 軽量化・仮想化 された 高パフォーマンス グリッド • 階層表示機能 • フィルタリング • グループ化 • 集計 LOB (業務用） アプリケーションに 対応
- 10. igChart • パフォーマンス HTML5 チャート • 多様な チャートタイプ • モーション フレームワーク による動的変更
- 11. igMap • パフォーマンス HTML5 マップ • ズーム & パン • 地理情報 サービスとの 連携
- 12. モバイル • jQuery Mobile UI • 様々なベース コントロールを 提供
- 13. jQuery UI vs jQuery Mobile jQuery UI jQuery Mobile 対応コントロール 対応コントロール デスクトップ ブラウザーへ モバイル デバイス最優先 の対応 ・ボタン ・リッチ コントロール ・スライダー ・ピボット グリッド ・ページヘッダー ・HTML エディター ・ナビゲーションバー ・マップ
- 14. JavaScript and ASP.NET MVC
- 15. 実装オプション 2 通りの UI 記述方法 JavaScript (jQuery) ASP.NET MVC Razor
- 16. JavaScript • JavaScript (jQuery) を用いて UI を記述 – IDE に依存しない – プラットフォームに依存しない (ASP.NET, ASP.NET MVC, HTML, PHP, etc..) – jQuery の習得が必要 // グリッドの呼び出し $("#grid1").igGrid({ dataSource: products, columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" } ] });
- 17. ASP.NET MVC ラッパー • ASP.NET MVC Razor 構文を用いて UI を記述 – VS の支援機能を有効活用 – Model 部分で C#, VB を利用しプロパティ設定を 行うこともできる – jQuery の習得が必要なものの、UI そのもの記述部分に 関しては Razor 構文を利用できる // グリッドの呼び出し @(Html.Infragistics().Grid() .DataSource(products) .Columns(columns => columns.For(x => x.ProductID) .HeaderText(“Product ID") .DataType("number") ) )
- 18. JavaScript, ASP.NET MVC 比較 Demo
- 19. 開発生産性 への 取り組み
- 20. Infragistics Loader • JavaScript ライブラリーを利用する場合 スクリプト ファイル、CSS ファイルの参照が必要
- 21. Infragistics Loader • 必要リソースを自動的に読み込む仕組みを提供 – リソース管理の手間を省くことができる。
- 22. Infragistics Loader • コード記述時にローダーを呼び出し <script type="text/javascript"> 読み込み // igLoader の読み込み リソース $.ig.loader({ scriptPath: 'Scripts/IG', cssPath: 'Content/IG', resources: 'igGrid.*', ready: function () { // Do something } }); コンポーネント </script> 呼び出しなどの処理 • ASP.NET MVC ラッパーも同様
- 23. Control Tuner (Beta) • http://labs.infragistics.com/jquery/configure/ • プロパティウィンドウを設定しコントロールの デザインが可能 • 生成されたコードをコピー & ペースト
- 24. Infragistics Loader / Control Tuner Demo
- 25. Windows Phone jQuery iOS WPF WinRT(XAML) WinRT(HTML) Silverlight Core Data Visualization API Cross Platform Shared Code Strategy
- 26. • APIセットの共通化 – マルチプラットフォーム開発でのコスト低減 API共通化に よる学習・開発 コストの削減 単独 APIセット共有 共通部分 Silverlight Windows Phone WPF jQuery
- 27. まとめ
- 28. まとめ デバイス、プラットフォーム対応への 対応策の 1 つ • jQuery UI, jQuery Mobile の活用 • ASP.NET MVC UI コンポーネント利用での開発 • 高機能、高パフォーマンス • 開発生産性を考慮
- 29. インフラジスティックス Webinar • http://jp.infragistics.com/resources/webinars. aspx • オンラインセミナーを開催中 – 新機能紹介 – コントロール利用方法チュートリアルなど igGrid 入門 igChart 入門 近日セッションビデオを公開予定 その他 Webinar も計画中
- 30. リソース HTML5 HTML5 チート シート http://www.inmotionhosting.com/infographic s/html5-cheat-sheet/ ブラウザー 対応状況 http://www.findmebyip.com/litmus/ jQuery jQuery http://jquery.com/ jQuery UI http://jqueryui.com/ Ignite UI Blog http://blogs.jp.infragistics.com/tags/jQuery/default .aspx Control Configuration http://labs.infragistics.com/jquery/configure オンライン ヘルプ/API http://help.jp.infragistics.com/NetAdvantage/ jQuery/2012.2/CLR4.0/default.aspx http://help.infragistics.com/jQuery/2012.2/