by Bob Dylan例えば、ホームページとブログ両方を運営している場合、
ホームページにブログの更新情報が表示されると便利です。
表示する方法はこちらです。
こちらのブログを例にしています。
用意するもの
１．prototype.js
こちらからダウンロードして、解凍すると.jsファイルがひとつあります。
ファイル名にバージョンが書いてありますが、prototype.jsにリネームします。
/js/フォルダを作って、その配下に入れておきます。
２．jkl-parsexml.js
こちらからダウンロードして、解凍すると.jsファイルがひとつあります。
１．で用意した/js/フォルダ配下に入れておきます。
３．rss.phpというPHPファイルを用意
このように書いておきます。
<?php
readfile('http://blog.webarton.com/index.rdf');
?>
４．index.htmlというHTMLファイルを用意
<body></body>タグの中には、
<div id="rssbox"></div>
それから、
<head></head>タグの中には、
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jkl-parsexml.js"></script>
<script type="text/javascript">
window.onload = function(data){
$('rssbox').innerHTML = '<div style="margin:20px 0"><img
src="images/loading.jpg" width="150" height="113"
alt="しばしお待ちを！" /></div>';
var url = "rss.php";
var http = new JKL.ParseXML(url);
var output = '<ul>';
var func = function(data){
for(var i=0; i<=5; i++){
output += '<li><a href="' + data["rdf:RDF"].item[i].link
+ '">' + data["rdf:RDF"].item[i].title + '</a></li>';
}
output += '</ul>';
$('rssbox').innerHTML = output;
};
http.async(func);
http.parse();
}
</script>
と書いておきます。
５．ローディング用のloading.jpgファイルを用意
images/フォルダを作って、ファイルを入れておきます。
アニメーションGIFで動いたほうが親切ですが、
こちらのサンプルは静止画像です。
サイズは<head></head>タグの中に書いてあるので、適宜修正して下さい。
６．アップロード。
こんな風に表示されます。
注：rssによっては、<head></head>タグの中を少し修正しないと取得できません。
