2013/06/15 #hirobatech で弊社マーケティング & デベロッパー エバンジェリストの池原 (@Neri78) が講演させていただいた際のセッション資料です。

1. HTML/jQuery で実現する
インタラクティブ UI 構築
Daizen Ikehara : Marketing & Developer Evangelist
dikehara@infragistics.com
Twitter @Neri78

2. 自己紹介
Blog
池原 大然（いけはら だいぜん）
インフラジスティックス・ジャパン株式会社
マーケティング & デベロッパー エバンジェリスト
Microsoft MVP for Development Platforms
Client App Dev 2010/04 – 2014/03

3. NETADVANTAGE

4. ANDROID HTML5 iOS

5. 本日のお題
デバイス時代がやってきた!
Ignite UI がもたらす価値
インタラクティブ UI 構築
まとめ

6. デバイス時代
が
やってきた!

7. IDCの予測する
2013年国内IT市場の主要10項目
1
国内ICT市場は緩やかに成長し、第2のプラットフォームから第3のプラット
フォームへのシフトが水面下で加速する
2 第3のプラットフォームを活用した業種特化型ソリューションが拡大する
3
スマートモバイルデバイス（SMD）ユーザーの増加が、マルチデバイス、ア
クセスプラン競争、法人利用を加速する
4 BYODの法人利用でセキュリティ脅威が顕在化し対策が求められる
5 国内クラウド市場におけるベンダー間の戦いは静かに熱いものとなる
6
2013年はSDN市場元年となり、OpenFlowの波がエコシステムを形成してい
く
7 コンバージドシステムを巡る競争がサーバーベンダーの生き残りを左右する
8
第2のプラットフォームベンダーによるビッグデータビジネスは苦戦し、IT
企業と非IT企業の合従連衡が加速する
9 企業向けソーシャル技術の活用ターゲット市場が明確となり競争が始まる
10 オフィス向けIT市場でITベンダーとHCPベンダー間の主導権争いが始まる
http://www.idcjapan.co.jp/Press/Current/20121213Apr.html

8. 20,000円を切るタブレットの登場
Nexus7
19,800JPY
Kindle Fire HD
15,800~JPY
Kobo Arc
200~USD
• コンシューマーは明らかにこれらのハードウェア利用に流れる
• 最初から「クライアント環境は特定できない」ことが前提
• それぞれのブラウザの仕様の違いにも注意が必要
• BYODの対象ともなってくる

9. 本格的なマルチデバイス時代への突入
利用シナリオ／スクリーンサイズ／インプットデバイス／OS／ブラウザなど
様々な要素の多様化に対応する必要が出てきている

12. そもそも
• なぜ、コンポーネントの利用を検討します（しません）か？
– する場合
• 必要な機能がそろっている
• パーツそのものの開発を行う余裕がない
• 開発期間が短い
– しない場合
• 必要としている機能が提供されていない
• なんだかわからないもの（責任がとれないもの）に
手を出したくない
• 他社の製品ライフサイクルに依存したくない
• お客さんに見せたら期待値あがるじゃん。
今までのシステムどうすんの？
• 開発期間が短くなるとお金とれないじゃん!

13. だがしかーし...
Speed!!
変化への対応力!!
ユーザーは既に素早く変化に対応
するサービスに慣れ始めている！

14. 要件定義 基本設計 詳細設計 開発
単体
テスト
結合
テスト
システム
テスト
従来、導入が検討されたのは開発一歩手前、あるいは
開発に着手してからであり、要件が完全に固まった状
態であった。そのため、やむを得ずコントロールのカ
スタマイズをされるケースも多く、あまり効率の良い
状態ではない。
要件定義 基本設計 詳細設計 開発
単体
テスト
結合
テスト
システム
テスト
有効活用されているお客様では、共通して「設計段階
においてUIコンポーネントで要件が満たせるかどうか
について評価」を行い、開発の難易度を決定されてい
る。結果として見積もりが正確になり、手戻りが少な
くなる。
よくあるお話...

15. Ignite UI
が
もたらす価値

16. Ignite UI とは
JavaScript & HTML5 UI フレームワーク
jQuery UI, jQuery Mobile ベース
タッチ、モバイル サポート
開発生産性の向上、高パフォーマンス
Line Of Business (LOB) フォーカス

17. Ignite UI
jQuery
jQuery UI
jQuery
Mobile
jQuery
Mobile
ベース
コントロール
jQuery
ベース
データ
コンポーネント
jQuery
UI
ベース
コントロール

18. jQuery UI
ベース
コントロール
PC, タブレット向け
• データ グリッド
• チャート
• ツリー
• ダイアログ
• カレンダー
• マップ
• ゲージ
• エディター

19. jQuery Mobile
ベース
コントロール
スマートフォン向け
コントロール
• Mobile ListView
• Mobile Rating
• jQuery Mobile
コントロール用
ラッパークラス

20. jQuery
ベース
データ
コンポーネント
クライアント側データ
ソースオブジェクト
コントロールとデータ
ソースを仲介する
レイヤーオブジェクト
• ページング
• フィルタリング
• 並び替え
• データスキーマ
• 更新
Web サービス (Rest, Get, WCF)
ローカルデータ (JSON, XML, Table, 配列）
関数が戻すデータ
Olap データ

21. http://samples.jp.Infragistics.com/jquery

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

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

24. // ダイアログの生成
$("#dialog").igDialog({
state: "opened",
height: 460,
width: 440
});
@*ダイアログの生成*@
@(Html.Infragistics()
.Dialog("dialog")
.State(DialogState.Opened)
.Height("460")
.Width("440")
.Render()
)
2 通りの UI 記述方式
スタンダードな
jQuery
ASP.NET MVC を利用
Razor 構文
jQuery 構文が生成、
実行される

25. Control Tuner (Beta)
• http://labs.infragistics.com/jquery/configure/
• プロパティウィンドウでコントロールを設定
• 生成されたコードをコピー & ペースト

26. 初めの一歩: Control Tuner を利用した UI 構築

27. インタラクティブ
UI
構築

28. インタラクティブってなんだろう
• Interactive : 対話式の双方向の
– 意図すること :
• （ユーザーの）操作に対してアプリケーションが
反応する
–画面サイズの変更により UI が柔軟に変更する
»画面領域の変化
(レスポンシブ Web デザイン)
–ユーザーとの対話（的なもの）を実現する
»データ視覚化 + ドリルダウン

29. レスポンシブ
Web デザイン
サポート
画面領域そのものを
制御
igLayoutManager
• レイアウトエンジン
• Row, Column
サポート

30. レスポンシブ
Web デザイン
サポート
コントロール単位で
サポート
• igGrid
• igTileManager

31. グリッドをレスポンシブにしてみよう

32. ユーザーとの
対話
ユーザーが絞り
込みをかける
• igDataChart
• igPivotGrid

33. これ、作りこみますか？

34. まとめ

35. まとめ
デバイス時代がやってきた!
•HTML / jQuery を利用した
各種デバイスへの対応
インタラクティブな UI を実現
•レスポンシブ Web デザインの活用
•“パーツ” を活用した UI の実現

36. Ignite UI グリッド、無償提供中!
http://bit.ly/IgniteUIGrid
または NuGet で “IgniteUI” を検索