最新 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
- 4. Web 開発の技術トレンド © 2011 Microsoft Corporation. All rights reserved. 4
- 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
- 8. ASP.NET と Visual Studio © 2011 Microsoft Corporation. All rights reserved. 8
- 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
- 12. ASP.NET MVC 概要 © 2011 Microsoft Corporation. All rights reserved. 12
- 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
- 19. Razor (レイザー) ! © 2011 Microsoft Corporation. All rights reserved.
- 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
- 23. ヘルパー の利用 © 2011 Microsoft Corporation. All rights reserved. 23
- 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
- 31. Visual Studio 2010 Web 標準への対応 © 2011 Microsoft Corporation. All rights reserved. 31
- 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
- 36. Edtter を作ろう！ ハンズオンラボ テキスト＆サンプル公開中 • ダウンロード： http://edtter.codeplex.com/ • サンプルが Windows Azure 上で 期間限定公開中： http://www.edtter.com/ 36
- 37. まとめ © 2011 Microsoft Corporation. All rights reserved. 37
- 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
- 41. © 2011 Microsoft Corporation. All rights reserved. 41