1. node.jsによる
お手軽画像uploader実装
id:hakobe932
1

2. id:hakobe932

3. id:hakobe932
❖ 普段やってること
• エンジニア @はてな
‣ はてなブックマーク
‣ 関西最速アニメ調査
❖ 好きなプログラミング言語
•Perl/Ruby/Scala
•JavaScript ← new!!!
3

4. tray

5. tray
❖ 画像アップローダ
•お手軽D&Dアップロード
•アップロード数の制限
•
❖
リアルタイム
少し遊んでみましょう!!
•http://tray.douzemille.net:8080
5

6. 簡単インストール
$ brew install node
$ brew install redis
$ git clone https://github.com/
hakobe/tray.git
$ cd tray
$ npm install
$ node app.js
6

7. 実装

8. trayの実装
Client
アップロード 画像リスト 更新通知
Server
express socket.io
Node Redis
8

9. API(app.js)
❖ express でディスパッチ
1 app.get( // トップページ
2 '/', routes.index.index);
3 app.get( // パネル一覧
4 '/api/panels.json', routes.api.panels);
5 app.post( // パネル画像アップロード
6 '/api/upload.json', routes.api.upload);
9

10. routes/api.js
// 画像一覧
exports.panels = function(req, res) {
var from = req.query.from;
panelManager.retrievePanels(from, function( panels ) {
res.json(200, panels);
}); redisから
};
画像リスト取得
// 画像アップロード
exports.upload = function(req, res) {
var file = req.files;
if (file && file.imageFile) {
// ... 省略中 ...
} 次のスライドで説明
}
10

11. 画像の登録
アップロードされた
panelManager.createId(function(id) { ファイルを移動
fs.rename( req.files.imageFile.path, path, function(err) {
var panel = {
id : id,
imageName : path.basename(path),
};
panelManager.addPanel( panel );
res.redirect('/'); panelManagerが登録
});
});
• expressがアップロードをハンドル
‣ bodyParserのuploadDirを指定しとく
• 追加はPanelManagerが担当
11

12. PanelManager
• Redisに画像の情報を追加
PanelManager.prototype.addPanel = function(panel) {
redisClient.zadd(
redisKey('panels'),
panel.id, Sorted Setにデータ追加
JSON.stringify(panel),
redis.print
);
this.emit('add', panel);
return panel; add イベントをemit
},
12

13. EventEmitter
• オブジェクトがイベントを発行可能に
function PanelManager() {
events.EventEmitter.call(this);
}
util.inherits(PanelManager, events.EventEmitter);
PanelManager.prototype.addPanel = function(panel) {
// ... いろんなメソッドの実装 ...
13

14. PanelManager.prototype.addPanel = function(panel) {
redisClient.zadd(
redisKey('panels'),
panel.id,
JSON.stringify(panel),
redis.print
);
this.emit('add', panel);
return panel;
}, 別のコンテキストで登録された
処理を実行
var panelManager = new PanelManager();
panelManager.on('add', function() {
// panelManager.emit('add') されたときの処理
});
14

15. socket.io (app.js)
❖ パネル追加時クライアント全体に通知
var io = require('socket.io').listen(server);
var panelManager = new PanelManager();
panelManager.on('add', function(panel) {
io.sockets.emit('paneladd');
})
クライアント全体に paneladd
イベントを通知
PanelManagerとsocket.ioの
振舞いを分離しておける
15

16. socket.io(クライアント)
❖ 通知が来たら再読み込み
var socket = io.connect(location.href);
socket.on('paneladd', function () {
showPanels();
});
16

17. その他
•クライアントサイド
‣ Drag and Drop API
‣ FromData
‣ Zepto
17

18. まとめ
❖ tray
• お手軽画像アップローダ
• node.jsっぽい技術つまみぐい
• 12枚のパネルをきれいにそろえよう
Fork me on GitHub
https://github.com/hakobe/tray
18