Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法


投稿日:2016年1月22日
  • 25
  • 61



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

sogorss_new

以前の投稿」で紹介しましたが、アクアリウム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はアクアリウム関連のサイトなら、自由に参加できます。
参加希望の方は「こちらのフォーム」より必要事項を記載の上、応募してください。



現在のページを共有する



現在のページに関連する記事

Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法 Google Hosted Librariesを利用して相互RSSを作る方法
Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法 5段階評価を付けることができるjQuery Ratyプラグインの使い方
Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法 jQueryでクロスサイトのiframe広告のクリックをカウントする方法
Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法 WordPressのショートコードを利用してSNSのVertical Balloonを設置する方法
Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法 「最新版」WordPressに各種ソーシャルメディアボタンを追加する方法
レビュー投稿機能とレビューへの評価 レビュー投稿機能とレビューへの評価
Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法 もう覚えなくても大丈夫!?WordPressの条件分岐タグの使い方まとめ

おすすめの記事

Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方

エンティティとデコード用プラグイン「Entity Decode Button」を作成しました

エンティティとデコード用プラグイン「Entity Decode Button」…

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組み…

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…

誤って削除したGoogle Chromeのブックマークを復元する方法

誤って削除したGoogle Chromeのブックマークを復元する方法


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。