今週の話題にも書きましたが、サイドバーの Twitter ウィジェットを表示していたところを Google Buzz ウィジェットに差し替えてみました。私は tweet_amplifier.rb でつぶやきも Google Buzz に転送しているので、結果的に Twitter と Buzz 双方の発言が表示されます。

現在のところ、公式な Google Buzz ウィジェットは公開されていないので、このウィジェットは私の Google プロフィールにある Buzz のフィードを読み込んで表示しています。それを実現するために、汎用的なフィード読み込み & HTML レンダリングライブラリ「feedrenderer.js」を作りましたので、本日はそれを公開します。特徴は以下のとおりです。

• Google AJAX Feed API を利用して、 JavaScript のみでフィードを読み込む。
• 多数のフィード形式を統一して扱える。
• RESTful 形式の API を利用してるので、 Google AJAX Feed API の JavaScript ライブラリを読み込む必要がない。
• Closure Library のモジュールとしても、独立したライブラリとしても利用できる。
• HTML のテンプレートを指定するだけで、簡単に表示形式をカスタマイズできる。
• JavaScript により、各フィールドの表示フォーマットや全体の表示をより細かくカスタマイズできる。

商用利用も含めて、ご自由にご利用ください。ただし、利用に際して発生した問題に関しては、あくまで自己責任でお願いします。

基本的な使い方

それでは、使い方をご紹介します。ライブラリの JavaScript は以下の場所にあるので、ダウンロードして適切な場所に保存してください。

http://webos-goodies.googlecode.com/svn/trunk/prod...

そして、 HTML ファイルに以下のように記述すれば、フィードの最新 4 つのエントリを表示できます。

<ul id="feed"></ul>

<script type="text/javascript" src="feedrenderer.js"></script>
<script type="text/javascript">
window.onload = function() {
  var renderer = new FeedRenderer({ template:'<li><a href="%url%">%title%</a></li>' });
  renderer.render('http://webos-goodies.jp/atom.xml', 'feed');
};
</script>

以下、実行結果です。ライブでこのブログのフィードを表示しています。

HTML コードでだいたいおわかりかと思いますが、 FeedRenderer クラスのコンストラクタに渡している template パラメータが各エントリを HTML に挿入する際のテンプレート文字列になっています。この中の「%〜%」という部分が、対応するフィールドに置き換えられます。

実際のリクエストは render メソッドによって行われ、第 1 引数のフィードの内容を第 2 引数で指定した要素にテンプレートに沿った形式で挿入します。

テンプレートを変更するだけで表示方法を簡単に変更できるので、テーブル、リストなど、その場に応じた形式でフィードを表示できます。テンプレートで使えるフィールド名は AJAX Feed API が返す JSON そのままですので、詳細は AJAX Feed API のリファレンスをご参照ください。

カスタマイズ

表示するデータの見た目などは、コンストラクタや render メソッドに渡す引数によって柔軟にカスタマイズできます。以下、可能なカスタマイズをご紹介します。

各フィールドの出力フォーマットの変換

テンプレート文字列内のプレースホルダを各フィールドの値で置き換える際、デフォルトでは単純に HTML エスケープをかけただけのものを使います。この動作を変更したいときは、必要なフィールドごとの変換関数を格納したオブジェクトを用意し、それを setFormatter メソッド（もしくはコンストラクタの formatter パラメータ）に渡してください。

以下はフィードの日付を表示する例です。

<ul id="feed"></ul>

<script type="text/javascript" src="feedrenderer.js"></script>
<script type="text/javascript">
window.onload = function() {
  var template  = '<li><a href="%url%">%title%</a> (%publishedDate%)</li>';
  var formatter = {
    'publishedDate': function(value, entry) {
      var date = new Date(value);
      return date.getMonth() + '/' + date.getDate();
    }
  };
  var renderer = new FeedRenderer();
  renderer.setTemplate(template);
  renderer.setFormatter(formatter);
  /* 上の3行は以下と等価
  var renderer = new FeedRenderer({ template:template, formatter:formatter }); */
  renderer.render('http://webos-goodies.jp/atom.xml', 'feed');
};
</script>

実行例

変換関数は 2 つの引数をとり、変換結果（テンプレートのプレースホルダを置換する文字列）を返す関数です。

format_func(value, entry)

value

