[RSS] Google Feed APIを使わないで相互RSSを表示する
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＞
あとはbody内の表示したい部分に以下を追加
＜div id="aq_feed"＞＜/div＞
ちなみに相互RSSはアクアリウム関連のサイトなら、自由に参加できます。
参加希望の方は「こちらのフォーム」より必要事項を記載の上、応募してください。
OxyNotes
https://oxynotes.com/?p=10115
