Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

表題の処理を行おうとしたところ、詳細な解説つきの「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>

参考サイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした