最新 ASP.NET Web 開発                  オーバービュー                           日本マイクロソフト株式会社                        デベロッパー & プラットフォー...
セッションの目的とゴール       Session Objectives and Takeaways       • ASP.NET MVC 3 を中心とした         Web 開発の全体像を把握する       • Visual St...
アジェンダ        •     Web 開発の技術トレンド        •     ASP.NET と Visual Studio        •     ASP.NET MVC 概要        •     Razor 構文とヘル...
Web 開発の技術トレンド© 2011 Microsoft Corporation. All rights reserved.   4
Web 技術トレンド                                                            ECMAScript 5                                        ...
アプリケーション構成のトレンド                        WPF                                                            Web API             ...
Web 開発 プラットフォーム                           サーバー サイド                  クライアント サイド© 2011 Microsoft Corporation. All rights res...
ASP.NET と Visual Studio© 2011 Microsoft Corporation. All rights reserved.   8
ASP.NET とは?       Web 開発のフレームワーク       • 動的 Web アプリケーションの開発・実行基盤               – サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)       ...
ASP.NET と Visual Studio       フレームワーク構成図                        Web フォーム                                                  ...
Web フォーム vs. MVC       それぞれの特徴       D & D 配置                                         Web フォーム      容易な UI 開発             ...
ASP.NET MVC 概要© 2011 Microsoft Corporation. All rights reserved.                    12
What is MVC ?     デザイン パターン                                                     M V                                       ...
MVC オーバービュー       Web アプリにおける MVC パターン      1. Controller が         リクエストを受信          HTTP Request                        ...
ASP.NET MVC 3     最新 Web アプリ開発フレームワーク       • Visual Studio 2010 用の追加コンポーネント               – Web Platform Installer (Web P...
ASP.NET MVC 3 Tools Update     プロジェクト テンプレート機能強化       •     HTML5 / CSS3 対応プロジェクト テンプレート       •     Windows 認証 対応プロジェクト ...
パッケージ マネージャ       NuGet でゲット!                                            http://nuget.org/       • NuGet                  ...
Razor 構文と                                              ASP.NET Web ページ© 2011 Microsoft Corporation. All rights reserved.  ...
Razor (レイザー) !© 2011 Microsoft Corporation. All rights reserved.
ビューの特徴と HTML 生成       埋め込みコード ブロックの利用       • MVC 3 では 2 つの ビュー エンジン が標準搭載                Web フォーム (.aspx)               ...
"Razor" とは       Small, Simple, Seamless       • ページ記述のための新しい 構文 (記法)                   @{ var title = "Hello Razor"; }   ...
ASP.NET Web ページ とは       Razor 構文で記述するページ定義と処理エンジン                    WebMatrix                             ASP.NET MVC 3 ...
ヘルパー の利用© 2011 Microsoft Corporation. All rights reserved.              23
ヘルパー とは?     便利な Web パーツ ライブラリ                          @Bing.SearchBox()                  @Facebook.LikeButton()@LinkShar...
MVC 標準 ヘルパー メソッド     HTML 生成を助ける関数群          メソッド名                                        概要       ActionLink             ...
カスタム ヘルパーの作成       便利な Web パーツ ライブラリ       • App_Code フォルダ にファイルを作成             ファイル名: <ヘルパー名>.cshtml (または .vbhtml)       ...
カスタム ヘルパーの配布       NuGet ギャラリーへの公開       • カスタム ヘルパーの登録方法               1.       NuGet ギャラリー サイト (www.nuget.org) で        ...
jQuery と Visual Studio© 2011 Microsoft Corporation. All rights reserved.    28
jQuery のサポート       Visual Studio と jQuery       • 高速・軽量な JavaScript ライブラリ               –   DOM / CSS / Ajax 処理を容易に       ...
jQuery コーディング支援機能       インテリセンスとコード スニペット       • インテリセンス               – オート コンプリート               – オート コレクト       • コード ...
Visual Studio 2010                                                    Web 標準への対応© 2011 Microsoft Corporation. All rights r...
Visual Studio 2010 と Web 標準       HTML5 / CSS3 を使う       • Web Standards Update         for Visual Studio 2010 SP1        ...
ASP.NET MVC 3                                                     on Windows Azure© 2011 Microsoft Corporation. All rights...
Azure で ASP.NET MVC 3       MVC 3 Web Role テンプレート       • Windows Azure Tools for Visual Studio         2010 v1.4 (August ...
(参考) MVC 3 アプリの配置       依存関係のアセンブリの追加       • 配置可能な依存関係の追加 から         必要なアセンブリを追加可能       • ホスティング サーバーなどに         容易に配置が可...
Edtter を作ろう!ハンズオンラボ テキスト&サンプル公開中• ダウンロード:  http://edtter.codeplex.com/• サンプルが Windows Azure 上で  期間限定公開中:  http://www.edtte...
まとめ© 2011 Microsoft Corporation. All rights reserved.         37
まとめ                                     ASP.NET MVC 3                                        Web 開発フレームワーク                ...
リファレンス #1      Microsoft Web Platform      http://www.microsoft.com/web/      MSDN ASP.NET デベロッパー センター      http://msdn.mi...
リファレンス #2      ASP.NET MVC: The Official Microsoft ASP.NET Site (英語)      http://www.asp.net/mvc      CodePlex - ASP.NET M...
© 2011 Microsoft Corporation. All rights reserved.   41
Upcoming SlideShare
Loading in …5
×

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

3,686 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,686
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 最新 ASP.NET Web 開発 オーバービュー 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 井上 章 (いのうえ あきら) Blog: blogs.msdn.com/chack Twitter: @chack411© 2011 Microsoft Corporation. All rights reserved. 1
  2. 2. セッションの目的とゴール Session Objectives and Takeaways • ASP.NET MVC 3 を中心とした Web 開発の全体像を把握する • Visual Studio 2010 と ASP.NET の Web 開発の魅力 を体感!© 2011 Microsoft Corporation. All rights reserved. 2
  3. 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
  4. 4. Web 開発の技術トレンド© 2011 Microsoft Corporation. All rights reserved. 4
  5. 5. Web 技術トレンド ECMAScript 5 CSS3 HTML5 jQuery Ajax Web API MVC RIA REST Atom JSON© 2011 Microsoft Corporation. All rights reserved. 5
  6. 6. アプリケーション構成のトレンド WPF Web API Win フォーム HTTP ASP.NET HTML / JS Silverlight REST JSON クライアント サーバー© 2011 Microsoft Corporation. All rights reserved. 6
  7. 7. Web 開発 プラットフォーム サーバー サイド クライアント サイド© 2011 Microsoft Corporation. All rights reserved. 7
  8. 8. ASP.NET と Visual Studio© 2011 Microsoft Corporation. All rights reserved. 8
  9. 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. 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. 11. Web フォーム vs. MVC それぞれの特徴 D & D 配置 Web フォーム 容易な UI 開発  豊富なサーバー コントロール  イベント駆動型プログラミング ASP.NET MVC Web 標準志向 テスト駆動開発  HTML ベースの UI 開発  MVC パターン© 2011 Microsoft Corporation. All rights reserved. 11
  12. 12. ASP.NET MVC 概要© 2011 Microsoft Corporation. All rights reserved. 12
  13. 13. What is MVC ? デザイン パターン M V C • Model データとビジネス ロジック を表現 • View Model から取得したデータを プレゼンテーション (UI) へ出力する • Controller ユーザーからの入力を受付け View と Model を制御する© 2011 Microsoft Corporation. All rights reserved. 13
  14. 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. 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. 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. 17. パッケージ マネージャ NuGet でゲット! http://nuget.org/ • NuGet (ぬげっと) とは ... – ヘルパーやオープンソース ライブラリのパッケージ公開と 管理の仕組み – Visual Studio や WebMatrix のパッケージ マネージャ機能 – GUI / コンソール の 2 通りの利用方法 – NuGet ギャラリーを利用したヘルパーの公開© 2011 Microsoft Corporation. All rights reserved.
  18. 18. Razor 構文と ASP.NET Web ページ© 2011 Microsoft Corporation. All rights reserved. 18
  19. 19. Razor (レイザー) !© 2011 Microsoft Corporation. All rights reserved.
  20. 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. 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. 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
  23. 23. ヘルパー の利用© 2011 Microsoft Corporation. All rights reserved. 23
  24. 24. ヘルパー とは? 便利な Web パーツ ライブラリ @Bing.SearchBox() @Facebook.LikeButton()@LinkShare.GetHtml() @Twitter.Search() @GamerCard.GetHtml()© 2011 Microsoft Corporation. All rights reserved. 24
  25. 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. 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. 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. 28. jQuery と Visual Studio© 2011 Microsoft Corporation. All rights reserved. 28
  29. 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. 30. jQuery コーディング支援機能 インテリセンスとコード スニペット • インテリセンス – オート コンプリート – オート コレクト • コード スニペット – コード ブロックのひな形を挿入 Tab キー入力 jQuery Code Snippets for Visual Studio 2010 ダウンロード http://jquerysnippets.codeplex.com/© 2011 Microsoft Corporation. All rights reserved. 30
  31. 31. Visual Studio 2010 Web 標準への対応© 2011 Microsoft Corporation. All rights reserved. 31
  32. 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. 33. ASP.NET MVC 3 on Windows Azure© 2011 Microsoft Corporation. All rights reserved. 33
  34. 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. 35. (参考) MVC 3 アプリの配置 依存関係のアセンブリの追加 • 配置可能な依存関係の追加 から 必要なアセンブリを追加可能 • ホスティング サーバーなどに 容易に配置が可能 ビルド時に bin へコピーされる© 2011 Microsoft Corporation. All rights reserved. 35
  36. 36. Edtter を作ろう!ハンズオンラボ テキスト&サンプル公開中• ダウンロード: http://edtter.codeplex.com/• サンプルが Windows Azure 上で 期間限定公開中: http://www.edtter.com/ 36
  37. 37. まとめ© 2011 Microsoft Corporation. All rights reserved. 37
  38. 38. まとめ ASP.NET MVC 3 Web 開発フレームワーク .cshtml ASP.NET Web ページ .vbhtml HTML ページ生成エンジン Razor ヘルパー Web ページ記述構文 Web パーツ ライブラリ© 2011 Microsoft Corporation. All rights reserved. 38
  39. 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. 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 ScottGus Blog (英語) http://weblogs.asp.net/scottgu/default.aspx Phil Haacks Blog (英語) http://haacked.com/Default.aspx Scott Hanselmans Blog (英語) http://www.hanselman.com/blog/ K. Scott Allens Blog (英語) http://odetocode.com/Blogs/scott/default.aspx© 2011 Microsoft Corporation. All rights reserved. 40
  41. 41. © 2011 Microsoft Corporation. All rights reserved. 41

×