Work > Brightkite APIによる「今ココ」ブログパーツ
Brightkite APIによる「今ココ」ブログパーツ
2008年11月21日公開
2009年1月1日リニューアル
はじめに
Brightkiteは，
位置情報SNSと呼ばれ，位置情報から繋がりを広げることができるサービスです。
特にiPhoneのGPSを使うことで，PCの前ではなく外出先でも，
その外の位置情報を軸として繋がることができます。
Brightkiteでは，その場所にチェックインして，
写真やテキストを投稿することができます。つまり，
Brightkiteを使い続けることで，
自分の位置情報が配信され続けることになります。
（もちろんプライベートモードがあります。）
そこで，私が現在いる場所を地図表示して
ブログへ貼り付けるブログパーツを作りました。
Brightkite APIとGoogle Maps API
BrightkiteはAPIを
公開
しており，XMLやJSON等で取り出すことができます。
例えば，tagchanの情報は
こちらです。ここに含まれている,
「"longitude": 139.438892, "latitude": 35.520519」
がチェックインした場所の緯度経度，「"name":」が地名にあたります。
この緯度経度を
Google Static Maps APIを使って，表示させることにしました。
さらに，このnameの地名ですが，
Brightkite上では日本の地名が英語表記されており，
わかりにくい問題点があります。そのため，緯度経度から
Google Maps APIの逆ジオコード機能を利用し，
日本語表記の住所を表示させるようにしました。したがって，
このブログパーツは
Brightkite APIとGoogle Maps APIのマッシュアップということになります。
設置方法
まず，Google Maps APIのKeyを取得し，ユーザIDを確認しておく必要があります。
以下に示すコードを，ブログパーツを設置する箇所に埋め込みます。
<script type="text/javascript" src="brightkite.js"></script>
<span id="ima_koko"></span>
<script type="text/javascript" src="http://brightkite.com/people/[--Your_BK_ID--].json?callback=BKFeed"></script>
3行目の[--Your_BK_ID]には自分のBrightkiteのユーザ名を入れます。
次に，以下のスクリプトをbrightkite.jsとして保存します。api_keyには自分のGoogle
Maps API Keyを入れます。
// Your Google Maps API Key
var api_key = '---- API Key ----';
function BKFeed(data) {
var m, eDate;
var html = '';
m = data.last_active_at.match(/(\d*)\/(\d*)\/(\d*) (\d*):(\d*):(\d*)/);
eDate = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]),
Number(m[4]) + 9, Number(m[5]), Number(m[6]));
var req_url = 'http://maps.google.com/maps/geo?oe=utf-8&ll=' +data.place.latitude+ '%2C' +data.place.longitude+ '&key=' +api_key+ '&output=json&callback=gmap';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = req_url;
document.getElementsByTagName("head")[0].appendChild(script);
html += '<div style="width:170px;margin-left:10px;">' + eDate.getFullYear() + '/' + (eDate.getMonth() + 1) + '/' + eDate.getDate() + ' ' + eDate.getHours() + ':' + eDate.getMinutes() + '<br>';
html += '<img src="http://maps.google.com/staticmap?zoom=14&size=165x100&maptype=mobile&markers='+ data.place.latitude +','+ data.place.longitude + '&key=' + api_key + '"><br>';
html += 'Lat: ' +data.place.latitude+ '<Br>Lon:' +data.place.longitude+ '<br><a href="http://brightkite.com/places/' +data.place.id+ '"><span id="jusho"></span></a></div>';
document.getElementById('ima_koko').innerHTML = html;
}
function gmap(obj){
var ad = obj.Placemark[0].address;
document.getElementById('jusho').innerHTML = 'L:'+ ad +'';
return;
}
おわりに
設置した例を以下に示します。
タイトル等は，各ページのスタイルシートの事情があると思うので，
今回紹介したコードには特に表現していません。
今後，いろいろと改変してみてください。基本的にどんどん良くしていきたいと
考えています。もし，改変してBlog等で紹介していただける場合は，
ご一報をいただけると幸いです。また，改変してコードを公開する場合も，
ご一報をいただけると幸いです。
注意：本スクリプトを利用したことによるいかなる不利益が生じましても一切責任は負いかねます。