へびにっき

Google AJAX Feed APIを使って複数のフィードをまとめて表示するjQueryプラグイン

<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KEY"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.googleMultiFeed.js"></script>
<script type="text/javascript">
//google.load('jquery', '1.4');
 
google.setOnLoadCallback(function(){
  //jqueryをgoole.loadで読み込む場合のみ必要
  //initGoogleMultiFeed();
 
  $('#feed').googleMultiFeed({
    urls: ['http://example.com/rss', 'http://example.net/feed'],
    numEntries: 5
  });
});
</script>
...
<div id="feed"></div>

<div>
<a title="エントリータイトル | フィードタイトル" href="リンク">エントリータイトル [フィードタイトル]</a>
<span class="entry-date">日付(YYYY-MM-DD)</span>
</div>
...（フィードの件数分繰り返し）...

//第一引数がエントリ、第2引数がフィード
//詳細は http://code.google.com/intl/ja/apis/feed/v1/reference.html#JSON
function titleOnly(entry, feed) {
  var link = $('<a />').attr({href: entry.link}).text(entry.title);
  return $('<li />').append(link);
}
 
//ULタグに対して追加する
$('ul#feed').googleMultiFeed({
  urls: ['http://example.com/rss', 'http://example.net/feed'],
  format: titleOnly
});

7 Responses

1. ベル より:

   2011 年 4 月 20 日 4:46 PM

   こんにちは。
   feedに含まれる画像を表示させて画像にエントリーへのリンクを張りたいのと、日付をspanではなく画像のaltとなるようにカスタマイズしたいのですが、どのようにすればよいでしょうか。
   素人なりにいろいろいじってはみたもののうまくいかず・・・

   ヒントだけでもいいので教えていただけるとうれしいです。
   どうぞよろしくお願いいたします。
2. tkykmw より:

   2011 年 4 月 21 日 12:21 AM

   コメントありがとうございます。

   そもそもこのAJAX Feed APIで提供されているJSONには画像が含まれていないケースがある（Google次第）のようなので、まずは

   https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=取得したいRSSのURL

   といったURLにアクセスして、中に画像のURLが含まれているかどうか確認してみてください。
   ご希望の動作が作れるかどうかはその構造次第です。
3. ベル より:

   2011 年 4 月 22 日 12:01 PM

   お返事ありがとうございます！

   今のところ表示させたいフィードはrss2.0とAtomなのですが、どちらにも画像のURL（imgタグ）は含まれております。
   rssの方はdescriptionに、Atomの方はcontentの中にdivがあり、その中にあります。
   教えていただいたURLですとどちらも”content”:の後にありました。

   取り出した画像に対してサイズの調整やaltの追加を行いたかったのですが、rssの方は他のテキストやURLと一緒くたに入っていて、うまくimgタグのURLだけ取り出す方法がわかりませんでした。。

   どうぞよろしくお願いいたします。
4. tkykmw より:

   2011 年 4 月 25 日 10:42 PM

   contentにimgタグの形で入っているのであれば、正規表現でsrcの中身を取り出すのが一番手っ取り早いのではないかと思います（JavaScriptの知識があることが前提）。

   ちゃんとしたテストはしていませんが、だいたい以下のようなコードになるのではないでしょうか。
   （WordPressのせいでコード中のaタグに rel="nofollow" が入っていますが無視してください）

   /*
   できあがるHTMLは
   <div><a href="エントリーのURL" rel="nofollow"><img src="画像URL" alt="日付" /></a></div>
   取り出される画像はcontent中で最初にあるもの
   */
   function entryImageFormatter(entry, feed) {
     var reg = /<img\s+[^>]*?src=["']?([^'"]+)/i,
         match, link, image;
    
     if(match = reg.exec(entry.content)) {
       image = $('<img />').attr({
         src:match[1],
         alt:this.formatDate(entry.publishedDate)
       });
       link = $('<a>').attr({href: entry.link}).append(image);
       return $('<div />').append(link);
     }
   }
    
   $('#feed').googleMultiFeed({
     urls: ['http://example.com/rss', 'http://example.net/feed'],
     format: entryImageFormatter
   });
5. ベル より:

   2011 年 4 月 27 日 6:31 PM

   お返事ありがとうございます！
   何とかうまく読み込むことができました！

   1つだけ、
   alt:this.formatDate(entry.publishedDate)としたところが
   [object Object]となってしまいました。
   afterだとちゃんと読み込めるのに、attrの中身だと何故うまくいかないのかさっぱりわからず・・・
   今回はそれぞれの日付をそのままの形で出力することにしました。
   これを期にきちんとjavascriptを勉強しようと思います。。

   ご面倒をおかけし、申し訳ありませんでした。
   どうもありがとうございました！
6. tomg より:

   2011 年 9 月 12 日 12:16 AM

   こんにちは。
   素晴らしいプラグインの公開に感謝致します。

   早速ためさせていただきましたところ、WindowsのIE8ではフィードの日付けが表示されないようでした。
   MacやWindowsでもFirefox、Chromeでは問題無く表示されるのですが、何か対策はございますでしょうか？

   お忙しいところ恐縮ですが、ご指導いただければ幸いです。

   よろしくお願いいたします。
7. jQueryとGoogle AJAX Feed APIを使って複数のRSSフィードを取得 « loconoco より:

   2011 年 9 月 15 日 11:39 PM

   [...] 今回はjQueryのプラグインjquery.googleMultiFeedを使って実現したいと思います。 jquery.googleMultiFeedの設置の仕方はこちらのサイト（開発元）に記載されています。 [...]