Drkcore

26 04 2012 coffeescript Node.js Tweet

ナウなヤングのnow.js

now.js楽ちんですね。

twitter-streamとnow.jsを使ってリアルタイムにtweetを拾ってブラウザに表示したくなったのでやってみた。コード書いてる時に丁度スケットダンスが放映されていたたみたいで、twitterのトレンドに表示されてたのでこれを拾ってみた。

ちなみにジャンプは毎週読んでるけどスケットダンスはほとんど見ないのでついていけてませんな。

twst

スケルトン作成

とりあえずいつものようにコマンドを打って、スケルトンを作成

express twnow
cd twnow

package.jsonを修正して

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
    , "jade": ">= 0.25.0"
    , "ntwitter": ">= 0.3.0"
    , "now": ">= 0.8.1"
  }
}

依存モジュールをインストールする

npm install -d

コード

あとはコードを描く

app.coffee

twitter = require("ntwitter")
express = require("express")
routes = require("./routes")
nowjs = require("now")

twit = new twitter(
  consumer_key: "####"
  consumer_secret: "####"
  access_token_key: "####"
  access_token_secret: "###"
)

app = module.exports = express.createServer()
app.configure ->
  app.set "views", __dirname + "/views"
  app.set "view engine", "jade"
  app.use express.bodyParser()
  app.use express.methodOverride()
  app.use express.cookieParser()
  app.use express.session(secret: "tweetandsweet")
  app.use app.router
  app.use express.static(__dirname + "/public")

app.configure "development", ->
  app.use express.errorHandler(
    dumpExceptions: true
    showStack: true
  )

app.configure "production", ->
  app.use express.errorHandler()

everyone = nowjs.initialize(app)

app.get "/", (req, res) ->
  console.log req.session.user_profile
  res.render "index",
    title: "twitter streaming and now.js"

twit.stream(
  'statuses/filter'
  {track:['#sketdance']}
  (stream) ->
    stream.on 'data', (data) ->
      everyone.now.receiveMessage data
      console.log data
)

app.listen 3000
console.log(
  "Express server listening on port %d in %s mode"
  app.address().port
  app.settings.env
)

style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

li.tweet {
  list-style-type:none;
  width: 500px;
}

img.tweet {
  float: left;
  padding-right: 20px;
}

hr {
  width: 500px;
  clear: left;
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

layout.jade

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type="text/javascript", src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
    script(src="/nowjs/now.js")
  body!= body

index.jade

h1= title
p sample apps
ul#messages
script
  $(document).ready(function() {
    now.receiveMessage = function(data) {
      $("#messages").prepend(
   '<li class="tweet"><img class="tweet" src=\"' + data.user.profile_image_url +'\">'+ data.text + '<hr></li>');
    }
  });

now.jsは抽象度が上がりすぎてて、裏で何が行われているかよく理解できないんだが、使うぶんには簡単ですね。IE7対策をしなくてもとりあえず動くので、それもお気に入りポイント(企業のブラウザはIEでしかも古いからねー)

ProductName 徹底解説 HTML5 APIガイドブック コミュニケーション系API編
小松 健作
秀和システム / 2730円 ( 2010-12 )


About

  • もう5年目(wishlistありマス♡)
  • 最近はPythonとDeepLearning
  • 日本酒自粛中
  • ドラムンベースからミニマルまで
  • ポケモンGOゆるめ

Tag

Python Deep Learning javascript chemoinformatics Emacs sake and more...

Ad

© kzfm 2003-2021