![[D2 ?????]1.???????????????????????](https://cdn.slidesharecdn.com/ss_thumbnails/1-140804011241-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (7)
Similar to 最新 ASP.NET Web 開発オーバービュー (20)
More from Akira Inoue (20)
Recently uploaded (8)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
最新 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