speg03の雑記帳

主に未来の自分のために試したことなどを記録しています

jQuery + WEBrick + Rubytter

ruby twitter javascript

前回の記事で、jQueryから直接Twitterにpostできなかったので、間にRubyのTwitter APIであるRubytterをかませることにした。で、それを呼ぶためにWEBrickでHTTPサーバを作った。

ソースコード

twitter_server.rb: Twitterとの通信を仲介するHTTPサーバ
twitter.js: フロントエンドのイベント処理とか表示とか
index.html: 表示用ページ

今回は60秒ごとに自分のフレンドタイムラインを更新するようなのを作った。

twitter_server.rb

アカウント情報は $HOME/.twitter/account.yml にYAML形式で書いとく。

require 'webrick'
require 'yaml'

require 'rubygems'
require 'rubytter'

account = YAML.load_file(ENV['HOME'] + '/.twitter/account.yml')
username = account['username']
password = account['password']

rubytter = Rubytter.new(username, password)
server = WEBrick::HTTPServer.new({:Port => 10080})

server.mount('/', WEBrick::HTTPServlet::FileHandler, Dir::pwd)

server.mount_proc('/friends_timeline') do |req, res|
  res.header['Content-Type'] = 'text/javascript; charset=utf-8'

  params = req.query['since_id'] ? {:since_id => req.query['since_id']} : {}
  res.body = rubytter.friends_timeline(params).to_json
end

trap('INT') do
  server.shutdown
end

server.start

twitter.js

var last_status_id;

$(document).ready(function () {
    get_friends_timeline();
    setInterval(function () {
        get_friends_timeline();
    }, 60 * 1000);
});

function get_friends_timeline() {
    var params = (last_status_id) ? { since_id: last_status_id } : {};
    $.getJSON('/friends_timeline', params, function (data) {
        last_status_id = data[0].id;

        sort_by_status_id(data);
        $.each(data, function (i, status) {
            insert_status(status);
        });
    });
}

function insert_status(status) {
    format_status(status).appendTo('#output');
}

function format_status(status) {
    var status_line = $('<div class="status" />');
    status_line.attr('id', status.id);
    $('<span class="name" />').text(status.user.screen_name).appendTo(status_line);
    $('<span class="text" />').text(': ' + status.text).appendTo(status_line);

    return status_line;
}

function sort_by_status_id(data) {
    data.sort(function (s1, s2) {
        return s1.id - s2.id;
    });
}

index.html

<html>
  <head>
    <title>Twitter</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="twitter.js"></script>
  </head>
  <body>
    <div id="output"></div>
  </body>
</html>

実行してみる

$ ls
index.html  jquery-1.3.2.min.js  twitter.js  twitter_server.rb
$ ruby twitter_server.rb
[2009-09-27 23:03:03] INFO  WEBrick 1.3.1
[2009-09-27 23:03:03] INFO  ruby 1.8.5 (2006-08-25) [i386-linux]
[2009-09-27 23:03:03] INFO  WEBrick::HTTPServer#start: pid=3942 port=10080

この状態で http://HOSTNAME:10080/ へブラウザからアクセスするとOK。

参考