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も進化する

• 目的、手段、学習コスト、情報量、リスクから、どんな技術を使うのかは自分の判断