Room Metro 2014-03-01

2,488 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,488
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Room Metro 2014-03-01

  1. 1. 最近の.NET系Web アプリケーションテクノロジーについて
  2. 2. 自己紹介 • 丸山です。 • 最近はWebアプリよく作ってます。 • エンタープライズ系です。 以上。
  3. 3. Webアプリ クライアント サービス データアクセス
  4. 4. 今日の話 クライアント • Typescriptを少々 • Bootstrapとかも面白いですが割愛 • MVCとかも面白いですが割愛 サービス • ASP.NET Web API を少々 • SignalR を少々 • Owinとかも面白いですがSignalRが 動かなかったので割愛 データアクセス • Entity Frameworkとかも面白いです が割愛
  5. 5. 今日のゴール • とりあえず単語だけ持って帰ってください。
  6. 6. ASP.NET Web API
  7. 7. HTTPのサービスを公開するためのテクノロジー • RESTじゃなくてもOK • でも基本的にはREST • URLのテンプレートを指定したら勝手にクラスとかメソッドと か引数とかにマッピング • 引数も戻り値もJSONとかXMLにシリアライズ/デシリアライズし てくれる • 普通の.NETクラスのノリで書けてしまう • ノリすぎるとトラップもいっぱいあるので普通はちゃんと考えないと だめですが、とりあえずお手軽 • HTTP ContextとかWCFとかに依存しない • ODataも大丈夫
  8. 8. 簡単な使い方(1) config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}" ); ルーティング(どういう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を継承してメソッド作って返すだけ
  9. 9. 簡単な使い方(2) ブラウザから直接たたけます。 [{ "Description": "Room Metro users room.", "Id": 1, "Name": "Room Metro" テンプレートが“api/{controller}”だったので RoomControllerに割り当てられて、ブラウザからURL 直接たたくと HTTP Get 要求なので Get メソッドが呼 ばれる }, { "Description": "Silverlight Square users room.", "Id": 2, "Name": "Silverlight Square" }, ・・・・・
  10. 10. 詳しいことはこの辺で
  11. 11. SignalR
  12. 12. リアルタイムWebを実現するテクノロジー • クライアントとサービス間で非同期と双方向通信 • 通信方法はWebSocketを利用するが、ブラウザの実装状況により使えな い場合は、代替え手段が利用される • Server Sent Eventsとか、Forever Frameとか、Ajax long poolingとか • 基本形はRPC方式 • クライアントからはサービスのメソッドを呼んでるかのように • サービスからはクライアントのメソッドを呼んでるかのように • もちろんもっと低レベルなインターフェイスもあります
  13. 13. 簡単な使い方(1) public class Startup { public void Configuration(IAppBuilder app) { 使うよって宣言 app.MapSignalR(); } } [HubName("room")] public class RoomHub : Hub { 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); } } “receive”はクライアント側で受け取る用のイベント名の ようなイメージ
  14. 14. 簡単な使い方(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取り出して つないで イベント受け取る設定して 呼び出して
  15. 15. 詳しいことはこの辺で
  16. 16. TypeScript
  17. 17. 規模の大きな開発にも使えるJavaScript • ECMAScript6(Harmony)をベースに作られたJavaScriptのスー パーセット • JavaScriptはほぼほぼそのままTypeScriptにできる • moduleとかclassとかがあるから構造化しやすい • 静的片付けができるからコンパイルでエラーが分かる • コンパイル後のJavaScriptがきれい • なんといってもアロー関数式 • 26日(水)曜日に1.0RCが登場(0.9.7) • 4月に開催されるBuildで1.0が登場とのうわさ • Visual Studioでも正式サポート
  18. 18. 簡単な使い方
  19. 19. 詳しいことはこの辺で
  20. 20. ご清聴ありがとうございました。

×