最新 asp.net web 開発オーバービュー

© 2011 Microsoft Corporation. All rights reserved.

最新 ASP.NET Web 開発オーバービュー

日本マイクロソフト株式会社

デベロッパー＆プラットフォーム統括本部

エバンジェリスト

井上章 (いのうえあきら)

Blog: blogs.msdn.com/chack

Twitter: @chack411 1


セッションの目的とゴール Session Objectives and Takeaways

2

• ASP.NET MVC 3 を中心とした Web 開発の全体像を把握する

• Visual Studio 2010 と ASP.NET の Web 開発の魅力を体感！


アジェンダ

3

• Web 開発の技術トレンド

• ASP.NET と Visual Studio

• ASP.NET MVC 概要

• Razor 構文とヘルパーの利用

• jQuery と Visual Studio

• Web 標準への対応

• ASP.NET MVC 3 on Windows Azure


Web 開発の技術トレンド

4


Web 技術トレンド

5

HTML5 CSS3

ECMAScript 5

Ajax jQuery

Web API MVC

REST JSON

RIA

Atom


アプリケーション構成のトレンド

6

クライアントサーバー

WPF Win フォーム

HTML / JS Silverlight

ASP.NET

Web API

HTTP REST JSON


Web 開発プラットフォーム

7

サーバーサイドクライアントサイド


ASP.NET と Visual Studio

8


ASP.NET とは？ Web 開発のフレームワーク

• 動的 Web アプリケーションの開発・実行基盤 – サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)

• さまざまな形態の Web 開発に対応 – 個人規模 Web サイト ⇔ 大規模 Web アプリケーション

9

クライアント

Web ブラウザー

処理ロジック

ASPX

HTML

ASP.NET

動的生成

Razor

サーバー


ASP.NET と Visual Studio フレームワーク構成図

10

.NET Framework 4

ASP.NET 4

Web フォーム ASP.NET MVC 3

ASP.NET AJAX

動的データ


Web フォーム vs. MVC それぞれの特徴

11

Web フォーム

豊富なサーバーコントロール

イベント駆動型プログラミング

ASP.NET MVC

HTML ベースの UI 開発

MVC パターン

D & D 配置容易な UI 開発

Web 標準志向テスト駆動開発


ASP.NET MVC 概要

12


What is MVC ? デザインパターン

• Model データとビジネスロジックを表現

• View Model から取得したデータをプレゼンテーション (UI) へ出力する

• Controller ユーザーからの入力を受付け View と Model を制御する

M C

V

13


MVC オーバービュー Web アプリにおける MVC パターン

14

HTTP Request

1. Controller がリクエストを受信

2. Controller が Model を初期化

3. ビジネスロジックを実行

4. Controller が View を呼び出す

5. View が Model を参照

6. View がレスポンスを送信

Model

Controller

View HTTP Response

入力と制御

プレゼンテーション

データ表現とビジネスロジック


ASP.NET MVC 3 最新 Web アプリ開発フレームワーク

• Visual Studio 2010 用の追加コンポーネント – Web Platform Installer (Web PI) からセットアップ可能

• オープンソース (CodePlex)

• 主な新機能 – Razor ビューエンジンの搭載

– ダイナミック ViewBag プロパティ

– グローバル Action Filters

– JsonValueProviderFactory と JSON モデルバインド

– ・・・

15

http://www.microsoft.com/web/downloads/platform.aspx

http://aspnet.codeplex.com/wikipage?title=MVC&referringTitle=Home


ASP.NET MVC 3 Tools Update プロジェクトテンプレート機能強化

• HTML5 / CSS3 対応プロジェクトテンプレート

• Windows 認証対応プロジェクトテンプレート

• スキャフォールディング機能の強化

• 標準搭載コンポーネントの強化と NuGet 対応

– Entity Framework 4.1

– jQuery 1.5.1

– jQuery Validation 1.8.0

– jQuery UI 1.8.11

– Modernizr

16

ASP.NET MVC 3 RTM (2011 年 1 月 13 日) ASP.NET MVC 3 Tools Update (2011 年 4 月 12 日)

- ランタイム (System.Web.Mvc.dll) は変更なし


パッケージマネージャ NuGet でゲット！

• NuGet (ぬげっと) とは ... – ヘルパーやオープンソースライブラリのパッケージ公開と

