jQueryでRSSを読み込む

久々の更新ですが、jQueryネタを。

お持ちでない方は以下、ダウンロードページで。
http://docs.jquery.com/Downloading_jQuery#Download_jQuery

jQuery単体ではxmlの解析ができないようなので、jFeedなるものを使用します。
jFeed: JavaScript jQuery RSS/ATOM feed parser plugin

ファイルを開くといっぱい入っていますが、とりあえず「build/dist/jquery.jfeed.pack.js」だけで動くようです。もちろん「jquery.js」も必要ですが。

外部サイトのRSSを取得して表示する場合は、内包されている「proxy.php」も使用します。
すごく簡単で便利です。

SOURCE:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jfeed.pack.js"></script>
<script type="text/javascript">
<!--
function initRSSFeed(){
    jQuery.getFeed({url:'proxy.php?url=http://http://images.apple.com/jp/main/rss/hotnews/hotnews.rss',success:onComplete});
    function onComplete(feed) {
        var temp = '<table>';
        for(var i = 0; i < feed.items.length; i++) {
            var item = feed.items[i];
            temp += '<tr><th class="feedDate">'+changeDate(item.updated)+'</th>';
            temp += '<td align="left" class="feedTitle">';
            temp += '<a href="' + item.link + '">' + item.title + '</a>';
            temp += '</td>';
            temp += '</tr>';
        }
        temp += '</table>';
        jQuery('#news').append(temp);
    }
}
//日付表記を変換
function changeDate(str){
    var myDate=new Date(str);
    var YYYY=myDate.getFullYear();
    var MM=myDate.getMonth()+1;
    if(MM<10){MM="0"+MM;}
    var DD=myDate.getDate();
    if(DD<10){DD="0"+DD;}
    var date=YYYY+"/"+MM+"/"+DD;
    return date;
}

//-->
</script>
<style type="text/css">
a:hover{
    text-decoration:none;
}
#news{
    margin:0 auto;
}
.feedDate{
    padding:3px;
    font-size:x-small;
}
td.feedTitle{
    padding:3px;
    font-size:x-small;
}
</style>
</head>
<body onLoad="initRSSFeed();">
    <div id="news"></div>
</body>
</html>

プレビュー
trackbacks(0) comments(0)

トラックバック(0)

このブログ記事を参照しているブログ一覧: jQueryでRSSを読み込む

このブログ記事に対するトラックバックURL: http://plug.heteml.jp/motulog/mt-tb.cgi/17

コメントする

2010年11月

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        
twitter