位置情報付きのつぶやきをGoogle Maps上にリアルタイムに表示する方法


Twitter Streaming APIで取得したツイートをブラウザにプッシュする方法の続きです。

2、3年前に、位置情報付きのつぶやきをGoogle Maps上にリアルタイムに表示するウェブアプリを作りました(動画)。そのときは、クライアントの言語に自動翻訳したり、つぶやきを読み上げてみたり、Google Earthにも対応したりしていたのですが、利用していたサービスが終わってしまったり、APIのバージョンが変わってしまったりしたために、動かなくなってしまいました。

そこで、ここではエッセンスのみを再現してみようと思います。当時はサーバで受信したTwitterのストリーミングデータをブラウザに送信するのはちょっと面倒だったのですが、node.js(とSocket.IO)が使える今では、「あの苦労は何だったんだ?」という感じになっています。

以下のリンクで試せます。

自分のマシンで動かしてみたい場合は、https://github.com/taroyabuki/twitearthを参照してください。

Twitter Streaming APIで取得したツイートをブラウザにプッシュする方法


「node.jsでTwitter Streaming APIを利用する方法」の続きです。

Streaming APIを使ってサーバで受信したつぶやきをブラウザにプッシュするには、Socket.IOを使うのが簡単です。

準備

必要なパッケージをインストールします。

npm install socket.io express ntwitter

サーバ側

Streaming APIで取得したツイートの情報を、次のようなJavaScriptコード(server.jsとします)でクライアントにプッシュします。consumer_keyconsumer_secretaccess_token_keyaccess_token_secretの部分は適切なもので埋めます。

var express = require('express')
  , app = express()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);

//port: Heroku || AppFog || 3000
var port = process.env.PORT || process.env.VMC_APP_PORT || 3000;
server.listen(port);

app.use(express.static(__dirname + '/public'));

var twitter = require('ntwitter');
var tw = new twitter({
  consumer_key: '',
  consumer_secret: '',
  access_token_key: '',
  access_token_secret: ''
});

tw.stream('statuses/sample', function(stream) {
  stream.on('data', function (data) {
    io.sockets.emit('message', {
      'text': data.text
    });
  });
});

つぶやきを受信すると、「io.sockets.emit()」を呼び出し、つぶやきの本文を全クライアントにブロードキャストします(「io.sockets.volatile.emit()」ではよくないようです)。この例では、「io.sockets.emit()」の引数は単なる文字列でもいいのですが、他の情報もブロードキャストしたい場合を考慮して、上のようなオブジェクトにしています。

クライアント側

次のようなHTMLファイルpublic/index.htmlを作ります。サーバからプッシュされたツイートの情報をページに追記しています(最大100個まで)。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <title>statuses/sample</title>
</head>
<body>
  <script>
    $(document).ready(function() {
      var socket = io.connect();
      socket.on('message', function(data) {
        $('<p>' + data.text + '</p>').prependTo('body');
        $('p:eq(100)').remove();    
      });
    });
  </script>
</body>
</html>

実行

node server.js」として実行し、ウェブブラウザから「http://localhost:3000/」にアクセスすると、大量のツイートが流れていく様子が見られるでしょう。

つづき:位置情報付きのつぶやきをGoogle Maps上にリアルタイムに表示する方法

node.jsでTwitter Streaming APIを利用する方法


ntwitterを使って簡単に実現できます(他にもいろいろあるかもしれませんが、最初に試したのがntwitterでした)。

取得した情報をコンソールに出力するだけの簡単な例を作ってみましょう。

まず、Twitter Developerでアプリを登録し、consumer_keyconsumer_secretaccess_token_keyaccess_token_secretを取得します。

node.jsをインストールします。

sudo apt-get install git npm # Ubuntu 12.04
sudo apt-get install git npm nodejs-legacy # Ubuntu 12.10

ntwitterをインストールします。

npm install ntwitter

次のようなJavaScriptファイルを作ります(server.jsとします)。consumer_keyconsumer_secretaccess_token_keyaccess_token_secretの部分は適切なもので埋めます。

var twitter = require('ntwitter');
var tw = new twitter({
  consumer_key: '',
  consumer_secret: '',
  access_token_key: '',
  access_token_secret: ''
});

tw.stream('statuses/sample', function(stream) {
  stream.on('data', function (data) {
    console.log(data);
  });
});

実行します。

node server.js

つぶやきを受信すると、「console.log(data)」を実行し、JSON形式で表示します。

続き:Twitter Streaming APIで取得したツイートをブラウザにプッシュする方法

OneMaps—1つの地図・複数のブラウザ


GitHub: http://taroyabuki.github.com/OneMaps/

動画

インストール

まず、npmをインストールします。

sudo apt-get install git npm # Ubuntu 12.04
sudo apt-get install git npm nodejs-legacy # Ubuntu 12.10

GitHubからソースコードを持ってきます。

git clone https://github.com/taroyabuki/OneMaps.git

関連するライブラリをインストールします。AppFogを使う場合は、「af update」の前にこの作業が必要です。

cd OneMaps
npm install

実行

node server.js

複数のブラウザから、「http://localhost:3000/」にアクセスしてください。

PaaS

HerokuAppFogで動作を確認しています。

ライセンス

GNU General Public License, Version 3.0.

複数のブラウザで1枚の地図を作るNode.jsアプリケーション


4774153206Node.jsのサンプルというとまずは「チャット」なのですが、「前からできたじゃん、何が新しいの?」とか言われるだけなので、もう少し派手なのを作りました。

複数のブラウザで1枚の地図を作るNode.jsアプリケーションを、試せるようにしてみました。

お試しサイト1 (AppFog)お試しサイト2 (Heroku)

わずかな主記憶だけでやっているので、アクセスが多くなるとダメになるかもしれません。

動く様子を再掲します。

追記:コードはここからたどれます。