Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2012年2月.NETラボ勉強会ASP.NET MVC4 Beta    新機能の紹介    Twitter: david9142  Blog: テスターですが何か? http://david9142.wordpress.com/
いつも嫁がお世話になっております
本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
ASP.NET の歴史            XML Web Service        ASP.NET AJAX             WebMatrix                                          ...
ASP.NETとは?          jQueryWebForm             ASP.NET MVC                                  WCF          ASP.NET           ...
ASP.NET MVCの特徴VB6、ASP.NET WebFormを知らない人に.NETのWeb技術になじみやすくする.NET Frameworkのバージョンアップと同期せずに新機能を追加していく.NET以外のWeb技術との親和性も重視する
ASP.NET MVCの歴史Ajax             REST API                                   Android      クラウド    ケータイブラウザ           iPhone  ...
本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
ASP.NET MVC4 Betaシステム要件•   Windows 7 / Vista SP2 / XP SP3•   Windows Server 2003 R2 / SP2•   Windows Server 2008 / 2008 R2...
ASP.NET MVC4のテーマ 多様なデバイス多様なアプリケーション
ASP.NET MVC4の新機能NEW Project Template   Internet, Intranet,                           Display Modes        Web API,Single P...
ASP.NET MVC4の新機能NEW Project Template   Internet, Intranet,                           Display Modes        Web API,Single P...
新プロジェクトテンプレート               Internet  Empty              Application Intranet                MobileApplication            ...
新プロジェクトテンプレート
EmptyJavaScript(jQuery, Modernizr, Knockout)、CSSが含まれている以外は何もないプロジェクトController, Viewもゼロから自分で作成する
Internet Application• テンプレートを準備、デザインが現代的に   トップページに何をすべきか書いてある• jQueryUIを使用したログインダイアログ   →正式版はOAuth2に対応?• セマンティックHTMLタグ   ...
(Demo)Internet Application TemplatePC
(Demo)Internet Application TemplateSmartPhone
Intranet Application• Windows認証用テンプレート• Readme.txtにIISの設定手順が書いてある   「IIS8」という記述が• _Layout.cshtmlで認証済ユーザー名を表示<section id="l...
Internet Application画面
Mobile• テンプレートにjQuery Mobileが統合されている• Controller, Modelはこれまでのテンプレートと  同じ、View(cshtml/vbhtml)のみ異なる• jQuery Mobile  →スマートフォン...
(Demo) Mobile Template
Web API• URLベースのRESTfulサービスを作成するテンプ  レート• ページのないAPIを作るために使用• ControllerはApiControllerを継承• Route、Filterもサポート• データ形式はクライアントか...
Web APIの利用シーン          JSON, XML Web                      ASP.NET MVCService                     Web API                 J...
(Demo) Web API Template
Single Page Application• クライアントサイトのJavaScriptをベースとしたリッ  チなUIを持ったページを作成するテンプレート• JavaScriptから非同期でWebAPIの呼び出し  を行い、データの操作を行う...
Single Page Application構成               Javascriptで                非同期通信  cshtml                         WebAPI           ...
(Demo) Single Page Application
まとめ(プロジェクトテンプレート)• テンプレートが増え、目的のアプリケーションを作る  ための手順が簡素化されつつある• テンプレートは違っても基本はMVC(Controller  でリクエストを受けて、Viewに表示する)• MS製オレオレ...
ASP.NET MVC4の新機能NEW Project Template   Internet, Intranet,                           Display Modes        Web API,Single P...
Display Modes• 複数の種類のView(_Layout)を用意し、リクエ  ストのあったデバイスの種類に応じてViewを切り  替える機能。 PCブラウザ → Index.cshtml iOS → Index.iOS.cshtm...
Display Modes(イメージ)          Index.iOS.cshtml           Index.N3DS.cshtml               Index.cshtml          Index.Androi...
Display Modes 定義方法Global.asax.csのApplication_Startメソッドに記述DisplayModeProvider.Instance.Modes.Insert(0, newDefaultDisplayMod...
(Demo)Display Modes
ASP.NET MVC4の新機能NEW Project Template   Internet, Intranet,                           Display Modes        Web API,Single P...
Browser Overriding• サーバー側でリクエストのあったブラウザの定義を  上書きし、別のブラウザからリクエストを受けたか  のように振る舞う機能• User-Agent文字列を上書き• PCブラウザからのリクエストをモバイル端末...
View Switcherモバイル用/デスクトップ用のViewを切り替える機能、「スマートフォンの方はこちら」「PCの方はこちら」のリンクをページに表示することができる。
View Switcher設定手順• Nugetパッケージのインストール   「Install-Package jQuery.Mobile.MVC」• デスクトップ用のViewにViewSwitcherの設定  を記述  <body>     ...
(Demo) ViewSwitcher
Android ・゚・(つД`)・゚・そうですか、Androidはモバイルデバイスじゃないんですか orz_ViewSwitcher.cshtmlの1行目”Request.Browser.IsMobileDevice”がAndroidだとFal...
ASP.NET MVC4の新機能NEW Project Template   Internet, Intranet,                           Display Modes        Web API,Single P...
Recipe• Visual Studioの拡張機能でコードの自動生  成などを行う• Controller、View追加時の自動生成コードロ  ジックを変更(置き換え)可能• Nugetパッケージとして配布可能
Asynchronous Controller• .NET 4.5の機能async/await構文• Controller内の処理を非同期で実行可能(Viewと  Controllerが非同期通信することとは別)public async Tas...
Windows Azure IntegrationAzure SDK 1.5(2011年9月)から、ASP.NETMVC4アプリをWindows Azureで動作させることが可能
本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
学習用コンテンツ• ASP.NET Web API• ASP.NET Single Page Application• チュートリアル: ASP.NET MVC 4 Mobile  Features (日本語版)• 新 ASP.NET MVC ...
ASP.NET 4.5          Developer PreviewWhats New in ASP.NET 4.5 and VisualWeb Developer 11 Developer PreviewASP.NETコア機能、ASP...
A look at ASP.NET MVC 4Tech Days 2012でScott GathrieがASP.NET4についてしゃべっています
WebFormは? WCFは?• WebFormって「Classis ASP.NET」って呼ばれ  てレガシー扱いされてしまうんですか?• MVC4のWeb APIがあればWCFって要らない  んじゃ?
WebForm• そもそものアプローチが違う、考え方の異なるフ  レームワークに移行するリスク VB、WinForm → WebForm ASP、Java、PHP etc → MVC• 4.5でも新機能を提供しており、「移行すべき」レ  ガシー...
WCF• HTTP以外の通信も可能(なはず) (ASP.NET 4.5でWebSocketがサポートされますが)• WCF RIA Service / Data Service正直よくわからない、JSON形式のデータを返すだけならMVC3でも簡...
まとめ• MVC4になって各種デバイス対応 / アプリに対  応しやすくなった。• WebFormもMVCも同じASP.NET上で動作す  る• ASP.NET4.5になり、WebFormも進化する• 目的、手段、学習コスト、情報量、リスクから...
Upcoming SlideShare
Loading in …5
×

[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介

4,720 views

Published on

  • Be the first to comment

  • Be the first to like this

[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介

  1. 1. 2012年2月.NETラボ勉強会ASP.NET MVC4 Beta 新機能の紹介 Twitter: david9142 Blog: テスターですが何か? http://david9142.wordpress.com/
  2. 2. いつも嫁がお世話になっております
  3. 3. 本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
  4. 4. 本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
  5. 5. ASP.NET の歴史 XML Web Service ASP.NET AJAX WebMatrix jQuery WCF EntityFramework Windows Azure MVC 1 2 3 4WebForm 1.0/1.1 2.0 4.0 4.5 .NET 1.0/1.1 2.0 3.0 3.5 4.0 4.5 2002年 2005年 2006年 2008年 2010年 2012年?
  6. 6. ASP.NETとは? jQueryWebForm ASP.NET MVC WCF ASP.NET .NET Framework
  7. 7. ASP.NET MVCの特徴VB6、ASP.NET WebFormを知らない人に.NETのWeb技術になじみやすくする.NET Frameworkのバージョンアップと同期せずに新機能を追加していく.NET以外のWeb技術との親和性も重視する
  8. 8. ASP.NET MVCの歴史Ajax REST API Android クラウド ケータイブラウザ iPhone iPadASP.NET MVC Nuget EntityFramework Code First Razor jQuery Mobile Scafforlding jQuery MVC1 MVC2 MVC3 MVC4(β)2009年3月 2010年3月 2011年1月 2012年2月
  9. 9. 本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
  10. 10. ASP.NET MVC4 Betaシステム要件• Windows 7 / Vista SP2 / XP SP3• Windows Server 2003 R2 / SP2• Windows Server 2008 / 2008 R2• PowerShell 2.0• Visual Studio 2010 sp1 / Visual Web Developer 2010 sp1インストール方法• Web PI / 実行ファイルリリースノート• 英語 / 日本語(非公式)
  11. 11. ASP.NET MVC4のテーマ 多様なデバイス多様なアプリケーション
  12. 12. ASP.NET MVC4の新機能NEW Project Template Internet, Intranet, Display Modes Web API,Single Page Application, Mobile Recipe, Browser Overriding Asynchronous View Switcher Controller, Windows Azure
  13. 13. ASP.NET MVC4の新機能NEW Project Template Internet, Intranet, Display Modes Web API,Single Page Application, Mobile Recipe Browser Overriding Asynchronous View Switcher Controller Windows Azure
  14. 14. 新プロジェクトテンプレート Internet Empty Application Intranet MobileApplication Single Page Web API Application
  15. 15. 新プロジェクトテンプレート
  16. 16. EmptyJavaScript(jQuery, Modernizr, Knockout)、CSSが含まれている以外は何もないプロジェクトController, Viewもゼロから自分で作成する
  17. 17. Internet Application• テンプレートを準備、デザインが現代的に トップページに何をすべきか書いてある• jQueryUIを使用したログインダイアログ →正式版はOAuth2に対応?• セマンティックHTMLタグ →文書構造に意味を持たせる 例: <header>, <footer>, <section>, <nav>• View-portを使用したadaptive rendering →モバイルブラウザでも見やすい
  18. 18. (Demo)Internet Application TemplatePC
  19. 19. (Demo)Internet Application TemplateSmartPhone
  20. 20. Intranet Application• Windows認証用テンプレート• Readme.txtにIISの設定手順が書いてある 「IIS8」という記述が• _Layout.cshtmlで認証済ユーザー名を表示<section id="login"> Hello, <span class="username">@User.Identity.Name</span>!</section>
  21. 21. Internet Application画面
  22. 22. Mobile• テンプレートにjQuery Mobileが統合されている• Controller, Modelはこれまでのテンプレートと 同じ、View(cshtml/vbhtml)のみ異なる• jQuery Mobile →スマートフォンやタブレットなど、タッチ操作に最適化されたWeb UI フレームワーク(Touch-Optimized Web Framework forSmartphones & Tablets)
  23. 23. (Demo) Mobile Template
  24. 24. Web API• URLベースのRESTfulサービスを作成するテンプ レート• ページのないAPIを作るために使用• ControllerはApiControllerを継承• Route、Filterもサポート• データ形式はクライアントから指定(デフォルトは JSON、Acceptヘッダーで判断)• IQueryable<T>でODataURL記述可能
  25. 25. Web APIの利用シーン JSON, XML Web ASP.NET MVCService Web API JSON, XML Destop Mobile App App
  26. 26. (Demo) Web API Template
  27. 27. Single Page Application• クライアントサイトのJavaScriptをベースとしたリッ チなUIを持ったページを作成するテンプレート• JavaScriptから非同期でWebAPIの呼び出し を行い、データの操作を行う• ライブラリにはknockout.js, history.js, upshot.js, nav.jsを利用• MVVM、MetroのHTML+JavaScirptアプリと 考え方が近い?
  28. 28. Single Page Application構成 Javascriptで 非同期通信 cshtml WebAPI DB (HTML)ページ遷移を行わない DbDataController CodeFirstで1つのHTMLでCRUD を継承 自動生成 操作
  29. 29. (Demo) Single Page Application
  30. 30. まとめ(プロジェクトテンプレート)• テンプレートが増え、目的のアプリケーションを作る ための手順が簡素化されつつある• テンプレートは違っても基本はMVC(Controller でリクエストを受けて、Viewに表示する)• MS製オレオレライブラリを使用していない(たぶ ん)ライブラリの知識は流用可能
  31. 31. ASP.NET MVC4の新機能NEW Project Template Internet, Intranet, Display Modes Web API,Single Page Application, Mobile Recipe Browser Overriding Asynchronous View Switcher Controller Windows Azure
  32. 32. Display Modes• 複数の種類のView(_Layout)を用意し、リクエ ストのあったデバイスの種類に応じてViewを切り 替える機能。 PCブラウザ → Index.cshtml iOS → Index.iOS.cshtml Android → Index.Android.cshtml Nintendo 3DS → Index.N3DS.cshtml ※Controllerは共通
  33. 33. Display Modes(イメージ) Index.iOS.cshtml Index.N3DS.cshtml Index.cshtml Index.Android.cshtmlIndex.cshtml Index.Android.cshtml Index.N3DS.cshtml Index.iOS.cshtml PC iOS Android 3DS リクエストはいずれもIndexアクションメソッド
  34. 34. Display Modes 定義方法Global.asax.csのApplication_Startメソッドに記述DisplayModeProvider.Instance.Modes.Insert(0, newDefaultDisplayMode("iOS"){ ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("iOS", StringComparison.OrdinalIgnoreCase) >= 0)});DisplayModeProvider.Instance.Modes.Insert(1, newDefaultDisplayMode("Android"){ ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("Android", StringComparison.OrdinalIgnoreCase) >= 0)});
  35. 35. (Demo)Display Modes
  36. 36. ASP.NET MVC4の新機能NEW Project Template Internet, Intranet, Display Modes Web API,Single Page Application, Mobile Recipe Browser Overriding Asynchronous View Switcher Controller Windows Azure
  37. 37. Browser Overriding• サーバー側でリクエストのあったブラウザの定義を 上書きし、別のブラウザからリクエストを受けたか のように振る舞う機能• User-Agent文字列を上書き• PCブラウザからのリクエストをモバイル端末から、モ バイル端末からのリクエストをPCブラウザからのリク エストとして処理が可能
  38. 38. View Switcherモバイル用/デスクトップ用のViewを切り替える機能、「スマートフォンの方はこちら」「PCの方はこちら」のリンクをページに表示することができる。
  39. 39. View Switcher設定手順• Nugetパッケージのインストール 「Install-Package jQuery.Mobile.MVC」• デスクトップ用のViewにViewSwitcherの設定 を記述 <body> @Html.Partial("_ViewSwitcher")※モバイル用Viewに設定はあるが、PC用Viewにはないので、PC→モバイルの切り替えができないため
  40. 40. (Demo) ViewSwitcher
  41. 41. Android ・゚・(つД`)・゚・そうですか、Androidはモバイルデバイスじゃないんですか orz_ViewSwitcher.cshtmlの1行目”Request.Browser.IsMobileDevice”がAndroidだとFalseになります。このプロパティはMVC固有ではなく、ASP.NETコア機能です。Browserファイル(C:¥Windows¥Microsoft.NET¥Framework64¥v4.0.30319¥Config¥Browsers)をもとに判定しており、ASP.NET4のBrowserファイルにはAndroidの定義がありません。ASP.NET4リリース時(2010年4月)はAndroid 2.0なので、開発中は無視されたんでしょう。ASP.NET 4.5(後述)に期待です。
  42. 42. ASP.NET MVC4の新機能NEW Project Template Internet, Intranet, Display Modes Web API,Single Page Application, Mobile Recipe Browser Overriding Asynchronous View Switcher Controller Windows Azure
  43. 43. Recipe• Visual Studioの拡張機能でコードの自動生 成などを行う• Controller、View追加時の自動生成コードロ ジックを変更(置き換え)可能• Nugetパッケージとして配布可能
  44. 44. Asynchronous Controller• .NET 4.5の機能async/await構文• Controller内の処理を非同期で実行可能(Viewと Controllerが非同期通信することとは別)public async Task<ActionResult> Index(string city) { var newsService = new NewsService(); var sportsService = new SportsService(); return View("Common", new PortalViewModel { NewsHeadlines = await newsService.GetHeadlinesAsync(), SportsScores = await sportsService.GetScoresAsync() });}
  45. 45. Windows Azure IntegrationAzure SDK 1.5(2011年9月)から、ASP.NETMVC4アプリをWindows Azureで動作させることが可能
  46. 46. 本セッションについてこれまでのASP.NET / ASP.NET MVCASP.NET MVC4 Betaの新機能WebFormは? 今後のASP.NETは?
  47. 47. 学習用コンテンツ• ASP.NET Web API• ASP.NET Single Page Application• チュートリアル: ASP.NET MVC 4 Mobile Features (日本語版)• 新 ASP.NET MVC 4 チュートリアル シリーズ
  48. 48. ASP.NET 4.5 Developer PreviewWhats New in ASP.NET 4.5 and VisualWeb Developer 11 Developer PreviewASP.NETコア機能、ASP.NET WebForm、ASP.NET MVC、Visual Studioの新機能紹介29日に.NET Framwork 4.5 Betaが公開されるので、ASP.NET 4.5もBetaになるはず
  49. 49. A look at ASP.NET MVC 4Tech Days 2012でScott GathrieがASP.NET4についてしゃべっています
  50. 50. WebFormは? WCFは?• WebFormって「Classis ASP.NET」って呼ばれ てレガシー扱いされてしまうんですか?• MVC4のWeb APIがあればWCFって要らない んじゃ?
  51. 51. WebForm• そもそものアプローチが違う、考え方の異なるフ レームワークに移行するリスク VB、WinForm → WebForm ASP、Java、PHP etc → MVC• 4.5でも新機能を提供しており、「移行すべき」レ ガシースキルにはなっていない• 10年分のノウハウの蓄積(MVCは3年)
  52. 52. WCF• HTTP以外の通信も可能(なはず) (ASP.NET 4.5でWebSocketがサポートされますが)• WCF RIA Service / Data Service正直よくわからない、JSON形式のデータを返すだけならMVC3でも簡単に実現できていたので、WCFをあまり使ったことがないので。
  53. 53. まとめ• MVC4になって各種デバイス対応 / アプリに対 応しやすくなった。• WebFormもMVCも同じASP.NET上で動作す る• ASP.NET4.5になり、WebFormも進化する• 目的、手段、学習コスト、情報量、リスクから、ど んな技術を使うのかは自分の判断

×