新卒入社3年目のエンジニア集団。それぞれが広告関連システム、ビデオ関連サービス、地図関連サービスの開発に関わる傍ら、Node.js、MongoDB、HTML5を組み合わせたブラウザ上で動作する社内用メッセンジャーツールを開発や、WebSocketを使った実験的地図サービスの開発をおこなっている。これらを実験場として、ブラウザの最新仕様やNode.jsのノウハウをヤフー社内に普及・啓蒙中。

1. Node.jsで
ブラウザメッセンジャー
ヤフー株式会社 R&D統括本部
石澤 基、濱邉 将太、栗山 太希
2011年10月29日（土） 東京Node学園祭 2011

2. Yahoo! JAPAN
2

3. 講演者紹介
石澤 基
R&D統括本部 プラットフォーム開発本部 広告開発2部 開発4
濱邉 将太
R&D統括本部 フロントエンド開発1本部 開発5部 開発2
栗山 太希
R&D統括本部 プラットフォーム開発本部 広告開発1部 開発4
3

4. HackDayのご紹介
• NodeKOのような社内開発イベント
• 8時間×3日+発表会
• 2分間LTでの社内に向けて発表
4

5. MYM
• とにかくNode.jsが使いたい！
• HackDay期間中にNode.jsで開発
• HTML5 + Node.js + MongoDB
• ブラウザ上で動作するメッセンジャーツール
5

6. MYMフロントエンド
6

7. コンセプト
• コンセプトは実験場
– HTML5
• WebSocket、 Web Worker、 Web Notification、
File API、 Drag and Drop、 History API、…
– ブラウザに先行実装された機能
• とにかく気になる機能を実験的に
使ってみる
7

8. Demo
8

9. クライアントサイド検索
Node Server 検索開始時
server のみ通信
client
Web
Worker
ユーザ検索 ルーム検索 ログ検索
UI
9

10. 脱ライブラリのススメ
• JavaScriptエンジンの高速化
• ネイティブメソッドの充実
• CSS3によるアニメーション
• ブラウザ仕様の統一
• JavaScriptライブラリの利用は昔
ほど必須ではなくなっている
10

11. 脱jQuery
⇊
JS力の向上
⇊
Node力の向上
11

12. バックエンドサーバ
12

13. バックエンドの構成
13

14. Node.js
MongoDB
WebSocket
14

15. アプリケーションサーバの実装
（Node.js）
15

16. 常時起動のサーバと言えば、
16

17. シグナルハンドラ
17

18. process.on('SIGINT', function () {
// 諸々の後始末
// exit
});
18

19. process.on('SIGHUP', function () {
try {
// コンフィグの構文チェック
}
catch (err) {
return util.log(err.stack);
}
// 諸々の後始末
// exit
});
19

20. process.on('uncaughtException', function (err) {
util.log(err.stack);
});
20

21. コンフィグファイル
21

22. $ cat conf.json
{
"maxConnections" : 1000,
"port" : 9999,
"messageBufferSize" : 8192,
...
}
22

23. try {
var data = fs.readFileSync('conf.json');
config = JSON.parse(data);
}
catch (err) {
util.log(err.stack);
// exit
}
// 1000
console.log(config.maxConnections);
23

24. Node.js v0.5.2
try {
config = require('conf.json');
}
catch (err) {
util.log(err.stack);
// exit
}
24

25. ロギング
25

26. • util.log(err.stack);
// 28 Oct 14:54:56 - ReferenceError: test is not defined
// at [object Context]:1:7
// at Interface.<anonymous> (repl.js:171:22)
// at ReadStream.onData (tty_posix.js:70:12)
// ...
• util.log('message');
// 28 Oct 15:33:36 - message
26

27. MongoDB
27

28. node-mongodb-native
https://github.com/christkv/node-mongodb-native
28

29. スキーマレス
BSON
29

30. function onMessage (data) {
var message = JSON.parse(data);
collection.save(message, function(err, doc) {
// if (err) ...
server.broadcast(JSON.stringify(doc));
});
}
30

31. 抜群の相性
31

32. {
"type" : "message",
"date" : 1319792185,
"_id" : "343ea44e42f0ef0001000000",
....
}
32

33. WebSocket
33

34. WebSocket-Node
https://github.com/Worlize/WebSocket-Node
34

35. ちょっとしたエピソード
35

36. ２回のコード書き換え
36

37. １回目
37

38. マルチプロセスからシングルプ
ロセスに
38

39. 数百人が同時に常時接続
39

40. 非同期I/Oとはいえ・・・
40

41. 最初はマルチプロセス
41

42. ・・・
42

43. プロセス間通信が大変
43

44. シングルプロセスに変更
44

45. 全く問題なかった
45

46. 見積りは大事！
46

47. ２回目
47

48. ブラウザのバージョンアップ
48

49. WebSocketの仕様変更
49

50. 下位互換性がない
50

51. ライブラリの変更
51

52. 互換性のあるライブラリがない
52

53. WebSocket-Nodeに
モンキーパッチ
53

54. ということがあった２日後
54

55. Socket.IOのアップデート
55

56. 新バージョンサポート
旧バージョン互換性あり
56

57. Socket.IO オススメ！
57

58. Nodeで実装してみて
58

59. お手軽
59

60. ネットワークプログラミングの味方
60

61. 次のHackDayもNodeで
61

62. まとめ
• 中規模アプリ開発には最適
– オールJavaScriptの生産性
– MongoDBの柔軟性
• Socket.IOはオススメ
• 脱jQueryでJS力アップ！Node力アップ！
62

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