2012/11/16 のセミナーで使用した Ignite UI スライドです

1. jQuery/HTML5/ASP.NET
MVC 対応コンポーネントを
用いたデバイス対応
業務アプリケーション開発
セッションレベル : 200 – Basic
Daizen Ikehara : Marketing & Developer Evangelist
dikehara@infragistics.com
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 に対応

8. サンプルブラウザー
http://samples.jp.infragistics.com/jquery/
Demo

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/