2013 年 3 月 16 日に OITEC において弊社マーケティング & デベロッパー エバンジェリストの池原 (@Neri78) が講演させていただいた内容です。

1. HTML & JavaScript
フレームワーク : IgniteUI
先取り情報! ~ ここだけの話 ~
Daizen Ikehara : Marketing & Developer Evangelist
dikehara@infragistics.com
Twitter @Neri78

2. 自己紹介
Neri (池原 大然)
インフラジスティックス・ジャパン株式会社
マーケティング & デベロッパー エバンジェリスト
Windows PC
SurfaceRT
Windows Phone をつかう
割と普通の市民
だったんですが…
Blog

3. 最近、マカーに！

4. CM

5. 500 $ チャレンジ!
今日は面白い写真を撮らせてください!
http://bit.ly/IGJPUGC2013
IG User Group Contest 2013

6. NETADVANTAGE

7. Cross Platform Modern User Experience

8. XAML styles to match published Microsoft themes.

9. ライセンス形態
１開発者様につき１ライセンス
複数のPCに
インストールして利用可能
配布ライセンス、サーバーライセンス等は一切不要！ 不 不
要 要
9

10. Ignite UI とは?
日本初公開 次期バージョン先出し情報
まとめ

11. Ignite UI
とは?

14. Ignite UI
JavaScript & HTML UI フレームワーク
jQuery UI, jQuery Mobile ベース
高機能、高パフォーマンス
開発生産性の向上
スタイリング サポート

15. 高機能
高パフォーマンス

16. igGrid
• 軽量化・仮想化
された
高パフォーマンス
グリッド
• 階層表示機能
• フィルタリング
• グループ化
• 集計
LOB (業務用）
アプリケーションに
対応

17. igChart
• パフォーマンス
HTML5
チャート
• 多様な
チャートタイプ
• モーション
フレームワーク
による動的変更

18. Mobile
List View
• 高機能モバイル
リスト
• データ
バインディング
• 階層
ナビゲーション
• テンプレート
• 並べ替え
• フィルタリング
• グループ化
• ロードオン
デマンド

19. Mobile
Rating
• レーティング
• ReadOnly
• 編集モード
• 動的変更

20. 高機能、高パフォーマンス
Demo

21. 開発生産性
の
向上

22. リソース ローダー
• 必要リソースを自動的に読み込む仕組みを提供
– リソース管理の手間を省くことができる。

23. 使用するリソースを指定
• 個々のファイルをインポートする必要がなくなる
<script type="text/javascript">
// igLoader の読み込み
$.ig.loader({ 読み込み
scriptPath: 'Scripts/IG', リソース
cssPath: 'Content/IG',
resources: 'igDialog',
ready: function () {
// 読み込みが完了した段階で初期化を開始する
}
}); コンポーネント
</script> 呼び出しなどの処理

24. Control Tuner (Beta)
• http://labs.infragistics.com/jquery/configure/
• プロパティウィンドウを設定しコントロールの
デザインが可能
• 生成されたコードをコピー & ペースト

25. Infragistics Loader
Control Tuner を利用した
ラピッド UI 設定
Demo

26. スタイリング
サポート

27. Theme roller サポート

28. 超簡単
• http://jqueryui.com でテーマ作成
• フォルダーごとコピーしてファイル名変更
• Theme 指定するだけ!
@(Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Infragistics/js/"))
.CssPath(Url.Content("~/Infragistics/css/"))
.Theme("metro")
.Render()
)

29. Theme Roller
Demo

30. 2 通りの記述方法
プラットフォーム非依存
JavaScript (jQuery)
Visual Studio 2010/2012
ASP.NET MVC Razor

31. jQuery Mobile コントロールを利用
Mobile Button Mobile CheckBox Mobile CheckBoxGroup
Mobile Collapsible Mobile CollapsibleSet Mobile Link
Mobile NavBar Mobile Page, Mobile Popup
PageContent,
PageFooter,
PageHeader
Mobile RadioButtonGroup Mobile SelectMenu Mobile Slider
Mobile TextBox Mobile ToggleSwitch
ASP.NET MVC Razor 構文を用いた UI 記述をサポート

32. 日本初公開
次期バージョン
先出し情報

33. 新コントロール
• RTM
– スパークライン
– ファンネルチャート
– ピボット テーブル
– ページスプリッター
• CTP (Community Technology Preview）
– ドーナツチャート
– レイアウトマネージャー
– ゲージ
– タイルマネージャー

34. 機能拡張
• Knockout.js サポート - http://knockoutjs.com/
– コンボボックス
– エディター
– グリッド、階層グリッド
– ツリー
• レスポンシブ デザイン機能
– RTM: グリッド
– CTP: レイアウトマネージャー、タイルマネージャー
• 各コントロールの機能拡張
– グリッド : セル結合、固定列機能 (CTP)
– チャート : チャートの種類の追加

35. 新コントロール総ざらい
Demo

36. まとめ

37. Ignite UI グリッド、無償提供中!
http://bit.ly/IgniteUIGrid

38. まとめ
Ignite UI ってなんぞや？
• 開発生産性を高めるフレームワーク
• JavaScript, ASP.NET MVC どちらでも
利用できます!
• 次期バージョンは来月リリース予定
Call To Action!
• 無償 Ignite UI Grid をダウンロードしてください!
• 実際の開発に利用してください!
• 買ってもらえるとまた岡山に来れます!

39. リソース  jQuery
 jQuery
http://jquery.com/
 jQuery UI
http://jqueryui.com/
 Visual Studio 2012 の jQuery インテリセンスと
コード スニペット (MS 井上 章さんの Blog)
http://bit.ly/jQSnipetChack
 Ignite UI
 ホワイトペーパー
 http://wp.techtarget.itmedia.co.jp/contents/?
cid=12323
 関連 Webinar
http://bit.ly/IGJPWebinars
 Control Configuration
http://labs.infragistics.com/jquery/configure
 オンライン ヘルプ/API
http://bit.ly/Ignite2012Help
 Blog
http://bit.ly/IGDaizen