FriendFeedの自分の情報を表示するJavaScript

FriendFeedは、ブログ／Twitter／SBMなど、さまざまなサービスの情報をまとめることができるサービスです。
「自分が最近行ったこと」や、「○○さんが最近行ったこと」をまとめて見るのに便利で、「Twitterの次にブレイクするサービス」といった見方もあります。

FriendFeedはAPIを公開していて、APIを使うことでいろいろなアプリケーションができそうです。
簡単な例として、FriendFeedの自分の情報をブログ等に表示するJavaScriptを作ってみました。
私の情報だと、以下のように表示することができます。

1.JavaScriptのインストール

まず、以下をクリックして、「friendfeed.js」をダウンロードします。

friendfeed.js

このfriendfeed.jsを、ご自分のサーバーにアップロードします。

2.スタイルシートの追加

次に、このJavaScriptを組み込むWebページに、以下のスタイルシートを追加します。

ul.friendfeed {
    list-style-type : none;
    margin-left : 0;
    margin-right : 0;
    padding-left : 0;
}
ul.friendfeed li {
    padding-left : 20px;
    background-repeat : no-repeat;
}
ul.friendfeed .friendfeed-title {
}
ul.friendfeed .friendfeed-date {
}

3.FriendFeedの情報を表示する

次に、FriendFeedの情報を表示したい位置に、以下のタグを入れます。

<div id="要素のID"></div>
<script type="text/javascript" src="http://アップロード先/friendfeed.js"></script>
<script type="text/javascript">
//<![CDATA[
FJFriendFeed.show('FriendFeedの自分のID', '要素のID');
//]]>
</script>

例えば、div要素に「friendfeed」というIDをつけるとします。
また、ユーザーIDが「foo」だとします。
この場合、以下のようなタグを入れます。

<div id="friendfeed"></div>
<script type="text/javascript" src="http://アップロード先/friendfeed.js"></script>
<script type="text/javascript">
//<![CDATA[
FJFriendFeed.show('foo', 'friendfeed');
//]]>
</script>

4.スタイルシートのカスタマイズ

このJavaScriptでは、FriendFeedの情報を以下のような形式で出力します。

<ul class="friendfeed">
  <li style="background-image : url(各サービスのアイコンのアドレス);">
    <span class="friendfeed-title">情報のタイトル</span><br />
    <span class="friendfeed-date">情報の日付</span>
  </li>
  ・
  ・
  ・
</ul>

上のHTMLに沿って、2.のスタイルシートをカスタマイズすることで、表示形式を変えることができます。

5.未対応サービスの問題

FriendFeedは標準で多くのサービスに対応しています。
しかし、日本ローカルなサービス（はてなブックマーク等）には対応していません。
このような未対応のサービスの情報をまとめたい場合に、FriendFeedには難があります。

任意のフィードを追加することはできますので、未対応のサービスでも、そこがフィードを提供していれば、まとめることは可能です。
ただ、フィードだとサービス固有の情報が得られません。
このあたりがもっと柔軟になれば、FriendFeedはより使い甲斐のあるサービスになると思います。

ちなみに、Movable Typeには「Action Streams」というプラグインがあります。
このプラグインも、各種のサービスから情報を集めてきて、時系列に表示することができるものです。
しかも、拡張可能な作りになっていて、標準では対応していないサービスでも、別途プラグインを作れば対応させることができます。
FriendFeedでも、このようなことができるようになることを期待します。

お知らせ