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

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

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

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

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

  • http://twitearth.unfindable.net/
  • http://twitearth.herokuapp.com/

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

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

HerokuとAppFogで動作を確認しています。

ライセンス

GNU General Public License, Version 3.0.

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

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

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

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

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

動く様子を再掲します。

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

大きいGoogle Mapsが見たかったので、タブレットをたくさん買いました

コンセプトはこんな感じです。

タブレットを並べるとこんな感じになります(結局のところ、普段使っているディスプレイのほうが大きいGoogle Mapsが見られるのですが)。

お試しサイトとソースコードをあとで公開します。

追記:お試しサイト1 (AppFog)・お試しサイト2 (Heroku)を公開しました。

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

お約束ですが、Google Mapsをプログラムで操作する方法を基本的なところから学びたいという場合は、拙著『Webアプリケーション構築入門』を参照してください。

『Webアプリケーション構築入門』の郵便番号検索システムをAppFog上で動かす方法

ウェブアプリ構築の入門書である拙著『Webアプリケーション構築入門 第2版』のゴールは、Google Mapsを活用する郵便番号検索システムです。サーバ・サイドのプログラミング言語はJavaとPHPのうち、好きな方を選んで読み進められるようになっています。

ウェブアプリを構築できるようになると、こんどはそれを公開したくなるわけですが、本書の想定読者には学生も入っているので、「まずサーバを用意して・・・」のようなコストのかかる方法ではなく、基本無料の公開方法が必要です。

Java版をHerokuで公開する方法と、PHP版をPHP Fogで公開する方法を以前紹介したのですが、PHP Fogが今年いっぱいでサービスを終了し、AppFogに移行するらしいので、それにあわせてAppFogを試します。

PHP Fogでは、無料では機能が不十分なMySQLを避けてSQLiteを使いましたが、AppFogのMySQLは容量が100MBあるので、郵便番号検索のためには十分です(逆にSQLiteは使えなくなりました。使えれば、移植作業は楽だったのですが)。(参考:AppFog Pricing

作業は以下の通りです。(Ubuntu 12.10 Desktopで動作を確認しました。)

1. AppFogのアカウントを作る。

2. コマンドラインツールをインストールする。(参考:AF Command Line Tool)

sudo apt-get install ruby
sudo gem install af

3. ログインする。

af login

4. アプリを作成し、そこにMySQLサービスを追加、バインドする(ここ、かなり説明を端折っています)。

af bind-service {サービス名} {アプリ名}

5. データベースを準備する。

sudo apt-get install ruby-dev g++ mysql-client libssl-dev
sudo gem install caldecott
sudo gem install eventmachine -- --with-openssl-dir=/usr/lib/ssl
af tunnel

指示に従うとmysqlコマンドで接続できるようになります。あらかじめmysqldumpでデータベースをバックアップしておいて、以下のようなコマンドで復元します。

mysql> source {ファイル名}

6. ソースコードをアップロードする。

cd {コードのあるディレクトリ}
af update {アプリ名}

AppFogの流儀にあわせて、MySQLに接続する部分のコードを次のように書き換えておく必要があります(PHPのバージョンが比較的新しいので、接続時に文字コードを設定できます)。(参考:AppFog Docs MySQL)

//データベースに接続
$services_json = json_decode(getenv("VCAP_SERVICES"),true);
$mysql_config = $services_json["mysql-5.1"][0]["credentials"];
$user = $mysql_config["username"];
$pass = $mysql_config["password"];
$host = $mysql_config["hostname"];
$port = $mysql_config["port"];
$dbname = $mysql_config["name"];
$db = new PDO("mysql:host=$host;port=$port;dbname=$dbname;charset=utf8", $user, $pass);

実行結果は下のようになります。