[公開用]netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
DESCRIPTION
TRANSCRIPT
![Page 1: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/1.jpg)
2012年2月.NETラボ勉強会
ASP.NET MVC4 Beta 新機能の紹介
Twitter: david9142
Blog: テスターですが何か? http://david9142.wordpress.com/
![Page 2: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/2.jpg)
いつも嫁がお世話に なっております
![Page 3: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/3.jpg)
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは? 今後のASP.NETは?
![Page 4: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/4.jpg)
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは? 今後のASP.NETは?
![Page 5: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/5.jpg)
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
![Page 6: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/6.jpg)
ASP.NETとは?
.NET Framework
ASP.NET MVC WebForm
WCF
ASP.NET
jQuery
![Page 7: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/7.jpg)
ASP.NET MVCの特徴
VB6、ASP.NET WebFormを知らない人に.NETのWeb技術になじみやすくする
.NET Frameworkのバージョンアップと
同期せずに新機能を追加していく
.NET以外のWeb技術との親和性も重視する
![Page 8: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/8.jpg)
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月
クラウド
![Page 9: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/9.jpg)
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは? 今後のASP.NETは?
![Page 10: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/10.jpg)
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 / 実行ファイル
リリースノート • 英語 / 日本語(非公式)
![Page 11: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/11.jpg)
ASP.NET MVC4のテーマ
多様なデバイス
多様なアプリケーション
![Page 12: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/12.jpg)
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
![Page 13: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/13.jpg)
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
![Page 14: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/14.jpg)
新プロジェクトテンプレート
Empty Internet
Application
Intranet Application
Web API
Mobile
Single Page Application
![Page 15: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/15.jpg)
新プロジェクトテンプレート
![Page 16: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/16.jpg)
Empty
JavaScript(jQuery, Modernizr, Knockout)、CSSが含まれている以外は何もないプロジェクト
Controller, Viewもゼロから自分で作成する
![Page 17: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/17.jpg)
Internet Application
• テンプレートを準備、デザインが現代的に
トップページに何をすべきか書いてある
• jQueryUIを使用したログインダイアログ
→正式版はOAuth2に対応?
• セマンティックHTMLタグ
→文書構造に意味を持たせる 例: <header>, <footer>, <section>, <nav>
• View-portを使用したadaptive rendering
→モバイルブラウザでも見やすい
![Page 18: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/18.jpg)
(Demo) Internet Application Template
PC
![Page 19: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/19.jpg)
(Demo) Internet Application Template
SmartPhone
![Page 20: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/20.jpg)
Intranet Application
• Windows認証用テンプレート
• Readme.txtにIISの設定手順が書いてある
「IIS8」という記述が
• _Layout.cshtmlで認証済ユーザー名を表示 <section id="login">
Hello, <span class="username">@User.Identity.Name</span>!
</section>
![Page 21: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/21.jpg)
Internet Application画面
![Page 22: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/22.jpg)
Mobile
• テンプレートにjQuery Mobileが統合されている
• Controller, Modelはこれまでのテンプレートと同じ、View(cshtml/vbhtml)のみ異なる
• jQuery Mobile
→スマートフォンやタブレットなど、タッチ操作に最適化されたWeb UI フレームワーク
(Touch-Optimized Web Framework for Smartphones & Tablets)
![Page 23: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/23.jpg)
(Demo) Mobile Template
![Page 24: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/24.jpg)
Web API
• URLベースのRESTfulサービスを作成するテンプレート
• ページのないAPIを作るために使用
• ControllerはApiControllerを継承
• Route、Filterもサポート
• データ形式はクライアントから指定(デフォルトはJSON、Acceptヘッダーで判断)
• IQueryable<T>でODataURL記述可能
![Page 25: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/25.jpg)
Web APIの利用シーン
ASP.NET MVC Web API
Mobile App
Destop App
Web Service
JSON, XML
JSON, XML
![Page 26: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/26.jpg)
(Demo) Web API Template
![Page 27: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/27.jpg)
Single Page Application
• クライアントサイトのJavaScriptをベースとしたリッチなUIを持ったページを作成するテンプレート
• JavaScriptから非同期でWebAPIの呼び出しを行い、データの操作を行う
• ライブラリにはknockout.js, history.js, upshot.js, nav.jsを利用
• MVVM、MetroのHTML+JavaScirptアプリと考え方が近い?
![Page 28: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/28.jpg)
Single Page Application構成
cshtml (HTML) DB WebAPI
ページ遷移を行わない1つのHTMLでCRUD
操作
Javascriptで 非同期通信
CodeFirstで 自動生成
DbDataController を継承
![Page 29: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/29.jpg)
(Demo) Single Page Application
![Page 30: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/30.jpg)
まとめ(プロジェクトテンプレート)
• テンプレートが増え、目的のアプリケーションを作るための手順が簡素化されつつある
• テンプレートは違っても基本はMVC(Controllerでリクエストを受けて、Viewに表示する)
• MS製オレオレライブラリを使用していない(たぶん)ライブラリの知識は流用可能
![Page 31: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/31.jpg)
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
![Page 32: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/32.jpg)
Display Modes
• 複数の種類のView(_Layout)を用意し、リクエストのあったデバイスの種類に応じてViewを切り替える機能。
PCブラウザ → Index.cshtml
iOS → Index.iOS.cshtml
Android → Index.Android.cshtml
Nintendo 3DS → Index.N3DS.cshtml
※Controllerは共通
![Page 33: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/33.jpg)
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アクションメソッド
![Page 34: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/34.jpg)
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)
});
![Page 35: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/35.jpg)
(Demo)Display Modes
![Page 36: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/36.jpg)
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
![Page 37: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/37.jpg)
Browser Overriding
• サーバー側でリクエストのあったブラウザの定義を上書きし、別のブラウザからリクエストを受けたかのように振る舞う機能
• User-Agent文字列を上書き
• PCブラウザからのリクエストをモバイル端末から、モバイル端末からのリクエストをPCブラウザからのリクエストとして処理が可能
![Page 38: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/38.jpg)
View Switcher
モバイル用/デスクトップ用のViewを切り替える機能、「スマートフォンの方はこちら」「PCの方はこちら」のリンクをページに表示することができる。
![Page 39: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/39.jpg)
View Switcher設定手順
• Nugetパッケージのインストール
「Install-Package jQuery.Mobile.MVC」
• デスクトップ用のViewにViewSwitcherの設定を記述
<body> @Html.Partial("_ViewSwitcher")
※モバイル用Viewに設定はあるが、PC用Viewにはないので、PC→モバイルの切り替えができないため
![Page 40: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/40.jpg)
(Demo) ViewSwitcher
![Page 41: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/41.jpg)
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(後述)に期待です。
![Page 42: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/42.jpg)
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
![Page 43: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/43.jpg)
Recipe
• Visual Studioの拡張機能でコードの自動生成などを行う
• Controller、View追加時の自動生成コードロジックを変更(置き換え)可能
• Nugetパッケージとして配布可能
![Page 44: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/44.jpg)
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()
});
}
![Page 45: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/45.jpg)
Windows Azure Integration
Azure SDK 1.5(2011年9月)から、ASP.NET MVC4アプリをWindows Azureで動作させることが可能
![Page 46: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/46.jpg)
本セッションについて
これまでのASP.NET / ASP.NET MVC
ASP.NET MVC4 Betaの新機能
WebFormは? 今後のASP.NETは?
![Page 47: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/47.jpg)
学習用コンテンツ
• ASP.NET Web API
• ASP.NET Single Page Application
• チュートリアル: ASP.NET MVC 4 Mobile Features (日本語版)
• 新 ASP.NET MVC 4 チュートリアル シリーズ
![Page 48: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/48.jpg)
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になるはず
![Page 49: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/49.jpg)
A look at ASP.NET MVC 4
Tech Days 2012でScott GathrieがASP.NET4について
しゃべっています
![Page 50: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/50.jpg)
WebFormは? WCFは?
• WebFormって「Classis ASP.NET」って呼ばれてレガシー扱いされてしまうんですか?
• MVC4のWeb APIがあればWCFって要らないんじゃ?
![Page 51: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/51.jpg)
WebForm
• そもそものアプローチが違う、考え方の異なるフレームワークに移行するリスク
VB、WinForm → WebForm
ASP、Java、PHP etc → MVC
• 4.5でも新機能を提供しており、「移行すべき」レガシースキルにはなっていない
• 10年分のノウハウの蓄積(MVCは3年)
![Page 52: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/52.jpg)
WCF
• HTTP以外の通信も可能(なはず) (ASP.NET 4.5でWebSocketがサポートされますが)
• WCF RIA Service / Data Service
正直よくわからない、JSON形式のデータを返すだけならMVC3でも
簡単に実現できていたので、WCFをあまり使ったことがないので。
![Page 53: [公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://reader033.vdocuments.site/reader033/viewer/2022061214/549a382eac795982318b4fca/html5/thumbnails/53.jpg)
まとめ
• MVC4になって各種デバイス対応 / アプリに対応しやすくなった。
• WebFormもMVCも同じASP.NET上で動作する
• ASP.NET4.5になり、WebFormも進化する
• 目的、手段、学習コスト、情報量、リスクから、どんな技術を使うのかは自分の判断