Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Sails WorkShop (4) 
立命館大学 経営学部3回生  
井口智勝
SailsWorkShop 
の目的 
<for All> 
Watnowにリアルタイム通信技術を導入する 
<for One> 
取り敢えず、書けるようになること。(スピード重視) 
ある程度、体系的な知識化もしていく。
Sails WorkShop 
Menu 
1回目:Sailsって何?CRUDappを作ろう! 
2回目:Policiesの使い方 ~sessionや認証~ 
3回目:appをリアルタイム化しよう! 
4回目:Sails✕Marionette ...
※今日は結構 
コアにせまります。
2014/12/1(Mon) 
今日のアウトライン 
Sails✕Marionetteでどう変わるか? 
今回使うMarionetteアプリの説明 
Sails✕Marionetteアプリを作ろう! 
4回のWorkShopで触れなかった重要部...
Sails✕Marionetteで 
どう変わるか? 
httpリクエスト 
Sails 
サーバーブラウザ 
htmlとか全て送信 
役割重い
Sails✕Marionetteで 
どう変わるか? 
Sails 
サーバーMarionette 
ブラウザ 
非同期通信 
JSON 
{ user: ‘iguchi’, age: ’21'} 
役割軽い!Json返すだけのサーバー
Sails✕Marionetteで 
どう変わるか? 
Sailsサーバーは常にres.jsonでOK! 
viewフォルダ必要なくなる。 
assetsフォルダもいらない。 
リクエストされるURLは決まっているので、blueprintsは全...
2014/12/15(Mon) 
今日のアウトライン 
Sails✕Marionetteでどう変わるか? 
今回使うSailsChatアプリの説明 
Sails✕Marionetteアプリを作ろう! 
4回のWorkShopで触れなかった重要部...
今回使う 
SailsChatアプリの説明 
https://github.com/igtm/ 
SailsChatFront 
https://github.com/igtm/SailsChatBack 
両者をgrunt sailslift...
2014/12/15(Mon) 
今日のアウトライン 
Sails✕Marionetteでどう変わるか? 
今回使うMarionetteアプリの説明 
Sails✕Marionetteアプリを作ろう! 
4回のWorkShopで触れなかった重要...
Sails✕Marionette 
でappを作ろう! 
https://github.com/igtm/SailsChatFront 
https://github.com/igtm/SailsChatBack
環境設定
front-backの分離に 
必要な環境設定 
sails.io.jsをmarionetteのvenderに入 
れ,init.jsで定義。使うときは、各ファイルで定 
義する 
sails.io.jsのL615を、sailsがある場所に変 ...
アプリの大枠説明
ページ遷移 
LoginPage TopPage 
Room1 
Room2 
Room3
ModelとController 
Marionette Sails 
User 
Chat 
User 
Chat 
(永続化する 
なら必要) 
User 
Controller 
Chat 
Controller 
Room 
Contr...
Controllerの役割 
User 
Controller 
Chat 
Controller 
Room 
Controller 
Userの作成、ログイン 
Chatの送信 
Roomの入室、退室管理
Socketによる、データの 
リアルタイム受け渡し部分
UserModel
UserModel 
marionette Sails 
io.socket.get() 
io.socekt.on(‘user’) 
User.subscribe() 
OK!変更があったら通知するね 
[create,destroy] 
U...
UserModel 
左上(フロント側) 
views/page/LoginItemV.js: L40 
modelのsubscribeメソッド(自作)で 
io.socket.postしてサーバーに購読させる。
UserModel 
右上(サーバー側) 
UserController.jsのsubscribe 
L17: 他人のpublishCreateを購読するwatch 
L18: 他人の変更(UserModelの 
autosubscribeに記...
UserModel 
右下(サーバー側) 
UserController.jsのsubscribe 
L20: createしたと発行
UserModel 
左下(フロント側) 
modules/socket_manager.js 
L16: userに変更があったら呼び出し 
L19: verbごとに処理を分岐
RoomModel
RoomModel 
クライアントサーバー 
io.socket.post() 
io.socekt.on(‘room’) 
Room.subscribe() 
Room.publishAdd() 
switch(msg.verb) 
- ad...
RoomModel 
左上(フロント側) 
TopItemV.js L43 
room/:room_id/users/:idにpost
RoomModel 
右上(サーバー側) 
RoomController.js L10 enter 
L13: room_idで購読。購読する動作は 
RoomModelのautosubscribeに記載
RoomModel 
右下(サーバー側) 
addToとremoveFromは後で説明 
messageは ChatController: L15
RoomModel 
左下(フロント側) 
modules.socket_manager 
L17: roomに変更があったら呼び出し 
L28: verbごとに処理を分岐
取り敢えずここまで理解し 
ていればOK!
細かい説明
ModelのAssociations 
難易度:★★★★★★★★★★★★★ 
大袈裟(笑)
ModelのAssociations 
リレーショナル・データベースのジョイントテー 
ブルのようなものを作る機能
ModelのAssociations 
仮想属性を設定 
相手が1ならmodel: ‘Model名’ 
相手が多ならcollection: ‘Model名’ 
via: ‘相手の仮想属性名’ 
多対多なら片方に優先設定 dominant: tr...
ModelのAssociations 
modelを結合してデータを得るには? 
populate(‘仮想属性’)でmodelを引っ張って 
きてくれる。
Blueprintsの 
addとremove 
難易度:★★★★★
Blueprintsの 
add toとremove from 
post /model/:id/collection名 
で指定実体modelのcollectionにidを追加 
delete /model/:id/collection名 
...
post /model/:id/collection名/:id 
勝手に:idを追加してくれて、 
publishAddまでしてくれる
豆知識
購読の階層 
Subsequent calls to 
subscribe are 
cumulative 
add:users 
今回は特に無しcreate 
remove:users 
destroy 
message 
UserModel...
共有化できるモジュール
Socekt_manager 
Socketの変更を受信して、各種命令を出すオ 
リジナルmodule 
msg.verbで振り分けて、処理。 
Page_managerは現在どのページにいるかな 
どを取得するオリジナルプラグイン
Finished!! 
お疲れ様でした!
2014/12/15(Mon) 
今日のアウトライン 
Sails✕Marionetteでどう変わるか? 
今回使うMarionetteアプリの説明 
Sails✕Marionetteアプリを作ろう! 
4回のWorkShopで触れなかった重要...
非同期I/O処理 
出典:使いたくなる理由2:非同期I/O処理のnode.jsがサーバーリソースを抑える
非同期I/O通信 
a() 
b() 
c() 
I/O処理に関して上記関数が順番に実行される保証は 
ない。
非同期I/O通信 
a(b(c())) 
コールバックとして書くことで順番が担保される。 
⇒コールバック地獄にならないように注意。
URL一覧 
https://github.com/igtm/ 
SailsChatFront 
https://github.com/igtm/ 
SailsChatBack 
https://github.com/balderdashy/ ...
Sails workshop4
Sails workshop4
Prochain SlideShare
Chargement dans…5
×

Sails workshop4

1 269 vues

Publié le

This is an slide at in-house sails workshop.

Publié dans : Ingénierie
  • Soyez le premier à commenter

Sails workshop4

  1. 1. Sails WorkShop (4) 立命館大学 経営学部3回生  井口智勝
  2. 2. SailsWorkShop の目的 <for All> Watnowにリアルタイム通信技術を導入する <for One> 取り敢えず、書けるようになること。(スピード重視) ある程度、体系的な知識化もしていく。
  3. 3. Sails WorkShop Menu 1回目:Sailsって何?CRUDappを作ろう! 2回目:Policiesの使い方 ~sessionや認証~ 3回目:appをリアルタイム化しよう! 4回目:Sails✕Marionette 5回目:細かい部分の共有など...
  4. 4. ※今日は結構 コアにせまります。
  5. 5. 2014/12/1(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うMarionetteアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  6. 6. Sails✕Marionetteで どう変わるか? httpリクエスト Sails サーバーブラウザ htmlとか全て送信 役割重い
  7. 7. Sails✕Marionetteで どう変わるか? Sails サーバーMarionette ブラウザ 非同期通信 JSON { user: ‘iguchi’, age: ’21'} 役割軽い!Json返すだけのサーバー
  8. 8. Sails✕Marionetteで どう変わるか? Sailsサーバーは常にres.jsonでOK! viewフォルダ必要なくなる。 assetsフォルダもいらない。 リクエストされるURLは決まっているので、blueprintsは全 てfalseでよい。(というかセキュリティ上切るべき。仕組み がわかっているなら、利用することでコード量を減らせる。今 回はrestだけ使います。)
  9. 9. 2014/12/15(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うSailsChatアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  10. 10. 今回使う SailsChatアプリの説明 https://github.com/igtm/ SailsChatFront https://github.com/igtm/SailsChatBack 両者をgrunt sailsliftで立ち上げてみる と、、、? オリジナルアプリです!!
  11. 11. 2014/12/15(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うMarionetteアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  12. 12. Sails✕Marionette でappを作ろう! https://github.com/igtm/SailsChatFront https://github.com/igtm/SailsChatBack
  13. 13. 環境設定
  14. 14. front-backの分離に 必要な環境設定 sails.io.jsをmarionetteのvenderに入 れ,init.jsで定義。使うときは、各ファイルで定 義する sails.io.jsのL615を、sailsがある場所に変 更。 config/cors.js allRoutes: true
  15. 15. アプリの大枠説明
  16. 16. ページ遷移 LoginPage TopPage Room1 Room2 Room3
  17. 17. ModelとController Marionette Sails User Chat User Chat (永続化する なら必要) User Controller Chat Controller Room Controller 多 多 Room 多1 Room (roomを作成削 除するようなら 必要)
  18. 18. Controllerの役割 User Controller Chat Controller Room Controller Userの作成、ログイン Chatの送信 Roomの入室、退室管理
  19. 19. Socketによる、データの リアルタイム受け渡し部分
  20. 20. UserModel
  21. 21. UserModel marionette Sails io.socket.get() io.socekt.on(‘user’) User.subscribe() OK!変更があったら通知するね [create,destroy] User.publishCreate() switch(msg.verb) - created - destroyed subscribe 私はこういうものです。 新しいユーザーが ログインしたよ! 了解!通知出します! User.publishDestroy() ユーザーが ログアウトしたよ!
  22. 22. UserModel 左上(フロント側) views/page/LoginItemV.js: L40 modelのsubscribeメソッド(自作)で io.socket.postしてサーバーに購読させる。
  23. 23. UserModel 右上(サーバー側) UserController.jsのsubscribe L17: 他人のpublishCreateを購読するwatch L18: 他人の変更(UserModelの autosubscribeに記載)を購読する。
  24. 24. UserModel 右下(サーバー側) UserController.jsのsubscribe L20: createしたと発行
  25. 25. UserModel 左下(フロント側) modules/socket_manager.js L16: userに変更があったら呼び出し L19: verbごとに処理を分岐
  26. 26. RoomModel
  27. 27. RoomModel クライアントサーバー io.socket.post() io.socekt.on(‘room’) Room.subscribe() Room.publishAdd() switch(msg.verb) - addedTo - removedFrom - messaged enter 私はこういうものです。OK!変更があったら通知するね [add:users, remove:users,message] 新しいユーザーが 入室したよ! 了解!通知出します! Room.message() ユーザーが 投稿したよ!
  28. 28. RoomModel 左上(フロント側) TopItemV.js L43 room/:room_id/users/:idにpost
  29. 29. RoomModel 右上(サーバー側) RoomController.js L10 enter L13: room_idで購読。購読する動作は RoomModelのautosubscribeに記載
  30. 30. RoomModel 右下(サーバー側) addToとremoveFromは後で説明 messageは ChatController: L15
  31. 31. RoomModel 左下(フロント側) modules.socket_manager L17: roomに変更があったら呼び出し L28: verbごとに処理を分岐
  32. 32. 取り敢えずここまで理解し ていればOK!
  33. 33. 細かい説明
  34. 34. ModelのAssociations 難易度:★★★★★★★★★★★★★ 大袈裟(笑)
  35. 35. ModelのAssociations リレーショナル・データベースのジョイントテー ブルのようなものを作る機能
  36. 36. ModelのAssociations 仮想属性を設定 相手が1ならmodel: ‘Model名’ 相手が多ならcollection: ‘Model名’ via: ‘相手の仮想属性名’ 多対多なら片方に優先設定 dominant: true
  37. 37. ModelのAssociations modelを結合してデータを得るには? populate(‘仮想属性’)でmodelを引っ張って きてくれる。
  38. 38. Blueprintsの addとremove 難易度:★★★★★
  39. 39. Blueprintsの add toとremove from post /model/:id/collection名 で指定実体modelのcollectionにidを追加 delete /model/:id/collection名 で指定実体modelのcollectionにidを削除
  40. 40. post /model/:id/collection名/:id 勝手に:idを追加してくれて、 publishAddまでしてくれる
  41. 41. 豆知識
  42. 42. 購読の階層 Subsequent calls to subscribe are cumulative add:users 今回は特に無しcreate remove:users destroy message UserModel ログイン時room入室時 ChatModel Chat投稿時 RoomModel
  43. 43. 共有化できるモジュール
  44. 44. Socekt_manager Socketの変更を受信して、各種命令を出すオ リジナルmodule msg.verbで振り分けて、処理。 Page_managerは現在どのページにいるかな どを取得するオリジナルプラグイン
  45. 45. Finished!! お疲れ様でした!
  46. 46. 2014/12/15(Mon) 今日のアウトライン Sails✕Marionetteでどう変わるか? 今回使うMarionetteアプリの説明 Sails✕Marionetteアプリを作ろう! 4回のWorkShopで触れなかった重要部分
  47. 47. 非同期I/O処理 出典:使いたくなる理由2:非同期I/O処理のnode.jsがサーバーリソースを抑える
  48. 48. 非同期I/O通信 a() b() c() I/O処理に関して上記関数が順番に実行される保証は ない。
  49. 49. 非同期I/O通信 a(b(c())) コールバックとして書くことで順番が担保される。 ⇒コールバック地獄にならないように注意。
  50. 50. URL一覧 https://github.com/igtm/ SailsChatFront https://github.com/igtm/ SailsChatBack https://github.com/balderdashy/ sailsChat

×