管理の仕組み

– Visual Studio や WebMatrix のパッケージマネージャ機能

– GUI / コンソールの 2 通りの利用方法

– NuGet ギャラリーを利用したヘルパーの公開

http://nuget.org/

http://nuget.org/


Razor 構文と ASP.NET Web ページ

18


Razor (レイザー) !


ビューの特徴と HTML 生成埋め込みコードブロックの利用

• MVC 3 では 2 つのビューエンジンが標準搭載

Web フォーム (.aspx)

Razor (.cshtml / .vbhtml)

– コーディングベースのビュー記述

– Web サーバーコントロールは使用しない (ポストバックや ViewState は使用しない)

– ヘルパーメソッドで HTML タグブロックを生成

<div><%: DateTime.Now.ToString() %></div> <div><%: Html.TextBox("text", Model) %></div>

20

<div>@DateTime.Now.ToString()</div> <div>@Html.TextBox("text", Model)</div>


"Razor" とは Small, Simple, Seamless

• ページ記述のための新しい構文 (記法)

– シンプル & クリーン

– タイピング量とコードサイズの低減 (vs. PHP, ASPX)

– 便利なヘルパーライブラリと容易な拡張

– C# (.cshtml), Visual Basic (.vbhtml) をサポート

21

@{ var title = "Hello Razor"; } <h1>@title</h1> <ul> @foreach (var item in products) { <li>@item.Name</li> } </ul> <p>Time is @DateTime.Now</p>

.cshtml


ASP.NET Web ページとは Razor 構文で記述するページ定義と処理エンジン

22

WebMatrix

ASP.NET Web ページ

Razor HTML

ASP.NET MVC 3

Web サイト作成ツール

Web 開発フレームワーク

.cshtml .vbhtml

※ 英語表記では ASP.NET Web Pages

HTML 生成エンジン


ヘルパーの利用

23


ヘルパーとは？便利な Web パーツライブラリ

24

@Bing.SearchBox()

@Facebook.LikeButton()

@LinkShare.GetHtml() @Twitter.Search()

@GamerCard.GetHtml()


MVC 標準ヘルパーメソッド HTML 生成を助ける関数群

メソッド名概要

ActionLink アクション名などから a タグを生成

BeginForm form タグを生成

TextBox input タグによる入力フィールドを生成

TextBoxFor

…

…

@Html.ActionLink("Go to Home", "Index") @Html.TextBox("message", model.Message) @Html.TextBoxFor(model => model.Message)

使用例

25


カスタムヘルパーの作成便利な Web パーツライブラリ

• App_Code フォルダにファイルを作成ファイル名: <ヘルパー名>.cshtml (または .vbhtml)

• @helper でヘルパーを定義 (@functions で内部関数の定義も可能)

26

@helper Memo(string content) { <div class="memo"> <p><strong>メモ：</strong>@content</p> </div> }

<html> @MyHelper.Memo("ヘルパーを作りました！") </html>

MyHelper.cshtml

使用例


カスタムヘルパーの配布 NuGet ギャラリーへの公開

• カスタムヘルパーの登録方法 1. NuGet ギャラリーサイト (www.nuget.org) で

ユーザー登録

2. NuGet Package Explorer または NuGet.exe をダウンロード

• CodePlex - NuGet プロジェクト : http://nuget.codeplex.com/releases

3. 作成したヘルパーに必要なファイル群をパッケージング (.nupkg)

4. NuGet ギャラリーの My Account ページから Access Key を入手

5. 上記ツールで Access Key を使って NuGet ギャラリーへ発行

27

http://www.nuget.org/

http://nuget.codeplex.com/releases

http://nuget.codeplex.com/releases


jQuery と Visual Studio

28


jQuery のサポート Visual Studio と jQuery

• 高速・軽量な JavaScript ライブラリ

– DOM / CSS / Ajax 処理を容易に

– オープンソース

– 公式サイト - jquery.com

– 最新バージョンは 1.6.2

• Visual Studio と jQuery – Visual Studio 2010 & ASP.NET 4

• jQuery 1.4.1 標準搭載

– ASP.NET MVC 3 Tools Update

• jQuery 1.5.1 & jQuery UI 1.8.11 搭載

$(function() { $('#div1').fadeIn('slow'); });

http://jquery.com/


