Demoを見る
とある勉強会でnoriさんからjQueryを使ってRSSを取得しXMLをパース、そしてリストで表示させるという夏休みの？宿題があったのでやってみました。自分の中でRSSが同じドメインにある場合とRSSが同じドメインにない場合（JavaScriptはセキュリティの関係上、ドメインが違うファイルを読込む事は出来ない仕様になっています。）を想定して作ってみました。
同じドメインにある場合
Demoで読み込んでいるのはこのxmlファイルです。以下JavaScriptのソースにある$.ajax(options)の詳しい内容についてはjQuery日本語リファレンスなどで確認して下さい。
HTML
//head内にjQueryを
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
//body内にリスト表示させる場所を作ってあげる
<div id="list-01">
<!-- ここにフィードの内容が表示される -->
</div>
JavaScript
$(function(){
//RSSが同じドメインにある場合
$.ajax({
//同じドメインにあるXMLファイルのある場所を指定してあげる
url: 'rss.xml',
//非同期通信
async: true,
//通信結果をキャッシュしない
cache: false,
dataType: "xml",
success: function(xml){
$(xml).find('item').each(function(i){
if (i == 10) {
return false;
}
var title = $(this).find('title').text();
var url = $(this).find('link').text();
var date = $(this).find('pubDate').text();
//月表示を数字表示に変換する
date = dateChanger(date);
//idがlist-01の箇所にリストで書き出す
$('#list-01').append('<li>' + date + '<a href="' + url + '">' + title + '<\/a><\/li>');
});
//idがlist-01にあるliをolで括る
$('#list-01 li').wrapAll('<ol><\/ol>');
},
//エラー表示
error: function(xml){
$('#list-01').append('<p>Feedの読み込みに失敗しちゃいました。<\/p>');
}
});
//月表示を数字表示に変換する
var dateChanger = function(str){
var mydate = new Date(str);
yy = mydate.getFullYear();
mm = mydate.getMonth() + 1;
dd = mydate.getDate();
if (mm < 10) { mm = "0" + mm; }
if (dd < 10) { dd = "0" + dd; }
datestr = yy + "年" + mm + "月" + dd + "日";
return datestr;
};
});
同じドメインにない場合
Demoで読み込んでいるのはこのxmlファイルです。外部RSSなので上記のような形では読み込んで来れません。そこでRSSフィード解析用に使ったのはjFeedというプラグインです。ダウンロードしてきたファイルの中でいるのはjquery.jfeed.jsとproxy.phpの2つ。
※セキュリティの問題上、proxy.phpにURLを埋め込むという従来とは違う方法をとっています。
HTML
//head内にjQueryとjFeedを
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.jfeed.js"></script>
//body内にリスト表示させる場所を作ってあげる
<div id="list-02">
<!-- ここにフィードの内容が表示される -->
</div>
JavaScript
$(function(){
//RSSが同じドメインにない場合
$.getFeed({
//本来はここにRSSのURLを指定する。僕はセキュリティの問題上proxy.phpにURLを埋め込んだので以下の通りに
url: 'proxy.php',
success: function(feed){
var html = '';
for(var i = 0; i < feed.items.length && i < 10; i++){
var item = feed.items[i];
html += '<li>' + dateChanger(item.updated) + '<a href="' + item.link + '">' + item.title + '<\/a><\/li>';
}
$('#list-02').append(html);
$('#list-02 li').wrapAll('<ol><\/ol>');
}
});
//月表示を数字表示に変換する
var dateChanger = function(str){
var mydate = new Date(str);
yy = mydate.getFullYear();
mm = mydate.getMonth() + 1;
dd = mydate.getDate();
if (mm < 10) { mm = "0" + mm; }
if (dd < 10) { dd = "0" + dd; }
datestr = yy + "年" + mm + "月" + dd + "日";
return datestr;
};
});
proxy.php
$handle = fopen($_REQUEST['url'], "r");
proxy.phpにURLを埋め込んだ方がセキュリティ上良いようなので僕は上記の部分を下記に。
$handle = fopen('http://labs.yusukenakanishi.com/feed/', "r");
どちらの場合も作ってみると比較的簡単に行くようですね。僕？もちろん出来るまで苦労しました。。rewさんやwonderさんのお陰ですー＞＜
