ignite ui 2012 最新情報 jquery mobile 編

Ignite UI 2012 最新情報jQuery Mobile 編

Daizen Ikehara : Marketing & Developer Evangelistdikehara@infragistics.comTwitter @Neri78

池原 大然（いけはらだいぜん）インフラジスティックス・ジャパン株式会社

マーケティング & デベロッパーエバンジェリスト

Microsoft MVP for Development Platforms

Client App Dev 2010/04 – 2013/03

自己紹介

Blog

NETADVANTAGE

Cross Platform Modern User Experience

XAML styles to match published Microsoft themes.

6

１開発者様につき１ライセンス

複数のPCにインストールして利用可能

配布ライセンス、サーバーライセンス等は一切不要！ 不要

不要

ライセンス形態

サポートサービス

Emailサポート

電話サポート(9am-6pm) サポート回数

1次回答までの時間

サービスリリース取得

トライアル版

通常サポート

Priorityサポート

NO

LIMIT(20 DAYS)

NO

LIMIT

NO

LIMIT -

-

2DAYS

E-mail / 電話による技術サポート

開発の加速

ユーザーインターフェイス開発において、いかに生産性を高め、優れたUXを実現するための支援が出来るかを追求

•プロジェクトにおける工数の削減

•提案／設計時のラピッドプロトタイピングにも利用SIer

•自社製品の継続的アップグレードに伴う価値向上

•弊社製品による他のプラットフォームへの迅速な対応ISV

•セルフ開発スキーム確立における標準パーツとしての利用

•「作らない」ための弊社製品の利用In-house IT

• 開発／テスト双方における工数の削減• パフォーマンスの高さ（特にグリッド／チャート）• 手軽に一貫した優れたスタイルによる外観の高い品質を得ることが可能• 日本法人によるダイレクトサポート• サブスクリプション／アップグレードにおける継続的な価値向上• ソースコードの開示（100万行以上の洗練されたコード！）• どの製品でも一貫したアーキテクチャと同じアプローチをとっていることによる

学習コストの削減

要件定義 基本設計 詳細設計 開発単体

テスト

結合

テスト

システム

テスト

従来、導入が検討されたのは開発一歩手前、あるいは開発に着手してからであり、要件が完全に固まった状態であった。そのため、やむを得ずコントロールのカスタマイズをされるケースも多く、あまり効率の良い状態ではない。

要件定義 基本設計 詳細設計 開発単体

テスト

結合

テスト

システム

テスト

有効活用されているお客様では、共通して「設計段階においてUIコンポーネントで要件が満たせるかどうかについて評価」を行い、開発の難易度を決定されている。結果として見積もりが正確になり、手戻りが少なくなる。

UIコントロールの有効活用

Ignite UI 2012 概要

Ignite UI 2012 最新機能 jQuery Mobile 編

まとめ

Ignite UI 2012 概要

Build Richer AppsReach More Clients

Ignite UI

JavaScript & HTML5 UI フレームワーク

プラットフォーム非依存 jQuery UI, jQuery Mobile

ベース UI ウィジット

HTML5 / CSS3 準拠

開発生産性の向上

スタイリング サポート

モバイル

• jQuery Mobile 対応

• 独自、あるいは生産性向上のしくみを提供

MobileList View• 高機能モバイルリスト• データ

バインディング• 階層

ナビゲーション• テンプレート• 並べ替え• フィルタリング• グループ化• ロードオン

デマンド

MobileRating• レーティング

• ReadOnly• 編集モード• 動的変更

実装オプション

2 通りの UI 記述方法

プラットフォーム非依存

JavaScript (jQuery)

Visual Studio 2010/2012

ASP.NET MVC Razor

jQuery グリッド (jQuery UI) : igGrid 入門編http://bit.ly/igGrid101jQuery / HTML5 チャート (jQuery UI) : igChart 入門編http://bit.ly/igChart101

Infragistics Loader

• 必要リソースを自動的に読み込む仕組みを提供

– リソース管理の手間を省くことができる。

Ignite UI 2012最新機能

jQuery Mobile編

igListView

• 子レイアウトへの静的なリンク生成機能

igRating (Mobile)

• レーティングの値として Null 値を新たにサポート

– 0 ではななく、値なしとしたい場合に有効

igListView 並びに igRating の構築ならびに

新機能 (サンプル ブラウザー)

Mobile Button Mobile CheckBox Mobile CheckBoxGroup

Mobile Collapsible Mobile CollapsibleSet Mobile Link

Mobile NavBar Mobile Page,PageContent,PageFooter,PageHeader

Mobile Popup

Mobile RadioButtonGroup Mobile SelectMenu Mobile Slider

Mobile TextBox Mobile ToggleSwitch

jQuery Mobile コントロール対応ASP.NET MVC ラッパー

ASP.NET MVC Razor 構文を用いた UI 記述をサポート

jQuery Mobile 対応 ASP.NET MVC ラッパー機能の利用

まとめ

まとめ

機能拡張

• igListView 子レイアウト内でのリンク設定

• igRating

新機能

• jQuery Mobile コントロール対応ASP.NET MVC ラッパーによる迅速な UI 構築

HTML5 HTML5 チート シート

http://bit.ly/HTML5-Cheat-Sheet ブラウザー 対応状況 (~ IE9)

http://www.findmebyip.com/litmus/

jQuery jQuery

http://jquery.com/ jQuery UI

http://jqueryui.com/ Visual Studio 2012 の jQuery インテリセンスとコード スニペット (MS 井上 章さんの Blog)http://bit.ly/jQSnipetChack

Ignite UI Blog

http://bit.ly/IGDaizen

Control Configurationhttp://labs.infragistics.com/jquery/configure

オンライン ヘルプ/APIhttp://bit.ly/Ignite2012Help

関連 Webinarhttp://bit.ly/IGJPWebinars

リソース

Ignite UI グリッド、無償提供中!

http://bit.ly/IgniteUIGrid