LoginSignup
1

More than 5 years have passed since last update.

YQL API と jQuery による RSS 表示:各ブログ対応版

Posted at

表題の処理を行おうとしたところ、詳細な解説つきの「Google Feed API から YQL API へ移行したお話」が非常に参考になったのですが、ブログサービスによって RSS1.0 と 2.0 が混在していたり、サイトによって画像の取得に工夫が必要だったりしたため、そのあたりに手を加えたものです。

FC2、Ameba、livedoor、Seesaa、Hatena、So-net、goo、Yahoo!、excite、JUGEM 各ブログの RSS で確認済みですが、画像取得は色々見落としがありそうなので「reg」を適宜修正してください。

  • goo ブログの RSS1.0 は description の文字数が少なく画像を含まない場合がありますので、画像を取得したい場合は RSS2.0 を使用してください
  • excite ブログは RSS に画像タグを含まない仕様らしく、画像は取得できません
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>YQL API RSS 表示</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
    $.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
        // rss(取得件数):但し1件の場合は for と json.query.results.item[i] の [i] を消す
        q: "select * from rss(5) where url in ('フィードのアドレス')",
        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;

            if(entry.pubDate) {
                var date = new Date(entry.pubDate);
            } else {
                var date = new Date(entry.date);
            }

            var yyyy = date.getFullYear();
            var mm = ('0' + (date.getMonth() + 1)).slice(-2);
            var dd = ('0' + date.getDate()).slice(-2);
            var dispDate = yyyy + '/' + mm + '/' + dd;

            // newDate:NEW 扱いにする日数
            var newDate = 3;
            var dateNow = new Date();
            var checkDate =(dateNow - date) / (1000 * 24 * 3600);
            var dispNew = '';
            if(checkDate <= newDate) {
                dispNew = '<strong>NEW!!</strong>';
            }

            // ameba の絵文字除外、Yahoo! の画像 URL への対応など
            var reg = 'src="((?!https:\/\/stat100.ameba).)(.*?)(\.jpg|\.jpeg|\.gif|\.png|\/img_)(.*?)"';
            if(entry.encoded) {
                var imgsrc = entry.encoded.match(reg);
            } else {
                var imgsrc = entry.description.match(reg);
            }
            var dispImg = '';
            if(imgsrc) {
                var dispImg = '<img ' + imgsrc + ' alt="">';
            }

            var dispElm = '<li><a href="' + link + '" target="_blank">' + dispImg + title + '</a>(' + dispDate + '' + dispNew + '</li>';
            $("#feed ul").append(dispElm);
        }
    });
});
</script>
<div id="feed">
<ul></ul>
</div>
</body>
</html>

参考サイト

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
1