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

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

セッションレベル : 200 – Basic
Daizen Ikehara : Marketing & Developer Evangelist
dikehara@infragistics.com
Twitter @Neri78

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

Blog

Build Richer Apps
Reach More Clients

Ignite UI 概要

JavaScript and ASP.NET MVC

開発生産性への取り組み

まとめ

Ignite UI

JavaScript & HTML5 UI フレームワーク

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

HTML5 機能を活用

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

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

Javascript または ASP.NET MVC に対応

サンプルブラウザー
http://samples.jp.infragistics.com/jquery/

Demo

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

• 階層表示機能

• フィルタリング

• グループ化

• 集計

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

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

• 多様な
チャートタイプ

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

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

• ズーム & パン

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

モバイル
• jQuery
Mobile UI
• 様々なベース
コントロールを
提供

jQuery UI vs jQuery Mobile

jQuery UI jQuery Mobile

対応コントロール対応コントロール
デスクトップブラウザーへモバイルデバイス最優先

の対応・ボタン

・リッチコントロール・スライダー

・ピボットグリッド・ページヘッダー

・HTML エディター・ナビゲーションバー

・マップ

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

JavaScript, ASP.NET MVC 比較

Demo

開発生産性
への
取り組み

Infragistics Loader

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

Infragistics Loader

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

Infragistics Loader

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

<script type="text/javascript"> 読み込み
// igLoader の読み込みリソース
$.ig.loader({
scriptPath: 'Scripts/IG',
cssPath: 'Content/IG',
resources: 'igGrid.*',
ready: function () {
// Do something
}
}); コンポーネント
</script> 呼び出しなどの処理

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

Control Tuner (Beta)

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

Infragistics Loader / Control Tuner

Demo

Windows
Phone
jQuery iOS

WPF WinRT(XAML)

WinRT(HTML)
Silverlight
Core Data
Visualization
API

Cross Platform Shared Code Strategy

• APIセットの共通化
– マルチプラットフォーム開発でのコスト低減

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

単独 APIセット共有
共通部分 Silverlight Windows Phone WPF jQuery

まとめ

デバイス、プラットフォーム対応への
対応策の 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/infographic
s/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 Configuration
http://labs.infragistics.com/jquery/configure
 オンラインヘルプ/API
http://help.jp.infragistics.com/NetAdvantage/
jQuery/2012.2/CLR4.0/default.aspx
http://help.infragistics.com/jQuery/2012.2/

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

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

More Related Content

What's hot

Viewers also liked

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

More from Daizen Ikehara

Recently uploaded

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