Google Feed APIを使わないで相互RSSを表示する方法

「以前の投稿」で紹介しましたが、アクアリウムWikiではGoogle Feed APIを利用して相互RSSを表示していました。
しかし、Google Feed APIはキャッシュ周りに不具合があるようで、古いものが表示されることがありました。
また、近々廃止される方針らしく、いつ停止してもおかしくありません。

そこで「jQueryだけで相互RSSを表示しよう」という試みです。

jQueryでRSSを取得する方法

フィードを取得して、各アイテムを並べ直すだけなら、jQueryで簡単に実装できます。

$.get(FEED_URL, function (data) {
    $(data).find("entry").each(function () { // or "item"
        var el = $(this);
		console.log(el.find("link").text());
		console.log(el.find("title").text());
    });
});

FEED_URLは名前の通りフィードのURLを指定します。

jQueryのget()を使いデータを取得しています。
取得したdataの内、find()でentryを取得し、each()で回しています。
このentryはフィードの種類によってitemなことがあるので、フィードの種類に合わせて変更してください。（2パターンしかないので複数のフィードに対応するなら分岐するのもあり）

あとは取得したitmeを入れたelからfind()で、それぞれのテキストを取得しています。
実質わずか5行程度で取得して各アイテムを個別に取り出すことができました。

また、Google Feed APIは他のスクリプトが完了した後に実行されたため、表示が遅いという欠点があったのですが、jQueryはすぐに表示されます。
「早く乗り換えれば良かった」というのが実感です。

ちなみに今回アクアリウムWiki相互RSS用に作成したコードは以下のとおり。

$.ajax({
	url:'http://aqwiki.net/rss/rss_list.txt',
	success: function(data){

		var rss_url = 'http://aqwiki.net/rss/' + data;

		var htmlstr = "";
		htmlstr += '<h2><a href="http://aqwiki.net/rss/ko.html" rel="nofollow" target="_blank">アクアリウムWiki 相互RSS</a> 新着記事</h2>';
		htmlstr += '<div class="all_body">';
		htmlstr += '<ul>';

		$.get(rss_url, function(data) {
			$(data).find("item").each(function (i) { // or "entry"
				var el = $(this);

				var oddeven = ( i % 2 == 0 ) ? 'lieven' : 'liodd'; //oddとevenを付けるため。三項演算子
				htmlstr += '<li class="' + oddeven + '">';
				htmlstr += '<img src="http://www.google.com/s2/favicons?domain=' + el.find("link").text() + '">';
				htmlstr += '<a href="' + el.find("link").text() + '" title="' + el.find("title").text() + '" rel="nofollow" target="_blank">' + el.find("title").text() + ' - ' + el.find("category").text() + '</a>';
				htmlstr += '</li>';

			});

		htmlstr += '</ul>';
		htmlstr += '</div>';

		var container = document.getElementById("aq_feed");
		container.innerHTML = htmlstr;

		});
	}
});

複数のサイトからフィードを取得する場合クロスサイトドメインの問題があるので、まずはPHPのajaxを利用して最新のフィードを取得。並べ替え等の処理をしたフィードのファイル名を書き出しています。（この辺は二度手間ですがGoogle Feed API利用時の名残りです）

それを$.ajax()で読み込み、ファイル名として利用し、$.get()で取得という流れです。

後は、htmlのIDがaq_feedの要素に作成したRSSを代入して表示しています。

興味のある方はhtmlに以下のコードを貼り付けて表示してみてください。

これはheader内に追加

<link rel="stylesheet" href="http://aqwiki.net/rss/default.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="http://aqwiki.net/rss/rssexp.js" charset="UTF-8"></script>