jQuery/HTML5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発

セッションレベル : 200 – Basic

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

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

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

Microsoft MVP for Development Platforms

Client App Dev 2010/04 – 2013/03

自己紹介

Blog

Build Richer AppsReach More Clients

Ignite UI 概要

JavaScript and ASP.NET MVC

開発生産性への取り組み

まとめ

Ignite UI概要

Ignite UI

JavaScript & HTML5 UI フレームワーク

jQuery UI, jQuery Mobile ベースコントロール

HTML5 機能を活用

業務要件に必要なコントロール

モバイル対応コントロール

Javascript または ASP.NET MVC に対応

Demo

サンプルブラウザー

http://samples.jp.infragistics.com/jquery/

igGrid

• 軽量化・仮想化された高パフォーマンスグリッド

• 階層表示機能

• フィルタリング

• グループ化

• 集計

LOB (業務用）アプリケーションに対応

igChart

• パフォーマンスHTML5 チャート

• 多様なチャートタイプ

• モーションフレームワークによる動的変更

igMap

• パフォーマンスHTML5マップ

• ズーム & パン

• 地理情報サービスとの連携

モバイル

• jQuery Mobile UI

• 様々なベースコントロールを提供

jQuery UI vs jQuery Mobile

jQuery UI

対応コントロール

デスクトップ ブラウザーへ

の対応

・リッチ コントロール

・ピボット グリッド

・HTML エディター

・マップ

jQuery Mobile

対応コントロール

モバイル デバイス最優先

・ボタン

・スライダー

・ページヘッダー

・ナビゲーションバー

JavaScriptand

ASP.NET MVC

実装オプション

2 通りの UI 記述方法

JavaScript (jQuery)

ASP.NET MVC Razor

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"

}]

});

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"))

)

Demo

JavaScript, ASP.NET MVC 比較

開発生産性への

取り組み

Infragistics Loader

• JavaScript ライブラリーを利用する場合スクリプト ファイル、CSS ファイルの参照が必要

Infragistics Loader

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

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

Infragistics Loader

• コード記述時にローダーを呼び出し

• ASP.NET MVC ラッパーも同様

<script type="text/javascript">// igLoader の読み込み$.ig.loader({

scriptPath: 'Scripts/IG',cssPath: 'Content/IG',resources: 'igGrid.*',ready: function () {

// Do something}

});</script>

読み込みリソース

コンポーネント呼び出しなどの処理

Control Tuner (Beta)

• http://labs.infragistics.com/jquery/configure/

• プロパティウィンドウを設定しコントロールのデザインが可能

• 生成されたコードをコピー & ペースト

Demo

Infragistics Loader / Control Tuner

Core Data

Visualization

API

Silverlight

WPF

jQuery

Windows

Phone

iOS

WinRT(XAML)

WinRT(HTML)

Cross Platform Shared Code Strategy

• APIセットの共通化

– マルチプラットフォーム開発でのコスト低減

単独 APIセット共有

共通部分 Silverlight Windows Phone WPF jQuery

API共通化による学習・開発コストの削減

まとめ

まとめ

デバイス、プラットフォーム対応への

対応策の 1 つ

• jQuery UI, jQuery Mobile の活用

• ASP.NET MVC

UI コンポーネント利用での開発

•高機能、高パフォーマンス

•開発生産性を考慮

インフラジスティックス Webinar

• http://jp.infragistics.com/resources/webinars.aspx

• オンラインセミナーを開催中

– 新機能紹介

– コントロール利用方法チュートリアルなど

igGrid 入門

igChart 入門

近日セッションビデオを公開予定

その他 Webinar も計画中

HTML5 HTML5 チート シート

http://www.inmotionhosting.com/infographics/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 Configurationhttp://labs.infragistics.com/jquery/configure

オンライン ヘルプ/APIhttp://help.jp.infragistics.com/NetAdvantage/jQuery/2012.2/CLR4.0/default.aspx

http://help.infragistics.com/jQuery/2012.2/

リソース