Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
node.jsによるお手軽画像uploader実装    id:hakobe932         1
id:hakobe932
id:hakobe932❖ 普段やってること• エンジニア @はてな ‣ はてなブックマーク ‣ 関西最速アニメ調査❖ 好きなプログラミング言語•Perl/Ruby/Scala•JavaScript ← new!!!              3
tray
tray❖ 画像アップローダ•お手軽D&Dアップロード•アップロード数の制限•❖ リアルタイム 少し遊んでみましょう!!•http://tray.douzemille.net:8080               5
簡単インストール$	 brew	 install	 node$	 brew	 install	 redis$	 git	 clone	 https://github.com/hakobe/tray.git$	 cd	 tray$	 npm	 i...
実装
trayの実装         Clientアップロード   画像リスト    更新通知                         Server   express   socket.io          Node           ...
API(app.js)❖ express でディスパッチ 1 app.get( // トップページ 2 /, routes.index.index); 3 app.get( // パネル一覧 4 /api/panels.json, routes...
routes/api.js//	 画像一覧exports.panels	 =	 function(req,	 res)	 {	 	 	 	 var	 from	 =	 req.query.from;	 	 	 	 panelManager.re...
画像の登録                                          アップロードされたpanelManager.createId(function(id)	 {                ファイルを移動	 	 	 ...
PanelManager•    Redisに画像の情報を追加PanelManager.prototype.addPanel	 =	 function(panel)	 {	 	 	 	 redisClient.zadd(	 	 	 	 	 	 ...
EventEmitter•  オブジェクトがイベントを発行可能にfunction	 PanelManager()	 {	 	 	 	 events.EventEmitter.call(this);}util.inherits(PanelMana...
PanelManager.prototype.addPanel	 =	 function(panel)	 {	 	 	 	 redisClient.zadd(	 	 	 	 	 	 	 	 redisKey(panels),	 	 	 	 	 ...
socket.io (app.js)❖ パネル追加時クライアント全体に通知var	 io	 =	 require(socket.io).listen(server);var	 panelManager	 =	 new	 PanelManager...
socket.io(クライアント)❖ 通知が来たら再読み込みvar socket = io.connect(location.href);socket.on(paneladd, function () {   showPanels();}); ...
その他•クライアントサイド‣ Drag and Drop API‣ FromData‣ Zepto              17
まとめ❖ tray • お手軽画像アップローダ • node.jsっぽい技術つまみぐい • 12枚のパネルをきれいにそろえよう   Fork me on GitHubhttps://github.com/hakobe/tray         ...
Upcoming SlideShare
Loading in …5
×

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

10,570 views

Published on

Published in: Technology
  • Be the first to comment

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

×