node.jsによる お手軽画像uploader実装
- 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