Room Metro 2014-03-01

20
最近の.NET系Web アプリケーションテクノロジーについて

Transcript of Room Metro 2014-03-01

Page 1: Room Metro 2014-03-01

最近の.NET系Webアプリケーションテクノロジーについて

Page 2: Room Metro 2014-03-01

自己紹介

• 丸山です。

• 最近はWebアプリよく作ってます。• エンタープライズ系です。

以上。

Page 3: Room Metro 2014-03-01

Webアプリ

クライアント サービス データアクセス

Page 4: Room Metro 2014-03-01

今日の話

クライアント サービス データアクセス

• Entity Frameworkとかも面白いですが割愛

• ASP.NET Web API を少々• SignalR を少々• Owinとかも面白いですがSignalRが

動かなかったので割愛

• Typescriptを少々• Bootstrapとかも面白いですが割愛• MVCとかも面白いですが割愛

Page 5: Room Metro 2014-03-01

今日のゴール

• とりあえず単語だけ持って帰ってください。

Page 6: Room Metro 2014-03-01

ASP.NET Web API

Page 7: Room Metro 2014-03-01

HTTPのサービスを公開するためのテクノロジー

• RESTじゃなくてもOK• でも基本的にはREST

• URLのテンプレートを指定したら勝手にクラスとかメソッドとか引数とかにマッピング

• 引数も戻り値もJSONとかXMLにシリアライズ/デシリアライズしてくれる

• 普通の.NETクラスのノリで書けてしまう• ノリすぎるとトラップもいっぱいあるので普通はちゃんと考えないとだめですが、とりあえずお手軽

• HTTP ContextとかWCFとかに依存しない

• ODataも大丈夫

Page 8: Room Metro 2014-03-01

config.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate: "api/{controller}"

);

簡単な使い方(1)

ルーティング(どういうURLの時にどのクラスとかメソッドとか引数とかを呼び出すか)を指定する

public class RoomController : ApiController {public IEnumerable<Room> Get() {

return new Room[]{new Room(){Id=1, Name="Room Metro",

Description="Room Metro users room."},new Room(){Id=2, Name="Silverlight Square",

Description="Silverlight Square users room."},new Room(){Id=3, Name="Windows Phone Arch",

Description="Windows Phone Arch users room."},new Room(){Id=4, Name="VSHTC",

Description="VS Hackathon users room."},new Room(){Id=5, Name="Typescript",

Description="Typescript users Room."},new Room(){Id=6, Name="Miscellaneous",

Description="miscellaneous...."}};

}}

ApiControllerを継承してメソッド作って返すだけ

Page 9: Room Metro 2014-03-01

簡単な使い方(2)

ブラウザから直接たたけます。

テンプレートが“api/{controller}”だったのでRoomControllerに割り当てられて、ブラウザからURL直接たたくと HTTP Get 要求なので Get メソッドが呼ばれる

[{"Description": "Room Metro users room.","Id": 1,"Name": "Room Metro"

},{

"Description": "Silverlight Square users room.","Id": 2,"Name": "Silverlight Square"

},・・・・・

Page 10: Room Metro 2014-03-01

詳しいことはこの辺で

Page 11: Room Metro 2014-03-01

SignalR

Page 12: Room Metro 2014-03-01

リアルタイムWebを実現するテクノロジー

• クライアントとサービス間で非同期と双方向通信• 通信方法はWebSocketを利用するが、ブラウザの実装状況により使えない場合は、代替え手段が利用される• Server Sent Eventsとか、Forever Frameとか、Ajax long poolingとか

• 基本形はRPC方式• クライアントからはサービスのメソッドを呼んでるかのように

• サービスからはクライアントのメソッドを呼んでるかのように

• もちろんもっと低レベルなインターフェイスもあります

Page 13: Room Metro 2014-03-01

簡単な使い方(1)

public class Startup {public void Configuration(IAppBuilder app) {

app.MapSignalR();

}}

使うよって宣言

[HubName("room")]public class RoomHub : Hub {

public void Enter(int groupId) {this.Groups.Add(this.Context.ConnectionId, groupId.ToString());

}

public void Leave(int groupId) {this.Groups.Remove(this.Context.ConnectionId, groupId.ToString());

}

public void Send(int groupId, string message) {this.Clients.Group(groupId.ToString()).receive(message);

}

}

Hubクラスを継承して普通にメソッドを定義。このメソッドがクライアントから呼ばれる

“receive”はクライアント側で受け取る用のイベント名のようなイメージ

Page 14: Room Metro 2014-03-01

簡単な使い方(2)

<script src="Scripts/jquery.signalR-2.0.2.js"></script><script src="signalr/js"></script>

とりあえずインクルード

var room = room = $.connection.room;

$.connection.hub.start().done(function () {

room.on('receive', function (message) {if (currentRoomId) {

writeMessages(message);}

});

room.server.enter(currentRoomId);room.server.send(currentRoomId, "Hello world");room.server.leave(currentRoomId);

});

Hub取り出してつないでイベント受け取る設定して呼び出して

Page 15: Room Metro 2014-03-01

詳しいことはこの辺で

Page 16: Room Metro 2014-03-01

TypeScript

Page 17: Room Metro 2014-03-01

規模の大きな開発にも使えるJavaScript

• ECMAScript6(Harmony)をベースに作られたJavaScriptのスーパーセット• JavaScriptはほぼほぼそのままTypeScriptにできる

• moduleとかclassとかがあるから構造化しやすい

• 静的片付けができるからコンパイルでエラーが分かる

• コンパイル後のJavaScriptがきれい

• なんといってもアロー関数式

• 26日(水)曜日に1.0RCが登場(0.9.7)• 4月に開催されるBuildで1.0が登場とのうわさ

• Visual Studioでも正式サポート

Page 18: Room Metro 2014-03-01

簡単な使い方

Page 19: Room Metro 2014-03-01

詳しいことはこの辺で

Page 20: Room Metro 2014-03-01

ご清聴ありがとうございました。