Google Feed API が使えなくなったのでYQLで代替してみた

先日、クライアントから相次いで「お知らせが非表示になった」という連絡をうけました。どのウェブサイトも Google Feed API を使って外部ブログのRSSを取得して、ホームページへお知らせとしてタイトルを取得しているタイプでした。

調べてみると、Google Feed Api は去年いっぱいで廃止されて順次使えなくなるそう。むしろ1月いっぱいまで使えていたのはGoogleの温情なのか？

CMSを入れる予算はないが、フレキシブルにお知らせだけは更新したいというクライアントの夢を叶えていてくれていた Google Feed Api だけにとても悲しい。そして、急いで代替案を探さねばならず本当に焦りました。

今回は、廃止になってしまった Google Feed Api の代替として YQL（Yahoo! Query Language）を使ったら上手く行ったのでそちらを紹介します。

2019年7月現在、YQL はサービスの提供を終了してしまいました。もはやこの手のことは素直に PHP で運用するのが一番確実だと思います（YQL – 公式ツイート）

代替案 → PHPで簡単に外部ブログRSSを読み込む方法

YQL（Yahoo! Query Language）とは
PHP ではなく YQL を選択した理由
YQL公式サイトのコードを参考にぼくが実際に用いたJavascript
スクリプトの簡単な説明
まとめ

YQL（Yahoo! Query Language）とは

YQL（Yahoo! Query Language）とは、米国本家 Yahoo が提供している、色々なデータを取得できるAPIのことです。もちろん無料で利用できます。

その中のサービスのひとつで「YQLを使ってRSSからデータを取得する」があります。今回はそれを使って Google Feed Api の代わりとして使います。

PHP ではなく YQL を選択した理由

検索で「Google feed Api 代替」で検索すると、PHPを使うことばかりがヒットします。

きっとそれがスタンダードなのだろうと思うのですが、PHPだとエディタで編集している段階でブログのフィードがローカルで確認（表示）できないので「不便だな～」と感じました。また、PHPが使えないサーバーを利用中のクライアントもいて問題外なんです。

YQL だと Google Feed Api と同じようにローカルで確認できますし、なにより Javascript だけで動きます。その利便さからこちらを使うことにしました。

YQL公式サイトのコードを参考にぼくが実際に用いたJavascript

Javascript

$(function(){
	$.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
		q: "select * from rss(5) where url = 'フィードしたいブログの RSS URL'",/*RSS URL*/
		format: "json"
	}, function(json) {
		var container = document.getElementById('feed');

		for (var i = 0; i < json.query.results.item.length; i++) {
			var entry = json.query.results.item[i];

			var dd = new Date(entry.date); // now
			var yearNum = dd.getYear();
			if (yearNum < 2000) yearNum += 1900;
			var m = dd.getMonth() + 1;
			if (m < 10) {
				m = '0' + m;
			}
			var d = dd.getDate();
			if (d < 10) {
				d = '0' + d;
			}
			var date = yearNum + '年' + m + '月' + d + '日';

			imgsrc = entry.encoded.match(/src="(.*?)"/igm);

			container.innerHTML += "<ul><li>" + date + "　<a href='" + entry.link + "'' target='_blank'>" + entry.title + "<\/a></li></ul>";
		}
	});
});

$(function(){

$.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {

q: "select * from rss(5) where url = 'フィードしたいブログの RSS URL'",/*RSS URL*/

format: "json"

}, function(json) {

var container = document.getElementById('feed');

for (var i = 0; i < json.query.results.item.length; i++) {

var entry = json.query.results.item[i];

var dd = new Date(entry.date); // now

var yearNum = dd.getYear();

if (yearNum < 2000) yearNum += 1900;

var m = dd.getMonth() + 1;

if (m < 10) {

m = '0' + m;

}

var d = dd.getDate();

if (d < 10) {

d = '0' + d;

}

var date = yearNum + '年' + m + '月' + d + '日';

imgsrc = entry.encoded.match(/src="(.*?)"/igm);

container.innerHTML += "<ul><li>" + date + "　<a href='" + entry.link + "'' target='_blank'>" + entry.title + "<\/a></li></ul>";

}

});

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/yql_feed.js"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/yql_feed.js"></script>

ぼくは外部JSファイルとして読み込んで利用しています。

<div id="feed"></div>

1	<div id="feed"></div>

フィード取得リストを表示したい場所へ上のコードを挿入します。

ブラウザ表示例

実際に表示されるとこのようになります。レイアウトはCSSで整えています。

スクリプトの簡単な説明

2行目

q: "select * from rss(5) where url = 'ここにフィードしたいブログのURL'",/*RSS URL*/

1	q: "select * from rss(5) where url = 'ここにフィードしたいブログのURL'",/RSS URL/

rss (5) の数字を変更すると記事表示数が変更されます。(5)なら5記事、(8)なら8記事表示。「ここにフィードしたいブログのURL」に任意のフィードURLをいれます。

フィードのURLを挿入する時に、このYQLの弱点が現れます。

なぜかフィードのURLは「.rdf」のURLじゃないと取得できないんです！！

例えば「http://blog.livedoor.jp/hogehoge/index.rdf」みたいに .rdf で終わるURLだけが取得できます。確認したところ livedoor Blog と Seesaaブログが「.rdf」形式のフィードURLでした。

22行目「日付表示」

var date = yearNum + '年' + m + '月' + d + '日';

1	var date = yearNum + '年' + m + '月' + d + '日';

上は「2017年02月23日」と和表示されます。

var date = yearNum + '/' + m + '/' + d;

1	var date = yearNum + '/' + m + '/' + d;

このように変更すると「2017/02/23」となります。

26行目「HTMLレイアウト」

container.innerHTML += "<ul><li>" + date + "　<a href='" + entry.link + "'' target='_blank'>" + entry.title + "<\/a></li></ul>";

1	container.innerHTML += "<ul><li>" + date + "　<a href='" + entry.link + "'' target='_blank'>" + entry.title + "<\/a></li></ul>";

取得したフィードをどのようなタグで表示するのか・・・という部分です。このコードでは ul li を利用していますが、日付とタイトルを2行で表現したい場合は dl dt dd を使うのも良いです。

レイアウトを変更するには、「ul, li」タグや「#feed」に対してCSSでレイアウトをいじくれば思うような表示にすることができます。

まとめ

YQL feed は制限こそあるものの、Google feed Api とほとんど同じ使い方ができ、Api 読み込みURLを YQL へ変更した以外はほぼ同じコードで運用できています。

ぼくが YQL を選んだ最大のポイントは実はその部分。

Google feed Api の代替として、レイアウトを自分で自由にいじくり倒せて、一番簡単にブログのRSSフィードを取得できるのは YQL じゃないかな？と思います。使用条件が合うかどうかのデメリットはありますが、条件が合う方はぜひご利用ください。