WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

柔軟なフィード表示ライブラリ「feedrenderer.js」を作りました

今週の話題にも書きましたが、サイドバーの 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 のオプションが指定できます。指定できるフィールドは以下のとおりです。

      フィールド名機能
      num取得するフィードの最大数を指定します。デフォルトは 4 。
      scoring'h' を指定することで、フィードから取り除かれた過去のエントリも含めて取得します。

      以下はフィードの取得数を 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」をご紹介しました。フィード形式で入手できるデータは毎日凄まじい勢いで増加しているので、ぜひこのライブラリを活用して、皆さんのサイトにさまざまなデータを取り込んでみてください。

        関連記事

        この記事にコメントする

        Recommendations
        Books
        「Closure Library」の入門書です。
        詳しくはこちらの記事をどうぞ!
        Categories
        Recent Articles