Your SlideShare is downloading. ×
node.jsによる お手軽画像uploader実装
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

8,602
views

Published on

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,602
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 GitHubhttps://github.com/hakobe/tray 18