Google feed API が使えなくなったので YQL API を使ってRSSフィードを取得して使った話

やぁみんな!
今回は、Google feed API が使えなくなったので YQL API を使ってRSSフィードを取得して使った話をするぞ。

Google feed API が使えなくなったので YQL API を使ってRSSフィードを取得して使った話

Google feed API にはお世話になっていた人が多いと思うんだけど、つい先日、「This API is no longer available.」と表示されるようになり、ついに本当に使えなくなってしまった。

This API is officially deprecated and will stop working after December 15th, 2016.
https://developers.google.com/feed/

ということで、Google feed API に頼らない方法に切り替えないといけないわけなんだけど、代替手段をググっていろいろと模索したところ、YQL API を使うのが一番手っ取り早いかなという結論に至ったわけなんだ。
米Yahoo!が提供しているサービスだから、Google feed API と同じく、いつサービス終了になるかわからないわけなんだけど。。。
そうなったらなったで次の手を考えることにしたよ。。。

他にも、APIを使わない方法や、FeedEk.jsというjQueryプラグインを使う方法がいくつか見つかったんだけど、
・クロスドメインで使える
・出力を整形しやすい
といったところに重点を置いて検討した結果だ。

YQL API を使ったフィードの取得とその表示

YQL API を使って Google feed API の終了に対応した先人がいたので、そちらの記事を参考にさせてもらった。
Google Feed API から YQL API へ移行したお話 – Qiita

HTML側(フィードを表示する箇所)

<ul id="blogfeed"></ul>

まずは、取得したフィードを表示する場所を用意しておく。

<ul></ul>

の中身は空っぽだけど、ここに

<li></li>

で記事が出力されるように作るぞ。
今回僕はulで作るけど、ここは各自divでもなんでも好きなように作ってくれ。

idはなんでもいい。
js側で「このidがついてるとこに出力するよ」っていう命令をするために使うぞ。

js側(フィードの取得と出力の仕組み)

$(function(){
$.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
q: "select * from rss(3) where url = 'ここにフィードURLを記述'",
format: "json"
}, function(json) {
var container = document.getElementById('blogfeed');
for (var i = 0; i < json.query.results.item.length; i++) {
var entry = json.query.results.item&#91;i&#93;;
//現在日時を取得して currentDate に代入
var currentDate = new Date();
//現在日時の時刻値から7日分のミリ秒値を引き rangeMs に代入
var rangeMs = currentDate.getTime() - (7 * 24 * 60 * 60 * 1000);
//投稿日時を取得して pdate に代入
var pdate  = new Date(entry.pubDate);
//投稿日時の年を取得して pyear に代入
var pyear  = pdate.getFullYear();
//投稿日時の月を取得して pmonth に代入
var pmonth = pdate.getMonth() + 1;
//投稿日時の日を取得して pday に代入
var pday   = pdate.getDate();
//投稿日時の時刻値を取得して modifiedMs に代入
var modifiedMs = pdate.getTime();
//投稿年月日を date に代入
var date = pyear + '年' + pmonth + '月' + pday + '日';
//7日前より新しい投稿にはNEWアイコンをつける
if (rangeMs < modifiedMs){
var newicon = '<img src="icon-new.png" alt="NEW">';
}else{
var newicon = '';
}
// 出力する
container.innerHTML += '<li><a href="' + entry.link + '"><span class="date">' + date + '</span><span class="title">' + '' + entry.title + '</span>' + newicon + '</a></li>';
}
});
});

8行目までがフィードを取得する部分だ。

from rss(3) where url

て書いてある部分の「3」は、「記事を3件取得する」という意味。
ここがもし「1」の場合は、7,8行目も変わってきてネストも変わるので注意だぞ。
そのあたりは参照元の記事を読んでみてくれ。

10行目から38行目までは、日付関連の処理だ。
記事が投稿された日付を表示したり、投稿日が閲覧日から7日以内だったらNEWアイコンを付けたりするぞ。

42行目が、出力する形式の部分だ。
この内容を、6行目で指定したidの要素内に出力するぞ。
ここも、liやspanになっている箇所は、各自好きなように作ってくれ。

jQueryを忘れずに

最後に念のため言っておくけど、このjsの実行前にjQueryを読み込むこと。
まぁ、大丈夫だとは思うんだけど、念のためのリマインドだ。

といったところで今回のお話はおしまい。
Google feed API が使えなくなったので YQL API を使ってRSSフィードを取得して使った話、どうだったかな?
みんな、良かったら参考にしてみてくれよな!

この記事は

> > > Google feed API が使えなくなったので YQL API を使ってRSSフィードを取得して使った話

この記事と類似または関連した記事

jQueryで画像のタブメニューを実装しているサイトのご紹介
Google Chrome アップデートでプライバシーポリシー設定に矛盾があるため更新できない。
「Google Update Group Policy 設定に矛盾があるため、Google Chrome を更新できません」と言われた場合の対処法
Web、アプリ界隈で興味深かった話題(2015年7月11日~7月17日)
「民放5社共同の無料見逃し配信「TVer」が10月スタート」他、Web/アプリ界隈で個人的に興味深かった話題(2015年7月11日~7月17日)