Google Feed API を手軽に利用できるようにする jQuery プラグイン

Easy Feed は、外部ドメインの RSS フィードの読み込みを可能にする Google Feed API を手軽に利用できるようにする jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

Google Feed API とは

Google Feed API は、よそ様のサイトの RSS フィードを JavaScript で取得し簡単に扱うことをできるようにする Google のサービスです。 通常、外部ドメインの RSS を取得するにはサーバで一旦受信し、ATOM, RSS1.0, RSS2.0 等の異なるデータフォーマットを JSON 形式に加工しクライアントに返す等の工夫が必要になりますが、Google Feed API を使用するとこれらの処理を Google がやってくれます。

以下のように使います。

  1. <!-- API 読み込み -->
  2. <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  3. <script type="text/javascript">
  4. google.load('feeds', '1');
  5.  
  6. //API 読み込みのコールバック
  7. google.setOnLoadCallback(function(){
  8.  
  9. // フィード URI の指定
  10. var feed = new google.feeds.Feed('http://www.cyokodog.net/feed');
  11.  
  12. // 読み込む件数
  13. feed.setNumEntries(10);
  14.  
  15. // フィード読み込みのコールバック
  16. feed.load(function( result ){
  17.  
  18. // 投稿データを1件づつ読み込む
  19. for (var i = 0; i < result.feed.entries.length; i++) {
  20.  
  21. var entry = result.feed.entries[i];
  22.  
  23. // 投稿 URL
  24. entry.link
  25.  
  26. // 投稿 タイトル
  27. entry.title
  28. }
  29. });
  30. });
  31. </script>

単純に、2ch 系まとめサイトのヘッダにあるような外部サイトの新着一覧を出力したいような場合、上記のようなコードをいちいち書くのはちょっと面倒な気がします。 Easy Feed を使用すると以下のような記述で一覧リストを出力することができます。

  1. $('#feed-area').easyFeed({feed : 'http://www.cyokodog.net/feed'});

使い方

Google Feed API、jQuery、jQuery Sitekit(または Easy Feed)の JS ファイルを読み込みます。

  1. <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  3. <script src="jquery.easy-feed.js"></script>

フィードリストを表示したい場所に対し、easyFeed() メソッドを実行します。その際、feed パラメータに表示したいフィード URI を指定します。

  1. $('#feed-area').easyFeed({feed : 'http://www.cyokodog.net/feed'});

リンク形式でリストが表示されます。

自前でリストを生成したり、単にフィードを参照したい場合は以下のように callback パラメータに処理を記述します。

  1. $.easyFeed({
  2. feed : 'http://www.cyokodog.net/feed',
  3. callback : function(api){
  4. var r = api.getResult(); //Google Feed API が返す取得結果
  5. $.each(r.feed.entries, function(i){
  6. var entry = r.feed.entries[i];
  7.  
  8. // タイトル
  9. entry.title
  10.  
  11. // URL
  12. entry.link
  13.  
  14. // 本文
  15. entry.content
  16.  
  17. // 概要
  18. entry.contentSnippet
  19.  
  20. // 日付
  21. entry.publishedDate
  22.  
  23. // カテゴリ
  24. entry.categories
  25.  
  26. });
  27. }
  28. })

パラメータ

プラグイン実行時、下記パラメータを指定できます。

  1. $.easyFeed.defaults = {
  2. feed : '', // feed URI
  3. numEntries : 10, // 読み込み件数
  4. callback : function(api){}, // フィード取得後のコールバック処理
  5. linkTarget : '_blank', // 生成するリンクの target 属性値
  6. onBuildUL : function(api, ul){}, // UL 要素生成時のコールバック処理
  7. onBuildLI : function(api, li){} // LI 要素生成時のコールバック処理
  8. }

API

API オブジェクトを使用し、下記メソッドを実行できます。

  1. // Google Feed API の取得結果を返す
  2. getResult : function(){
  3.  
  4. // リスト生成時のカレントエントリを返す
  5. getEntry : function(){

ダウンロード

こちらからどうぞ。