もちろん既成のRSSリーダーには及びませんが、自分で作ったシステムは細かい調整や改良ができるので、アイデア次第では可能性が広がります。
今回取り込むRSSフィードは、毎日新聞のサイトで公開しているニュース速報です。
ニュース速報(総合)のRSS
http://mainichi.jp/rss/etc/flash.rss
＊商業目的での利用は禁止されていますのでご注意ください。
このRSSフィードのタグ名は前回と同じなので、これまでに作ったプログラムをコピーして、少し変更するだけでできます。
今回も動作確認に専念してほしいので、プログラムの解説は次回に行ないます。まずはプログラムが動くようにして、全体の処理の流れをつかんでください。
【1】sample007 フォルダをコピーして sample008 フォルダを作成します。
【2】sample008 フォルダを開き、以下のようにファイルをコピーしてください。
newkw.js → コピーしてファイル名を flash.js にする
newkw.php → コピーしてファイル名を flash.php にする
＊元のファイルも使います。
【3】プログラムを少し書き換えます。一見多いようですがよく見ると変更はほんの一部です。newkw.js と newkw.php に変更はありませんので省略します。
＊newkw.php と flash.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
＊「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\ajax\sample008
ファイル名 index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="newkw.js"></script>
<script type="text/javascript" src="flash.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
<title>最新キーワード、ニュース速報</title>
</head>
<body>
<div>
<input type="button" id="btnData" value="データ取得" />
<input type="button" id="btnClear" value="クリア" />
</div>
<div id="state"></div>
<p>■最新キーワード</p>
<div id="result"></div>
<p>■ニュース速報</p>
<div id="result2"></div>
</body>
</html>
保存先 C:\phpdev\www\ajax\sample008
ファイル名 index.js
onload = init;
var state;
var result;
var result2;
function init() {
$("btnData").onclick = function (){newkwDisp();flashDisp();}
$("btnClear").onclick = clearDisp;
state = $('state');
result = $('result');
result2 = $('result2');
}
function clearDisp() {
state.innerHTML = "";
result.innerHTML = "";
result2.innerHTML = "";
}
保存先 C:\phpdev\www\ajax\sample008
ファイル名 flash.js
function flashDisp() {
state.innerHTML = "処理中です・・・<br />\n";
var url = "flash.php";
var paramList = "time=" + (new Date().getTime());
new Ajax.Request(url,
{
method: 'get',
onSuccess: getData,
onFailure: showErrMsg,
parameters: paramList
});
function getData(data){
var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
var response;
if(document.all){
response = data.responseXML.getElementsByTagName('rdf:RDF');
}else{
response = data.responseXML.getElementsByTagNameNS(rdf,'RDF');
}
var item = response[0].getElementsByTagName('item');
var tmpHtml="";
for(i = 0; i < item.length; i++){
var title = item[i].getElementsByTagName('title');
var titleValue = title[0].firstChild.nodeValue;
var link = item[i].getElementsByTagName('link');
var linkValue = link[0].firstChild.nodeValue;
var dc ="http://purl.org/dc/elements/1.1/";
var dcDate;
if(document.all){
dcDate = item[i].getElementsByTagName('dc:date');
}else{
dcDate = item[i].getElementsByTagNameNS(dc,'date');
}
var dcDateValue = dcDate[0].firstChild.nodeValue;
tmpHtml += dcDateValue + " :"
tmpHtml += "<a href='" + linkValue + "' target='_blank'>" + titleValue + "</a>";
tmpHtml += "<br />\n";
}
result2.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";
}
function showErrMsg(){
clearDisp();
state.innerHTML = "データを取得できませんでした。<br />\n";
}
}
保存先 C:\phpdev\www\ajax\sample008
ファイル名 index.css
#state {
font-size:16px;
color:#0000cc;
margin-top:10px;
margin-bottom:10px;
}
#result, #result2 {
font-size:14px;
color:#000000;
}
保存先 C:\phpdev\www\ajax\sample008
ファイル名 flash.php
<?php
header("Content-type: application/xml");
$url = "http://mainichi.jp/rss/etc/flash.rss";
readfile($url);
?>
準備ができたら、Webサーバーを起動して動作確認してみましょう。
【4】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【5】まずは中継プログラムが、きちんと動いているか確認します。
http://localhost/ajax/sample008/flash.php
＊中継プログラムの確認は重要です。
【6】Firefox を起動して、動作するか確認します。
http://localhost/ajax/sample008/
【7】「データ取得」ボタンをクリックします。
【8】データが表示されました。
最新キーワードは頻繁に更新されますが、ニュース速報は更新間隔が長いので、すぐには反映されません。
＊通信相手のサーバーに負担をかけないように、適当な間隔を置いてクリックしてください。
【9】ニュース速報の文字リンクをクリックします。
【10】毎日新聞の記事が表示されました。
毎日新聞はRSSフィードを提供することで、RSSリーダーなどからのアクセスを増やせるわけですね。
【11】同様に Internet Explorer でも動作確認してください。
【解説】
(1)今回は別々のサイトからRSSフィードを取得している点がポイントです。異なるコンピュータ同士が、XML形式のデータを介してつながり、同じ画面上に出力しているわけです。
(2)RSSにはいくつかバージョンがあり、これまでに使っていたのは RSS1.0 です。同じ種類のRSSなら今回のような方法で扱えます。取り込むRSSフィードを3つ、4つと増やしても要領は同じです。
しかし RSS2.0、RDF、Atom、XML の場合は、取得したデータを解析する部分のプログラムを少し変更する必要があります。
(3)newkw.js と flash.js は統合することもできますが、
・表示形式を個別に変えたい
・異なるXMLフォーマットを利用したい
など、細かなカスタマイズをするような場合は、分けていたほうが便利です。