フィールドの値です。値の形式は AJAX Feed API のレスポンスそのままです。

entry

AJAX Feed API が返す JSON データの json['feed']['entries'] 配列内の、現在処理中のフィールドを含む要素です。これを使って他のフィールドの値を参照した条件分岐（link が設定されている時のみ contentSnippet にリンクを設定するなど）が行えます。

最終出力のカスタマイズ

フィールドごとのカスタマイズのほか、最終的に HTML をドキュメントに挿入する部分の処理も差し替え可能です。これにより、フィードのソートや行ごとに異なったスタイルを設定するなどの処理が可能です。

最終出力のカスタマイズは、 render メソッドの第 2 引数に文字列の代わりに関数を指定することで行います。以下は背景色を交互に変更する例です。

<div id="feed"></div>

<script type="text/javascript" src="feedrenderer.js"></script>
<script type="text/javascript">
window.onload = function() {
  function output(html, json) {
    for(var i = 0 ; i < html.length ; ++i) {
      html[i] = html[i].replace('<c>', (i & 1) ? '#cef' : '#efc');
    }
    document.getElementById('feed').innerHTML = html.join('');
  }
  var renderer = new FeedRenderer({ template:'<div style="background-color:<c>">%title%</div>' });
  renderer.render('http://webos-goodies.jp/atom.xml', output);
};
</script>

実行例

出力関数は 2 つの引数をとる関数です。戻り値は無視されますので、関数内でドキュメントへの HTML の挿入まで行う必要があります。

output_func(html, json);

html

各エントリごとの HTML への変換結果（formatter_func の返り値）の配列です。これを加工することで表示のカスタマイズが可能です。

json

AJAX Feed API が返す JSON オブジェクトです。例えばフィードのタイトルは json.feed.title でアクセスできます。

その他のカスタマイズ

render メソッドの第 3 引数にオブジェクトを指定することで、 AJAX Feed API のオプションが指定できます。指定できるフィールドは以下のとおりです。

以下はフィードの取得数を 8 に増やした例です。

<ul id="page_example4"></ul>

<script type="text/javascript" src="feedrenderer.js"></script>
<script type="text/javascript">
window.onload = function() {
  var renderer = new FeedRenderer({ template:'<li><a href="%url%">%title%</a></li>' });
  renderer.render('http://webos-goodies.jp/atom.xml', 'page_example4', { 'num': 8 });
};
</script>

実行例

API キーの指定

必須ではありませんが、 AJAX Feed API を利用する際は API キーの指定が推奨されています。こちらのページで API キーを取得し、 FeedRenderer クラスのコンストラクタで以下のように指定してください。

new FeedRenderer({ key: '取得したAPIキー', template:'<div>%title%</div>', ... });

Closure Library での利用

FeedRenderer クラスは Closure Library で構築されており、同様に Closure Library を利用したプロジェクトではモジュールとして組み込むことが可能です。 Closure Library については、 こちらの記事をご参照ください。

以下にソースがありますので、これをアプリケーションの中に組み込んでください。

http://webos-goodies.googlecode.com/svn/trunk/cms/...

これで、 wg.FeedRenderer のクラス名で前述の機能が利用できます。ただし、 Closure Compiler による最適化に対応するため、多少の注意が必要です。まず、正常に JSONP のレスポンスを受け取るため、以下のようにレスポンスの処理関数をエクスポートし、コールバック名を指定してください。

goog.exportSymbol('wg.FeedRenderer.processResponse', wg.FeedRenderer.processResponse);
wg.FeedRenderer.setDefaultCallbackName('wg.FeedRenderer.processResponse');

そして、コンストラクタや render メソッドに渡すオプションのオブジェクトのキーは、必ずダブルクォーテーションもしくはシングルクォーテーションで囲ってください。

new wg.FeedRenderer({ 'template': '<div>%title%</div' });
/* これではダメ
new wg.FeedRenderer({ template: '<div>%title%</div' }); */

formatter のフィールド名なども同様です。忘れやすいのでご注意ください。

以上、本日は Web ページ中に簡単にフィードのエントリを表示できる JavaScript ライブラリ「feedrenderer.js」をご紹介しました。フィード形式で入手できるデータは毎日凄まじい勢いで増加しているので、ぜひこのライブラリを活用して、皆さんのサイトにさまざまなデータを取り込んでみてください。