node.jsによる お手軽画像uploader実装

9,852 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,852
On SlideShare
0
From Embeds
0
Number of Embeds
4,109
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

node.jsによる お手軽画像uploader実装

  1. 1. node.jsによるお手軽画像uploader実装 id:hakobe932 1
  2. 2. id:hakobe932
  3. 3. id:hakobe932❖ 普段やってること• エンジニア @はてな ‣ はてなブックマーク ‣ 関西最速アニメ調査❖ 好きなプログラミング言語•Perl/Ruby/Scala•JavaScript ← new!!! 3
  4. 4. tray
  5. 5. tray❖ 画像アップローダ•お手軽D&Dアップロード•アップロード数の制限•❖ リアルタイム 少し遊んでみましょう!!•http://tray.douzemille.net:8080 5
  6. 6. 簡単インストール$ brew install node$ brew install redis$ git clone https://github.com/hakobe/tray.git$ cd tray$ npm install$ node app.js 6
  7. 7. 実装
  8. 8. trayの実装 Clientアップロード 画像リスト 更新通知 Server express socket.io Node Redis 8
  9. 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. 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. 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. 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. 13. EventEmitter• オブジェクトがイベントを発行可能にfunction PanelManager() { events.EventEmitter.call(this);}util.inherits(PanelManager, events.EventEmitter);PanelManager.prototype.addPanel = function(panel) { // ... いろんなメソッドの実装 ... 13
  14. 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. 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. 16. socket.io(クライアント)❖ 通知が来たら再読み込みvar socket = io.connect(location.href);socket.on(paneladd, function () { showPanels();}); 16
  17. 17. その他•クライアントサイド‣ Drag and Drop API‣ FromData‣ Zepto 17
  18. 18. まとめ❖ tray • お手軽画像アップローダ • node.jsっぽい技術つまみぐい • 12枚のパネルをきれいにそろえよう Fork me on GitHubhttps://github.com/hakobe/tray 18

×