![? CORS - Cross Origin Resource Sharing
?
?
http://www.w3.org/TR/cors/
?
?
public static class WebApiConfig {
public static void Register(HttpConfiguration config) {
config.EnableCors(); // CORS の有効化
...
[EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]
public HttpResponseMessage Get() {
...
}
28](https://image.slidesharecdn.com/webapplicationpatternsdotnet20140208p-140208022535-phpapp01/85/Web-NET-CLR-H-88-28-320.jpg)
![属性で指定されている
ルーティングをマッピング
デフォルトの
ルーティング設定
ルートとなる
プレフィックスの指定
各アクションメソッド毎の
ルート名の指定
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
[RoutePrefix("api/Account")]
public class AccountController : ApiController
{
// GET api/Account/UserInfo
[Route("UserInfo")]
public UserInfoViewModel GetUserInfo()
{
return ...;
}
}
42](https://image.slidesharecdn.com/webapplicationpatternsdotnet20140208p-140208022535-phpapp01/85/Web-NET-CLR-H-88-42-320.jpg)
![[MW01] ご注文は Linux + Docker ですか？ Windows だけじゃない App Service を使い切る](https://cdn.slidesharecdn.com/ss_thumbnails/mw01-170614050024-thumbnail.jpg?width=560&fit=bounds)
![[MW11] OSS on Azure で構築する ウェブアプリケーション](https://cdn.slidesharecdn.com/ss_thumbnails/mw11-170616020924-thumbnail.jpg?width=560&fit=bounds)
![[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介](https://cdn.slidesharecdn.com/ss_thumbnails/tl03-170614050628-thumbnail.jpg?width=560&fit=bounds)
![[TL07] エンタープライズ基準で " 丁寧に " .NET Framework のバージョンアップしていくコツ](https://cdn.slidesharecdn.com/ss_thumbnails/tl07-170614050643-thumbnail.jpg?width=560&fit=bounds)
![[SC03] Active Directory の DR 対策～天災/人災/サイバー攻撃、その時あなたの IT 基盤は利用継続できますか?](https://cdn.slidesharecdn.com/ss_thumbnails/sc03-170614044149-thumbnail.jpg?width=560&fit=bounds)
![[DI01] 窓は開かれた! SQL Server on Linux で拡がる可能性](https://cdn.slidesharecdn.com/ss_thumbnails/di01-170605023800-thumbnail.jpg?width=560&fit=bounds)
![[DO13] 楽天のクラウドストレージ使いこなし術 Azure と OSS で少しずつ進めるレガシー脱却](https://cdn.slidesharecdn.com/ss_thumbnails/do13-170616023513-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to Web アプリケーション パターンと .NET - CLR/H 88 回 ～雪まつりデイ！～ バージョン (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)
Web アプリケーション パターンと .NET - CLR/H 88 回 ～雪まつりデイ！～ バージョン
- 1. Web アプリケーション パターンと .NET CLR/H 88 回 ～雪まつりデイ！～ バージョン 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 井上 章 (チャック) http://aka.ms/chack
- 3. Web アプリケーション パターンの 進化と One ASP.NET
- 4. “Web サイトが個々に独立している状態から、交換可能なコンポーネントからなる インターネットへと移行し、さまざまな デバイスとサービス を組み合わせること で一貫性のあるユーザー主導のエクスペリエンスを実現する” 4
- 7. 7
- 8. 8
- 9. .hoge { color: red; background-color: #b6ff00; border-radius: 8px; } 9
- 10. 従来型 Web アプリケーション (Established) HTML5/CSS3 の登場 (+ ECMAScript 5) 対応 Web ブラウザーの普及 (モダン Web ブラウザー) jQuery のデファクト スタンダード 各種 JavaScript ライブラリの登場と普及 次世代型 Web アプリケーション (Emerging) 10
- 11. "More and more of ASP .NET is open source. We want to make ASP .NET more pluggable, more open, more fun." "We've got big things planned - some that will surprise you." February 25, 2012 by Scott Hanselman 11
- 13. 2012 13
- 14. 2012 14
- 15. 2013 15
- 16. 2013 16
- 17. 17
- 18. 18
- 19. 柔軟性に優れたモダン Web アプリ向け / 特に Web アプリ UX として SPA が最適 LightSwitch と HTML5 クライアント 19
- 20. REST アプローチ, OData, JSON などの要件の中で最も最適なテクノロジ (まず Web API を試し、ニーズに合わない場合に他のテクノロジの使用を検討) (WCF Data サービス / Workflow サービスの項目もあり。ガイド参照) 20
- 21. シングルページ アプリケーション アーキテクチャと HTTP サービス
- 23. ? SPA ? ? ※ SPA テンプレートの利用には Visual Studio 2013 または Visual Studio 2012 Update 2 以降が必要です http://www.microsoft.com/visualstudio/jpn/visual-studio-update 23
- 24. /Home/Index Todo List HTML/CSS/JS /Home/Index Web UI ASP.NET MVC 4 Todo Item knockout jQuery クライアント /api/todolist JSON/XML /api/todo Data Services ASP.NET Web API Entity Framework 5 サーバー 24
- 25. /Home/Index HTML/CSS/JS /Home/Index Web UI ASP.NET MVC 5 bootstrap knockout JSON jQuery /Token ASP.NET Web API 2 /api/Account/… クライアント 認証 Services Entity Framework 6 サーバー 25
- 26. RESTful HTTP サービス構築のためのフレームワーク ASP.NET プロジェクト テンプレートとして提供 ? URL ルーティング ? モデル バインディング ? スキャフォールディング ? OData クエリパラメータ 26
- 27. 27
- 28. ? CORS - Cross Origin Resource Sharing ? ? http://www.w3.org/TR/cors/ ? ? public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.EnableCors(); // CORS の有効化 ... [EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")] public HttpResponseMessage Get() { ... } 28
- 29. ASP.NET と Web 标準技术
- 31. www.breezejs.com ? ? ? ? ? ? var manager = new breeze.EntityManager('api/northwind'); var query = new breeze.EntityQuery() .from("Employees") .orderBy("LastName") .where("LastName", "startsWith", "P"); manager.executeQuery(query) .then(function(data){ ko.applyBindings(data);}) .fail(function(e) { alert(e); }); if (manager.hasChanges()) { manager.saveChanges() .then(saveSucceeded) .fail(saveFailed); } 31
- 34. 34
- 35. 35
- 37. 37
- 38. Appendix
- 41. ? OWIN = Open Web Interface for .NET ? http://owin.org/ http://katanaproject.codeplex.com/ ? ? ? ? ? ? ? ? 41
- 42. 属性で指定されている ルーティングをマッピング デフォルトの ルーティング設定 ルートとなる プレフィックスの指定 各アクションメソッド毎の ルート名の指定 // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); [RoutePrefix("api/Account")] public class AccountController : ApiController { // GET api/Account/UserInfo [Route("UserInfo")] public UserInfoViewModel GetUserInfo() { return ...; } } 42
- 43. ASP.NET SPA ToDo サンプル ベース ?※ ナビゲーション 履歴管理 ? Breeze Knockout ? ? Durandal Hot Towel ? ? ? ? ? Backbone ? Breeze ? ? ? ? Durandal ? Ember Knockout Ember ? Angular 使用 ライブラリ Breeze Angular ? Backbone ? ? ? ? 43
- 44. ? ? knockoutjs.com ? <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <p>Full name: <span data-bind="text: fullName"></span></p> var ViewModel = function(firstName, lastName) { this.firstName = ko.observable(firstName); this.lastName = ko.observable(lastName); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); }; ko.applyBindings(new ViewModel("Akira, "Inoue")); 44
- 45. 45
- 46. Client Codes HTML/CSS/JavaScript ... Cache Manifest HTML5 online/offline Events HTML5 DataContext Web UI HTML/CSS/JS MVC Data Services JSON/XML Breeze.js Web API Entity Framework クライアント Local Storage HTML5 サーバー 46
- 47. Project Silk (シルク) Client-Side Web Development for Modern Browsers モダン ブラウザのための クライアント サイド Web 開発ガイダンス http://silk.codeplex.com/ Project Liike (リーケ) Building Modern Mobile Web Apps モダン モバイル ブラウザのための クライアント サイド Web 開発ガイダンス http://msdn.microsoft.com/en-us/library/hh994907 47