View
4.250
Download
5
Category
Preview:
DESCRIPTION
Citation preview
2012年2月.NETラボ勉強会
ASP.NET MVC4 Beta 新機能の紹介
Twitter: david9142
Blog: テスターですが何か？ http://david9142.wordpress.com/
いつも嫁がお世話に なっております
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは？ 今後のASP.NETは？
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは？ 今後のASP.NETは？
ASP.NET の歴史
1.0/1.1 2.0 4.0
.NET
WebForm
MVC
1.0/1.1
2002年
2.0
2005年
3.0 3.5
2006年 2008年
4.0
2010年 2012年？
4.5
4.5
1 2 3 4
ASP.NET AJAX XML Web Service
WCF
EntityFramework
jQuery
Windows Azure
WebMatrix
ASP.NETとは？
.NET Framework
ASP.NET MVC WebForm
WCF
ASP.NET
jQuery
ASP.NET MVCの特徴
VB6、ASP.NET WebFormを知らない人に.NETのWeb技術になじみやすくする
.NET Frameworkのバージョンアップと
同期せずに新機能を追加していく
.NET以外のWeb技術との親和性も重視する
ASP.NET MVCの歴史
MVC1 MVC2 MVC3 MVC4(β)
jQuery
jQuery Mobile Razor Scafforlding
ASP.NET MVC
iPhone Android
iPad
ケータイブラウザ
REST API Ajax
EntityFramework Code First
2009年3月 2010年3月 2011年1月
Nuget
2012年2月
クラウド
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは？ 今後のASP.NETは？
ASP.NET MVC4 Beta
システム要件 • Windows 7 / Vista SP2 / XP SP3
• Windows Server 2003 R2 / SP2
• Windows Server 2008 / 2008 R2
• PowerShell 2.0
• Visual Studio 2010 sp1 / Visual Web Developer 2010 sp1
インストール方法 • Web PI / 実行ファイル
リリースノート • 英語 / 日本語(非公式)
ASP.NET MVC4のテーマ
多様なデバイス
多様なアプリケーション
ASP.NET MVC4の新機能
NEW Project Template
Internet, Intranet, Web API,
Single Page Application, Mobile
Browser Overriding View Switcher
Display Modes
Recipe, Asynchronous
Controller, Windows Azure
ASP.NET MVC4の新機能
NEW Project Template
Internet, Intranet, Web API,
Single Page Application, Mobile
Browser Overriding View Switcher
Display Modes
Recipe Asynchronous
Controller Windows Azure
新プロジェクトテンプレート
Empty Internet
Application
Intranet Application
Web API
Mobile
Single Page Application
新プロジェクトテンプレート
Empty
JavaScript(jQuery, Modernizr, Knockout)、CSSが含まれている以外は何もないプロジェクト
Controller, Viewもゼロから自分で作成する
Internet Application
• テンプレートを準備、デザインが現代的に
トップページに何をすべきか書いてある
• jQueryUIを使用したログインダイアログ
→正式版はOAuth2に対応？
• セマンティックHTMLタグ
→文書構造に意味を持たせる 例: <header>, <footer>, <section>, <nav>
• View-portを使用したadaptive rendering
→モバイルブラウザでも見やすい
(Demo) Internet Application Template
PC
(Demo) Internet Application Template
SmartPhone
Intranet Application
• Windows認証用テンプレート
• Readme.txtにIISの設定手順が書いてある
「IIS8」という記述が
• _Layout.cshtmlで認証済ユーザー名を表示 <section id="login">
Hello, <span class="username">@User.Identity.Name</span>!
</section>
Internet Application画面
Mobile
• テンプレートにjQuery Mobileが統合されている
• Controller, Modelはこれまでのテンプレートと同じ、View(cshtml/vbhtml)のみ異なる
• jQuery Mobile
→スマートフォンやタブレットなど、タッチ操作に最適化されたWeb UI フレームワーク
（Touch-Optimized Web Framework for Smartphones & Tablets）
(Demo) Mobile Template
Web API
• URLベースのRESTfulサービスを作成するテンプレート
• ページのないAPIを作るために使用
• ControllerはApiControllerを継承
• Route、Filterもサポート
• データ形式はクライアントから指定（デフォルトはJSON、Acceptヘッダーで判断）
• IQueryable<T>でODataURL記述可能
Web APIの利用シーン
ASP.NET MVC Web API
Mobile App
Destop App
Web Service
JSON, XML
JSON, XML
(Demo) Web API Template
Single Page Application
• クライアントサイトのJavaScriptをベースとしたリッチなUIを持ったページを作成するテンプレート
• JavaScriptから非同期でWebAPIの呼び出しを行い、データの操作を行う
• ライブラリにはknockout.js, history.js, upshot.js, nav.jsを利用
• MVVM、MetroのHTML+JavaScirptアプリと考え方が近い？
Single Page Application構成
cshtml (HTML) DB WebAPI
ページ遷移を行わない1つのHTMLでCRUD
操作
Javascriptで 非同期通信
CodeFirstで 自動生成
DbDataController を継承
(Demo) Single Page Application
まとめ（プロジェクトテンプレート）
• テンプレートが増え、目的のアプリケーションを作るための手順が簡素化されつつある
• テンプレートは違っても基本はMVC(Controllerでリクエストを受けて、Viewに表示する）
• MS製オレオレライブラリを使用していない（たぶん）ライブラリの知識は流用可能
ASP.NET MVC4の新機能
NEW Project Template
Internet, Intranet, Web API,
Single Page Application, Mobile
Browser Overriding View Switcher
Display Modes
Recipe Asynchronous
Controller Windows Azure
Display Modes
• 複数の種類のView(_Layout)を用意し、リクエストのあったデバイスの種類に応じてViewを切り替える機能。
PCブラウザ → Index.cshtml
iOS → Index.iOS.cshtml
Android → Index.Android.cshtml
Nintendo 3DS → Index.N3DS.cshtml
※Controllerは共通
Display Modes(イメージ)
Index.cshtml
Index.iOS.cshtml
Index.Android.cshtml
Index.N3DS.cshtml
PC iOS Android 3DS
Index.cshtml Index.iOS.cshtml
Index.Android.cshtml Index.N3DS.cshtml
リクエストはいずれもIndexアクションメソッド
Display Modes 定義方法
Global.asax.csのApplication_Startメソッドに記述 DisplayModeProvider.Instance.Modes.Insert(0, new
DefaultDisplayMode("iOS")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("iOS", StringComparison.OrdinalIgnoreCase) >= 0)
});
DisplayModeProvider.Instance.Modes.Insert(1, new
DefaultDisplayMode("Android")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("Android", StringComparison.OrdinalIgnoreCase) >= 0)
});
(Demo)Display Modes
ASP.NET MVC4の新機能
NEW Project Template
Internet, Intranet, Web API,
Single Page Application, Mobile
Browser Overriding View Switcher
Display Modes
Recipe Asynchronous
Controller Windows Azure
Browser Overriding
• サーバー側でリクエストのあったブラウザの定義を上書きし、別のブラウザからリクエストを受けたかのように振る舞う機能
• User-Agent文字列を上書き
• PCブラウザからのリクエストをモバイル端末から、モバイル端末からのリクエストをPCブラウザからのリクエストとして処理が可能
View Switcher
モバイル用/デスクトップ用のViewを切り替える機能、「スマートフォンの方はこちら」「PCの方はこちら」のリンクをページに表示することができる。
View Switcher設定手順
• Nugetパッケージのインストール
「Install-Package jQuery.Mobile.MVC」
• デスクトップ用のViewにViewSwitcherの設定を記述
<body> @Html.Partial("_ViewSwitcher")
※モバイル用Viewに設定はあるが、PC用Viewにはないので、PC→モバイルの切り替えができないため
(Demo) ViewSwitcher
Android ･ﾟ･(つД｀)･ﾟ･
そうですか、Androidはモバイルデバイスじゃないんですか orz
_ViewSwitcher.cshtmlの1行目”Request.Browser.IsMobileDevice”
がAndroidだとFalseになります。
このプロパティはMVC固有ではなく、ASP.NETコア機能です。
Browserファイル (C:¥Windows¥Microsoft.NET¥Framework64¥v4.0.30319¥Config¥Browsers)
をもとに判定しており、ASP.NET4のBrowserファイルには
Androidの定義がありません。ASP.NET4リリース時(2010年4月)は
Android 2.0なので、開発中は無視されたんでしょう。
ASP.NET 4.5（後述）に期待です。
ASP.NET MVC4の新機能
NEW Project Template
Internet, Intranet, Web API,
Single Page Application, Mobile
Browser Overriding View Switcher
Display Modes
Recipe Asynchronous
Controller Windows Azure
Recipe
• Visual Studioの拡張機能でコードの自動生成などを行う
• Controller、View追加時の自動生成コードロジックを変更（置き換え）可能
• Nugetパッケージとして配布可能
Asynchronous Controller
• .NET 4.5の機能async/await構文
• Controller内の処理を非同期で実行可能（ViewとControllerが非同期通信することとは別）
public async Task<ActionResult> Index(string city) {
var newsService = new NewsService();
var sportsService = new SportsService();
return View("Common",
new PortalViewModel {
NewsHeadlines = await newsService.GetHeadlinesAsync(),
SportsScores = await sportsService.GetScoresAsync()
});
}
Windows Azure Integration
Azure SDK 1.5(2011年9月)から、ASP.NET MVC4アプリをWindows Azureで動作させることが可能
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは？ 今後のASP.NETは？
学習用コンテンツ
• ASP.NET Web API
• ASP.NET Single Page Application
• チュートリアル: ASP.NET MVC 4 Mobile Features （日本語版）
• 新 ASP.NET MVC 4 チュートリアル シリーズ
ASP.NET 4.5 Developer Preview
What's New in ASP.NET 4.5 and Visual Web Developer 11 Developer Preview
ASP.NETコア機能、ASP.NET WebForm、ASP.NET MVC、Visual Studioの新機能紹介
29日に.NET Framwork 4.5 Betaが公開されるので、ASP.NET 4.5もBetaになるはず
A look at ASP.NET MVC 4
Tech Days 2012でScott GathrieがASP.NET4について
しゃべっています
WebFormは? WCFは?
• WebFormって「Classis ASP.NET」って呼ばれてレガシー扱いされてしまうんですか？
• MVC4のWeb APIがあればWCFって要らないんじゃ？
WebForm
• そもそものアプローチが違う、考え方の異なるフレームワークに移行するリスク
VB、WinForm → WebForm
ASP、Java、PHP etc → MVC
• 4.5でも新機能を提供しており、「移行すべき」レガシースキルにはなっていない
• 10年分のノウハウの蓄積（MVCは3年）
WCF
• HTTP以外の通信も可能（なはず） （ASP.NET 4.5でWebSocketがサポートされますが）
• WCF RIA Service / Data Service
正直よくわからない、JSON形式のデータを返すだけならMVC3でも
簡単に実現できていたので、WCFをあまり使ったことがないので。
まとめ
• MVC4になって各種デバイス対応 / アプリに対応しやすくなった。
• WebFormもMVCも同じASP.NET上で動作する
• ASP.NET4.5になり、WebFormも進化する
• 目的、手段、学習コスト、情報量、リスクから、どんな技術を使うのかは自分の判断
Recommended