FriendFeedの自分のフィードを表示（特に写真と地図）

以前，各種フィードをアグリゲートして表示できるFriendFeedを紹介したが，個人的には結構気に入っている。少しずつインターフェイスが改良され，最近ではフィードをTwitterへポストできるようになった。また，だいたいメジャーなサイトのフィードを読み込むことが可能であり，PlurkとかBrightkiteも読み込める。また，その各種サービスが対象としている情報に合わせてFriendFeed上に表示される。例えば，Flickrなどの写真系サイトの場合は小さな写真が表示され，Brightkiteであれば，地図が表示される。

また，自分のサイトでも，FriendFeedに登録した自分のフィードを公開することができる。例えば，公式のWidgetが公開されており，これを利用する方法がある。また，APIも公開しており，自分でカスタマイズして表示することも容易となっている。

そんな中で，とても便利なJavascriptを発見したので紹介する。

FriendFeedの自分の情報を表示するJavaScript (The blog of H.Fujimoto)
http://www.h-fj.com/blog/archives/2008/05/09-085522.php

こちらのサイトでは，フィードを自分のサイトに表示するJavascriptを公開しており，当サイトでも利用させていただいている。

ただ，このスクリプトは，文字列のリストだけなので，少し拡張してみたいと思った。というのも，FriendFeedのAPIを細かく見てみると，いろいろと取り出せる情報が多く，拡張性が高かったからである。

Flickrのエントリでは，画像サイズが小さい写真のURLが含まれているので，それをスクリプトから読みに行って表示させることも可能である。また，Brightkiteの場合は緯度・経度までFriendFeedのAPIから取得できてしまうので，地図表示も簡単である。

というわけで，上記Javascriptを拡張し，自分がよく利用しているBrightkiteはGoogle Static Maps APIで地図表示し，Flickrは写真を表示させることにした。

上記紹介したサイトの手順どおり設置した後に，公開されているスクリプトの１２行目と１３行目の間に，以下のコードを入れる。すると，当ウェブサイトのトップページのようなフィードが表示されるはずである。

if ( entry.service.id == "flickr" ) { for ( k = 0, m = entry.media.length; k < m; k++) { var med = entry.media[k].thumbnails[0].url; html += ''; } html += ''; } if ( entry.service.id == "brightkite" ) { var med_l = entry.media.length; if ( med_l > 0 ){ var med = entry.media[0].thumbnails[0].url; html += ' '; } else { html += ''; } }

なお，スクリプト内の「---KEY---」はGoogle Maps API Keyであり，各自取得しておく必要がある。また，Brightkiteは写真をポストした場合に，地図と写真が並んで表示される。

FridneFeedユーザでFlickrやBrightkiteを使っている人で，フィードを自分のサイトひ表示したい人にお勧めである。（とてもマニアックかな・・・。）また，他のサービスでもどのような情報が取り出せるのかをAPIで調べてみて，自分でスクリプトを作ってみるのもおもしろい。