Contenu connexe
Similaire à 最新 ASP.NET Web 開発オーバービュー
Similaire à 最新 ASP.NET Web 開発オーバービュー (20)
最新 ASP.NET Web 開発オーバービュー
- 1. 最新 ASP.NET Web 開発
オーバービュー
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (いのうえ あきら)
Blog: blogs.msdn.com/chack
Twitter: @chack411
© 2011 Microsoft Corporation. All rights reserved. 1
- 2. セッションの目的とゴール
Session Objectives and Takeaways
• ASP.NET MVC 3 を中心とした
Web 開発の全体像を把握する
• Visual Studio 2010 と ASP.NET の
Web 開発の魅力 を体感!
© 2011 Microsoft Corporation. All rights reserved. 2
- 3. アジェンダ
• Web 開発の技術トレンド
• ASP.NET と Visual Studio
• ASP.NET MVC 概要
• Razor 構文とヘルパーの利用
• jQuery と Visual Studio
• Web 標準への対応
• ASP.NET MVC 3 on Windows Azure
© 2011 Microsoft Corporation. All rights reserved. 3
- 5. Web 技術トレンド
ECMAScript 5
CSS3
HTML5
jQuery
Ajax
Web API
MVC
RIA
REST Atom
JSON
© 2011 Microsoft Corporation. All rights reserved. 5
- 6. アプリケーション構成のトレンド
WPF
Web API
Win フォーム
HTTP ASP.NET
HTML / JS
Silverlight
REST
JSON
クライアント サーバー
© 2011 Microsoft Corporation. All rights reserved. 6
- 7. Web 開発 プラットフォーム
サーバー サイド クライアント サイド
© 2011 Microsoft Corporation. All rights reserved. 7
- 9. ASP.NET とは?
Web 開発のフレームワーク
• 動的 Web アプリケーションの開発・実行基盤
– サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)
• さまざまな形態の Web 開発に対応
– 個人規模 Web サイト ⇔ 大規模 Web アプリケーション
ASPX
Razor
クライアント
HTML 処理ロジック
動的生成
Web ブラウザー ASP.NET
サーバー
© 2011 Microsoft Corporation. All rights reserved. 9
- 10. ASP.NET と Visual Studio
フレームワーク構成図
Web フォーム
ASP.NET
ASP.NET AJAX
MVC 3
動的データ
ASP.NET 4
.NET Framework 4
© 2011 Microsoft Corporation. All rights reserved. 10
- 11. Web フォーム vs. MVC
それぞれの特徴
D & D 配置 Web フォーム
容易な UI 開発
豊富なサーバー コントロール
イベント駆動型プログラミング
ASP.NET MVC Web 標準志向
テスト駆動開発
HTML ベースの UI 開発
MVC パターン
© 2011 Microsoft Corporation. All rights reserved. 11
- 13. What is MVC ?
デザイン パターン
M V
C
• Model
データとビジネス ロジック を表現
• View
Model から取得したデータを
プレゼンテーション (UI) へ出力する
• Controller
ユーザーからの入力を受付け
View と Model を制御する
© 2011 Microsoft Corporation. All rights reserved. 13
- 14. MVC オーバービュー
Web アプリにおける MVC パターン
1. Controller が
リクエストを受信
HTTP Request Controller 2. Controller が
Model を初期化
3. ビジネス ロジック
を実行
入力と制御
4. Controller が View
を呼び出す Model
プレゼンテーション
データ表現と
View
5. View が Model
HTTP Response を参照 ビジネス ロジック
6. View がレスポンス
を送信
© 2011 Microsoft Corporation. All rights reserved. 14
- 15. ASP.NET MVC 3
最新 Web アプリ開発フレームワーク
• Visual Studio 2010 用の追加コンポーネント
– Web Platform Installer (Web PI) からセットアップ可能
• オープン ソース (CodePlex)
• 主な新機能
– Razor ビュー エンジン の搭載
– ダイナミック ViewBag プロパティ
– グローバル Action Filters
– JsonValueProviderFactory と JSON モデル バインド
– ・・・
© 2011 Microsoft Corporation. All rights reserved. 15
- 16. 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
ASP.NET MVC 3 RTM (2011 年 1 月 13 日)
ASP.NET MVC 3 Tools Update (2011 年 4 月 12 日)
- ランタイム (System.Web.Mvc.dll) は変更なし
© 2011 Microsoft Corporation. All rights reserved. 16
- 17. パッケージ マネージャ
NuGet でゲット! http://nuget.org/
• NuGet (ぬげっと) とは ...
– ヘルパーやオープンソース ライブラリのパッケージ公開と
管理の仕組み
– Visual Studio や WebMatrix のパッケージ マネージャ機能
– GUI / コンソール の 2 通りの利用方法
– NuGet ギャラリーを利用したヘルパーの公開
© 2011 Microsoft Corporation. All rights reserved.
- 18. Razor 構文と
ASP.NET Web ページ
© 2011 Microsoft Corporation. All rights reserved. 18
- 20. ビューの特徴と HTML 生成
埋め込みコード ブロックの利用
• MVC 3 では 2 つの ビュー エンジン が標準搭載
Web フォーム (.aspx)
<div><%: DateTime.Now.ToString() %></div>
<div><%: Html.TextBox("text", Model) %></div>
Razor (.cshtml / .vbhtml)
<div>@DateTime.Now.ToString()</div>
<div>@Html.TextBox("text", Model)</div>
– コーディング ベースのビュー記述
– Web サーバー コントロールは使用しない
(ポストバックや ViewState は使用しない)
– ヘルパー メソッドで HTML タグ ブロックを生成
© 2011 Microsoft Corporation. All rights reserved. 20
- 21. "Razor" とは
Small, Simple, Seamless
• ページ記述のための新しい 構文 (記法)
@{ var title = "Hello Razor"; } .cshtml
<h1>@title</h1>
<ul>
@foreach (var item in products) {
<li>@item.Name</li>
}
</ul>
<p>Time is @DateTime.Now</p>
– シンプル & クリーン
– タイピング量とコード サイズの低減 (vs. PHP, ASPX)
– 便利なヘルパー ライブラリと容易な拡張
– C# (.cshtml), Visual Basic (.vbhtml) をサポート
© 2011 Microsoft Corporation. All rights reserved. 21
- 22. ASP.NET Web ページ とは
Razor 構文で記述するページ定義と処理エンジン
WebMatrix ASP.NET MVC 3
Web サイト Web 開発
作成ツール HTML 生成 フレームワーク
エンジン
ASP.NET Web ページ
Razor HTML
.cshtml
.vbhtml
※ 英語表記では ASP.NET Web Pages
© 2011 Microsoft Corporation. All rights reserved. 22
- 24. ヘルパー とは?
便利な Web パーツ ライブラリ
@Bing.SearchBox()
@Facebook.LikeButton()
@LinkShare.GetHtml() @Twitter.Search()
@GamerCard.GetHtml()
© 2011 Microsoft Corporation. All rights reserved. 24
- 25. 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)
© 2011 Microsoft Corporation. All rights reserved. 25
- 26. カスタム ヘルパーの作成
便利な Web パーツ ライブラリ
• App_Code フォルダ にファイルを作成
ファイル名: <ヘルパー名>.cshtml (または .vbhtml)
• @helper でヘルパーを定義
(@functions で内部関数の定義も可能)
MyHelper.cshtml
@helper Memo(string content) {
<div class="memo">
<p><strong>メモ:</strong>@content</p>
</div>
}
使用例
<html>
@MyHelper.Memo("ヘルパーを作りました!")
</html>
© 2011 Microsoft Corporation. All rights reserved. 26
- 27. カスタム ヘルパーの配布
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 ギャラリー
へ発行
© 2011 Microsoft Corporation. All rights reserved. 27
- 28. jQuery と Visual Studio
© 2011 Microsoft Corporation. All rights reserved. 28
- 29. jQuery のサポート
Visual Studio と jQuery
• 高速・軽量な JavaScript ライブラリ
– DOM / CSS / Ajax 処理を容易に
– オープンソース $(function() {
– 公式サイト - jquery.com });$('#div1').fadeIn('slow');
– 最新バージョンは 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 搭載
© 2011 Microsoft Corporation. All rights reserved.
- 30. jQuery コーディング支援機能
インテリセンスとコード スニペット
• インテリセンス
– オート コンプリート
– オート コレクト
• コード スニペット
– コード ブロックのひな形を挿入
Tab
キー入力
jQuery Code Snippets for Visual Studio 2010 ダウンロード
http://jquerysnippets.codeplex.com/
© 2011 Microsoft Corporation. All rights reserved. 30
- 32. 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 インテリセンス
© 2011 Microsoft Corporation. All rights reserved. 32
- 33. ASP.NET MVC 3
on Windows Azure
© 2011 Microsoft Corporation. All rights reserved. 33
- 34. 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 テンプレート搭載
© 2011 Microsoft Corporation. All rights reserved. 34
- 35. (参考) MVC 3 アプリの配置
依存関係のアセンブリの追加
• 配置可能な依存関係の追加 から
必要なアセンブリを追加可能
• ホスティング サーバーなどに
容易に配置が可能
ビルド時に
bin へコピーされる
© 2011 Microsoft Corporation. All rights reserved. 35
- 38. まとめ
ASP.NET MVC 3
Web 開発フレームワーク
.cshtml
ASP.NET Web ページ .vbhtml
HTML ページ生成エンジン
Razor ヘルパー
Web ページ記述構文 Web パーツ ライブラリ
© 2011 Microsoft Corporation. All rights reserved. 38
- 39. リファレンス #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/
© 2011 Microsoft Corporation. All rights reserved. 39
- 40. リファレンス #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
Phil Haack's Blog (英語)
http://haacked.com/Default.aspx
Scott Hanselman's Blog (英語)
http://www.hanselman.com/blog/
K. Scott Allen's Blog (英語)
http://odetocode.com/Blogs/scott/default.aspx
© 2011 Microsoft Corporation. All rights reserved. 40