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>