昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。

未だ公式サイトでもアナウンスが無く、廃止になったのか否かもわからない状況です。

弊社のクライアント様でも『外部サイトのRSSフィードを読込→表示』しているサイトがいくつかありますが、もともと Google Feed API は使用せず、すべてPHPベースでプログラムを組んでいるので被害は皆無。

しかし困っている方々が大勢いらっしゃるようなので、ここで Google Feed API の代替となるテクニックを紹介していきます。

解決策はいたってシンプル。単にjQueryを利用してRSSの情報を取得して、任意のテンプレートに整形して出力させるだけ。
つまり基本的には Google Feed API のときとまったく同じ方法です。

なお、ここで紹介する方法は RSS が同ドメインの場合のみに使えます。
外部ドメインのRSS読み込みの際はクロスドメインの問題があるのでもうすこし処理を加える必要があります。
→コチラは明日の新着情報で紹介しますのでお楽しみに！
→新しい記事を公開しました。コチラからどうぞ

以下、スクリプトのコードです。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$.ajax({
	url: 'https://on-ze.com/feed',
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
		if (status === 'success') {
			var row = 0;
			var data = [];
			var nodeName;
			$(xml).find('item').each(function() {
				data[row] = {};
				$(this).children().each(function() { // 子要素を取得
				    nodeName = $(this)[0].nodeName; // 要素名
				    data[row][nodeName] = {}; // 初期化
				    attributes = $(this)[0].attributes; // 属性を取得
				    for (var i in attributes) {
						data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
				    }
					data[row][nodeName]['text'] = $(this).text();
				});
				row++;
			});
			$('#rss').wrapInner('<ul></ul>');
			for (i in data) {
			    $('#rss').find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a></li>');
			}
		}
	}  
});
</script>

上記のコードをHTMLの適当な箇所で読み込みます。

出力される箇所は <div id="rss"></div> になっています。
こちらは <body> 要素内の任意の箇所に記述してください。

<body>
<div id="rss"></div>
</body>

実際に出力されているかどうか確認してみましょう。
下記リンク先にサンプルを用意しました。

jQuery RSS Feed : https://on-ze.com/demo/jquery-rss/

ちなみにこの方法は RSS が同ドメインの場合のみに使えます。

外部ドメインのRSS読み込みの際はクロスドメイン対応版の以下のリンク先の記事をどうぞ。

【jQuery + PHP】クロスクロスドメイン対応版：Google Feed API の代替案を紹介します。

「jQueryではなくPHPを使った方法も知りたいよ〜！」という方は以下をご覧ください。

PHP版：コチラです。

さらにさらに。サイトを WordPress で構築しているならば、もっと簡単な方法もあります。

WordPress版：外部サイトのRSS情報を取得して表示させる方法。

今回は「jQuery版」の他に、「PHP版」と「WordPress版」の３つの解決策を紹介しました。
ぜひ参考にしてください。