jQuery コーディング支援機能インテリセンスとコードスニペット

• インテリセンス – オートコンプリート – オートコレクト

• コードスニペット – コードブロックのひな形を挿入

30

Tab キー入力

jQuery Code Snippets for Visual Studio 2010 ダウンロード http://jquerysnippets.codeplex.com/

http://jquerysnippets.codeplex.com/




Visual Studio 2010 Web 標準への対応

31


Visual Studio 2010 と Web 標準 HTML5 / CSS3 を使う

• Web Standards Update for Visual Studio 2010 SP1 (無償)

– 拡張機能マネージャーまたは Visual Studio ギャラリー http://visualstudiogallery.msdn.microsoft.com/ から入手してインストール

– HTML5 / CSS3 スキーマによるインテリセンスと検証

– GeoLocation & Local Storage API インテリセンス

32

http://visualstudiogallery.msdn.microsoft.com/

http://visualstudiogallery.msdn.microsoft.com/


ASP.NET MVC 3 on Windows Azure

33


Azure で ASP.NET MVC 3 MVC 3 Web Role テンプレート

• Windows Azure Tools for Visual Studio 2010 v1.4 (August 2011 Release)

– ダウンロードは Web Platform Installer (Web PI) から可能

– ASP.NET MVC 3 Web Role テンプレート搭載

34


(参考) MVC 3 アプリの配置依存関係のアセンブリの追加

• 配置可能な依存関係の追加から必要なアセンブリを追加可能

• ホスティングサーバーなどに容易に配置が可能

35

ビルド時に bin へコピーされる

Edtter を作ろう！ハンズオンラボテキスト＆サンプル公開中

36

• ダウンロード： http://edtter.codeplex.com/

• サンプルが Windows Azure 上で期間限定公開中： http://www.edtter.com/


まとめ

37


まとめ

38

ASP.NET Web ページ .cshtml .vbhtml

HTML ページ生成エンジン

Razor Web ページ記述構文

ヘルパー

Web パーツライブラリ

ASP.NET MVC 3 Web 開発フレームワーク


リファレンス #1 Microsoft Web Platform http://www.microsoft.com/web/

MSDN ASP.NET デベロッパーセンター http://msdn.microsoft.com/ja-jp/asp.net/default.aspx

ASP.NET MVC 3 ダウンロード http://www.microsoft.com/downloads/details.aspx?FamilyID=d2928bc1-f48c-4e95-a064-2a455a22c8f6&displayLang=ja

ASP.NET MVC チュートリアル http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx

ASP.NET MVC サンプルソースコード～ Edtter ～ http://edtter.codeplex.com/

THE TRUTH IS OUT THERE ～井上章のブログ～ http://blogs.msdn.com/chack/

39

http://www.microsoft.com/web/

http://www.microsoft.com/web/

http://msdn.microsoft.com/ja-jp/asp.net/default.aspx




http://www.microsoft.com/downloads/details.aspx?FamilyID=d2928bc1-f48c-4e95-a064-2a455a22c8f6&displayLang=ja










http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx




http://edtter.codeplex.com/

http://blogs.msdn.com/chack/

http://blogs.msdn.com/chack/


リファレンス #2 ASP.NET MVC: The Official Microsoft ASP.NET Site (英語) http://www.asp.net/mvc

CodePlex - ASP.NET MVC (英語) http://aspnet.codeplex.com/wikipage?title=MVC

ScottGu's Blog (英語) http://weblogs.asp.net/scottgu/default.aspx

Scott Hanselman's Blog (英語) http://www.hanselman.com/blog/

K. Scott Allen's Blog (英語) http://odetocode.com/Blogs/scott/default.aspx

Phil Haack's Blog (英語) http://haacked.com/Default.aspx

40

http://www.asp.net/mvc

http://www.asp.net/mvc

http://aspnet.codeplex.com/wikipage?title=MVC

http://aspnet.codeplex.com/wikipage?title=MVC

http://weblogs.asp.net/scottgu/default.aspx

http://weblogs.asp.net/scottgu/default.aspx

http://www.hanselman.com/blog/

http://www.hanselman.com/blog/

http://odetocode.com/Blogs/scott/default.aspx

http://odetocode.com/Blogs/scott/default.aspx

http://haacked.com/Default.aspx

最新 asp.net web 開発オーバービュー

Technology