WEB制作の覚書

ブログで書いた記事を、タイトル一覧のような形で、自分のサイトに表示できないか・・・？
という方法です。

こちらのサイトを参考にし、
使い勝手のよいように、多少手をくわえたものになります。
http://www.kawa.net/works/ajax/rss/rss-box.html

まず、
こちらから、「jkl-hina.js」「jkl-parsexml.js」をダウンロード。
こちらから、「jse-date-w3cdtf.js」をダウンロード。

読み込んで表示させたいページのhtmlファイルの同ディレクトリ内に置きます。

htmlファイルのHEAD内に、以下を記述。

<script type="text/javascript" src="jkl-hina.js" charset="Shift_JIS"></script>
<script type="text/javascript" src="jkl-parsexml.js"></script>

<script type="text/javascript" src="jse-date-w3cdtf.js"></script>

<script><!--
window.onload = function () {
var url = "読み込ませたいRSS";
var http = new JKL.ParseXML( url );
var func = function ( data ) {
var items = data["rdf:RDF"].item;

//表示する件数
if ( items.length > 15 ) items.length = 5;
var hina = new JKL.Hina( "rssbox" );

//日付表示
var items = data["rdf:RDF"].item;
for( var i=0; i<items.length; i++ ) {
var dd = new Date();
dd.setW3CDTF( items[i]["dc:date"] );
var min = ""+dd.getMinutes();
if ( min.length < 2 ) min = "0" + min;
var hour = ""+dd.getHours();
if ( hour.length < 2 ) hour = "0" + hour;
var date = dd.getFullYear() + "/" + (dd.getMonth()+1) + "/" +
dd.getDate() + " " + hour + ":" + min;
items[i]["dc:date"] = date;
}


var dest = hina.expand( data, "rssbox" );
dest.style.display = "";
};
http.async( func );
http.parse();
}
// --></script>

BODY部に、

<ul>
<li title="@foreach item1 [/rdf:RDF/item]"><a _href="[/item1/link]" style="color: #666666; text-decoration: none;">[/item1/title]</a> [/item1/dc:date]</li>
</ul>

と記述。

フリーのRSSリーダーだと、カスタマイズも出来ず、広告も入るので、
こちらのやり方がとても便利だと思います。