20130615 html jquery で実現するインタラクティブ ui 構築
Post on 22-Jul-2015
1.157 views
TRANSCRIPT
自己紹介
Blog
池原 大然（いけはら だいぜん）インフラジスティックス・ジャパン株式会社
マーケティング & デベロッパー エバンジェリストMicrosoft MVP for Development PlatformsClient App Dev 2010/04 – 2014/03
NETADVANTAGE
ANDROID HTML5 iOS
本日のお題
デバイス時代がやってきた!
Ignite UI がもたらす価値
インタラクティブ UI 構築
まとめ
デバイス時代が
やってきた!
IDCの予測する2013年国内IT市場の主要10項目
1国内ICT市場は緩やかに成長し、第2のプラットフォームから第3のプラットフォームへのシフトが水面下で加速する
2 第3のプラットフォームを活用した業種特化型ソリューションが拡大する
3スマートモバイルデバイス（SMD）ユーザーの増加が、マルチデバイス、アクセスプラン競争、法人利用を加速する
4 BYODの法人利用でセキュリティ脅威が顕在化し対策が求められる
5 国内クラウド市場におけるベンダー間の戦いは静かに熱いものとなる
62013年はSDN市場元年となり、OpenFlowの波がエコシステムを形成していく
7 コンバージドシステムを巡る競争がサーバーベンダーの生き残りを左右する
8第2のプラットフォームベンダーによるビッグデータビジネスは苦戦し、IT企業と非IT企業の合従連衡が加速する
9 企業向けソーシャル技術の活用ターゲット市場が明確となり競争が始まる
10 オフィス向けIT市場でITベンダーとHCPベンダー間の主導権争いが始まる
http://www.idcjapan.co.jp/Press/Current/20121213Apr.html
20,000円を切るタブレットの登場
Nexus719,800JPY
Kindle Fire HD15,800~JPY
Kobo Arc200~USD
• コンシューマーは明らかにこれらのハードウェア利用に流れる• 最初から「クライアント環境は特定できない」ことが前提• それぞれのブラウザの仕様の違いにも注意が必要• BYODの対象ともなってくる
本格的なマルチデバイス時代への突入
利用シナリオ／スクリーンサイズ／インプットデバイス／OS／ブラウザなど様々な要素の多様化に対応する必要が出てきている
そもそも
• なぜ、コンポーネントの利用を検討します（しません）か？
– する場合
•必要な機能がそろっている
•パーツそのものの開発を行う余裕がない
•開発期間が短い
– しない場合
•必要としている機能が提供されていない
•なんだかわからないもの（責任がとれないもの）に手を出したくない
•他社の製品ライフサイクルに依存したくない
•お客さんに見せたら期待値あがるじゃん。今までのシステムどうすんの？
•開発期間が短くなるとお金とれないじゃん!
だがしかーし...
Speed!!
変化への対応力!!
ユーザーは既に素早く変化に対応するサービスに慣れ始めている！
要件定義 基本設計 詳細設計 開発単体
テスト
結合
テスト
システム
テスト
従来、導入が検討されたのは開発一歩手前、あるいは開発に着手してからであり、要件が完全に固まった状態であった。そのため、やむを得ずコントロールのカスタマイズをされるケースも多く、あまり効率の良い状態ではない。
要件定義 基本設計 詳細設計 開発単体
テスト
結合
テスト
システム
テスト
有効活用されているお客様では、共通して「設計段階においてUIコンポーネントで要件が満たせるかどうかについて評価」を行い、開発の難易度を決定されている。結果として見積もりが正確になり、手戻りが少なくなる。
よくあるお話...
Ignite UI が
もたらす価値
Ignite UI とは
JavaScript & HTML5 UI フレームワーク
jQuery UI, jQuery Mobile ベース
タッチ、モバイル サポート
開発生産性の向上、高パフォーマンス
Line Of Business (LOB) フォーカス
Ignite UI
jQuery
jQuery UIjQuery Mobile
jQueryMobile ベース
コントロール
jQuery ベースデータ
コンポーネント
jQueryUI
ベースコントロール
jQuery UI ベースコントロール
PC, タブレット向け• データ グリッド• チャート• ツリー• ダイアログ• カレンダー• マップ• ゲージ• エディター
jQuery Mobileベースコントロール
スマートフォン向けコントロール
• Mobile ListView• Mobile Rating• jQuery Mobile
コントロール用ラッパークラス
jQueryベースデータコンポーネント
クライアント側データソースオブジェクト
コントロールとデータソースを仲介するレイヤーオブジェクト
• ページング• フィルタリング• 並び替え• データスキーマ• 更新
Web サービス (Rest, Get, WCF)ローカルデータ (JSON, XML, Table, 配列）関数が戻すデータOlap データ
Infragistics Loader
• 必要リソースを自動的に読み込む仕組みを提供
– リソース管理の手間を省くことができる。
• 個々のファイルをインポートする必要がなくなる
<script type="text/javascript">// igLoader の読み込み$.ig.loader({
scriptPath: 'Scripts/IG',cssPath: 'Content/IG',resources: 'igDialog',ready: function () {// 読み込みが完了した段階で初期化を開始する}
});</script>
リソース
コンポーネント呼び出しなどの処理
Infragistics Loader
// ダイアログの生成$("#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 構文が生成、実行される
Control Tuner (Beta)
• http://labs.infragistics.com/jquery/configure/
• プロパティウィンドウでコントロールを設定
• 生成されたコードをコピー & ペースト
初めの一歩: Control Tuner を利用した UI 構築
インタラクティブUI
構築
インタラクティブってなんだろう
• Interactive : 対話式の双方向の
–意図すること :
•（ユーザーの）操作に対してアプリケーションが反応する
–画面サイズの変更により UI が柔軟に変更する
»画面領域の変化(レスポンシブ Web デザイン)
–ユーザーとの対話（的なもの）を実現する
»データ視覚化 + ドリルダウン
レスポンシブWeb デザインサポート
画面領域そのものを制御
igLayoutManager
• レイアウトエンジン• Row, Column
サポート
レスポンシブWeb デザインサポート
コントロール単位でサポート
• igGrid• igTileManager
グリッドをレスポンシブにしてみよう
ユーザーとの対話
ユーザーが絞り込みをかける
• igDataChart• igPivotGrid
これ、作りこみますか？
まとめ
まとめ
デバイス時代がやってきた!
•HTML / jQuery を利用した各種デバイスへの対応
インタラクティブな UI を実現
•レスポンシブ Web デザインの活用
•“パーツ” を活用した UI の実現
Ignite UI グリッド、無償提供中!
http://bit.ly/IgniteUIGridまたは NuGet で “IgniteUI” を検索
