node.js koとhtml5とwebsocketsと

2,838 views

Published on

第四回SCDN

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

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

No notes for slide

node.js koとhtml5とwebsocketsと

  1. 2. outline <ul><li>誰?
  2. 3. node.js knockout
  3. 4. pictshare </li><ul><li>node.js
  4. 5. html5
  5. 6. websockets </li></ul></ul>
  6. 7. 誰? <ul><li>california state university, northridge </li><ul><li>学士 / 修士 in computer science
  7. 8. multitouchj: multitouch framework in java </li></ul><li>jet propulsion laboratory </li><ul><li>software engineer </li></ul><li>@atsuya
  8. 9. http://github.com/atsuya
  9. 10. ゆきぽん(嫁) </li></ul>
  10. 12. node.js knockout <ul><li>node.js を使って 48 時間でなんかカッコいいウェブアプリケーションを作る
  11. 13. 1 - 4 人のチーム
  12. 14. スクラッチから書く
  13. 15. コードは全て github にチェックインして、最後は heroku か joyent にデプロイする
  14. 16. 審査員、一般の人が投票し、一番ポイントの高かったチームの勝ち
  15. 17. 200 チームほどが参加 </li></ul>
  16. 18. node.js knockout
  17. 19. node.js knockout <ul><li>Ge Wang </li><ul><li>ChucK の作者
  18. 20. stanford university で assistant professor </li></ul><li>John Resig </li><ul><li>Firefox の開発者
  19. 21. jQuery の作者 </li></ul><li>Ryan Dahl </li><ul><li>Node.js の作者 </li></ul></ul>
  20. 22. node.js knockout <ul><li>Angus Logan / Windows Live, Andy Brett / TechCrunch, Brendan Eich / Mozilla, Andrew Hill / LinkedIn, Joe Hewitt / Firebug | Facebook, Atul Varma / Mozilla, Mary Glide / Sequoia Capital, Mohammed Abdoolcarim / Siri|Apple, Elad Gil / Twitter, Tom Nguyen / Adobe Systems, Matt Soldo / Heroku, Elizabeth Cha / Google, Mikeal Rogers / CouchDB | Couchio, Ryan Grove / Yahoo!, Eliot Horowitz / 10gen | MongoDB... </li></ul>
  21. 24. node.js knockout <ul><li>asuka </li><ul><li>谷村さん
  22. 25. 高木さん </li></ul><li>ウェブブラウザ間のファイルの転送! </li><ul><li>早い段階で挫折 </li></ul><li>ウェブブラウザ間でリアルタイムに写真の共有! </li><ul><li>pictshare </li></ul></ul>
  23. 27. pictshare <ul><li>node.js がサーバ </li><ul><li>クライアントから ajax で画像のデータを受ける
  24. 28. 画像のデータを couchdb に保存する
  25. 29. websockets を使って、接続しているクライアント全てに受け取った画像のデータを送る </li></ul><li>web browser がクライアント </li><ul><li>ユーザーがドラッグアンドドロップした画像を ajax でサーバーに送る
  26. 30. サーバーから送られてきた画像を動的に表示する </li></ul></ul>
  27. 31. Demo
  28. 32. pictshare
  29. 34. node.js <ul><li>“ Evented I/O for V8 JavaScript.” </li></ul>
  30. 35. node.js <ul><li>沢山の接続を同時に処理する </li></ul><ul><ul><li>“ Node tells the operating system (through epoll, kqueue, /dev/poll, or select) that it should be notified when a new connection is made, and then it goes to sleep.” </li></ul><li>asynchronous </li><ul><li>“ users of Node are free from worries of dead-locking the process—there are no locks. Almost no function in Node directly performs I/O, so the process never blocks.” </li></ul></ul>
  31. 36. node.js
  32. 37. node.js
  33. 38. node.js
  34. 39. node.js
  35. 40. html5 <ul><li>ファイルのドラッグアンドドロップのサポート </li></ul>
  36. 41. websockets <ul><li>“ is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket”
  37. 42. firefox 4, google chrome 4, opera 10.70, safari 5
  38. 43. リアルタイムを達成するのに、 ajax と違ってクライアントが定期的に poll しなくてもサーバ側から push 出来る </li></ul>
  39. 45. websockets <ul><li>クライアント側のコード </li></ul>
  40. 46. websockets <ul><li>サーバ側のコード </li></ul>
  41. 47. node.js knockout の結果 <ul><li>57/98
  42. 48. Ge Wang </li></ul><ul><ul><li>“ really like the simple collaborative aspect of this. it was fairly unclear what to do at first or what the five squares below meant, until someone else participated.” </li></ul><li>John Resig </li><ul><li>“ ...There were a few other users connected when I tried it and we share a couple pictures with each other, which was mildly entertaining...” </li></ul></ul>
  43. 49. node.js knockout の結果 <ul><li>Ryan Dahl </li></ul><ul><ul><li>“ Neat concept! Snappy response time. I could see how this could be fun. I would have liked to be able to enter images by URL and/or from webcam. Images should be &quot;sticky&quot; to new users coming to the site - so they don't get blanks. “ </li></ul></ul>
  44. 50. 結論 <ul><li>面白かった
  45. 51. 知らなくてもどうにでもなる
  46. 52. 有名なハッカーから自分の作ったものを見てもらえたりコメントをもらえたりする
  47. 53. やったほうがいい! </li></ul>
  48. 54. 結論 <ul><li>http://github.com/atsuya/pictshare </li></ul>
  49. 55. ありがとうございました!

×