More Related Content Similar to Web アプリケーション パターンと .NET - CLR/H 88 回 ～雪まつりデイ！～ バージョン (20) More from Akira Inoue (20) 1. Web アプリケーション パターンと .NET
CLR/H 88 回 ～雪まつりデイ！～ バージョン
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
井上 章 (チャック) http://aka.ms/chack
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
20. REST アプローチ, OData, JSON などの要件の中で最も最適なテクノロジ
(まず Web API を試し、ニーズに合わない場合に他のテクノロジの使用を検討)
(WCF Data サービス / Workflow サービスの項目もあり。ガイド参照)
20
23.
SPA
※ SPA テンプレートの利用には Visual Studio 2013 または Visual Studio 2012 Update 2 以降が必要です
http://www.microsoft.com/visualstudio/jpn/visual-studio-update
23
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
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
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
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
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
