LoginSignup
0
1

More than 5 years have passed since last update.

YQL API と jQuery を用いて、ココログ等の RSS を取得・表示させる方法(さよなら Google Feed API)

Last updated at Posted at 2017-02-06

2017年 2月 1月。
とうとう Google Feed API が使えなくなったようです。
代替として YQL API と jQuery を用い、RSS(例としてココログの)を取得し、任意のHTML内に表示させる方法を検討しました。
おかげさまでクロスドメインに対応できました。

なお、以下のスクリプトでは、最新の5件を表示し、投稿されてから3日以内の記事には「NEW!!」をつけるようにしています。

HTML と jQuery

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
    $.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
        q: "select title,link,date from rss where url in ('http://info.cocolog-nifty.com/info/index.rdf') limit 5", // selectの後ろに「title,link,date」を指定することでRSSから「タイトル、URL、日付」が取得できる。limitで扱う「件数」を指定できる。
        format: "json"
    }, function (json) {
        for(var i in json.query.results.item){
            var entry = json.query.results.item[i];

            var link = entry.link;
            var title = entry.title;
            var dateString = new Date(entry.date);
            var year = dateString.getFullYear();
            var month = dateString.getMonth() + 1;
            var day = dateString.getDate();

            var delDate = 3; // 「NEW!!」を表示する日数。今回は3日間とする。
            var dateStringNow = new Date();
            var checkDate =(dateStringNow - dateString) / (1000 * 24 * 3600);

            var elementNew = '';

            if(checkDate <= delDate) {
                elementNew = '<strong>NEW!!</strong>'; // 「NEW!!」をつける場合に表示するHTML要素。
            }

            var elementLi = '<li><a href="' + link + '" target="_blank">' + title + '</a>(' + year + '/' + month + '/' + day + ')' + elementNew + '</li>';

            $("#feed ul").append(elementLi);

        }
    });
});
</script>
<div id="feed">
<ul></ul>
</div>
</body>
</html>

参考サイト

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1