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

やぁみんな！ atomだよ！
今回は、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[i];
      
      //現在日時を取得して 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行目までがフィードを取得する部分だ。