Ajaxの魅力の一つが、Webサイトで公開されているデータを取り込み、プログラムの中で活用できることです。ブログで配信されているRSSフィードはとても良い学習の例題になります。
基本は一緒ですので、RSSフィードを取り込めるようになると、他のXMLベースのフォーマットにも応用することができます。
今回は動作確認に専念してほしいので、プログラムの解説は次回に行ないます。プログラムの細かい点にはこだわらず、まずは動くようにして、全体の流れをつかんでください。
【1】sample005 フォルダをコピーして sample006 フォルダを作成します。
【2】sample006 フォルダを開き、以下のように変更してください。
pref.js → ファイル名を newkw.js に変更
pref.php → ファイル名を newkw.php に変更
【3】プログラムを少し書き換えます。
index.css の中身に変更はありませんが、念のために掲載しておきます。
＊newkw.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
＊「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\ajax\sample006
ファイル名 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>
<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>
<div id="result"></div>
</body>
</html>
保存先 C:\phpdev\www\ajax\sample006
ファイル名 index.js
onload = init;
var state;
var result;
function init() {
$("btnData").onclick = newkwDisp;
$("btnClear").onclick = clearDisp;
state = $('state');
result = $('result');
}
function clearDisp() {
state.innerHTML = "";
result.innerHTML = "";
}
保存先 C:\phpdev\www\ajax\sample006
ファイル名 newkw.js
function newkwDisp() {
state.innerHTML = "処理中です・・・<br />\n";
var url = "newkw.php";
var paramList = "";
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";
}
result.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";
}
function showErrMsg(){
clearDisp();
state.innerHTML = "データを取得できませんでした。<br />\n";
}
}
保存先 C:\phpdev\www\ajax\sample006
ファイル名 index.css
#state {
font-size:16px;
color:#0000cc;
margin-top:10px;
margin-bottom:10px;
}
#result {
font-size:14px;
color:#000000;
}
保存先 C:\phpdev\www\ajax\sample006
ファイル名 newkw.php
<?php
header("Content-type: application/xml");
$url = "http://search.goo.ne.jp/rss/newkw.rdf";
readfile($url);
?>
プログラムを書き換えたら、Webサーバーを起動して動作確認してみましょう。
【4】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【5】まずは中継プログラムが、きちんと動いているか確認します。
http://localhost/ajax/sample006/newkw.php
中継プログラムが表示できなければ、このあとのプログラムは動きませんので、重要な確認です。
【6】Firefox を起動して、動作するか確認します。
http://localhost/ajax/sample006/
【7】「データ取得」ボタンをクリックします。
【8】データが表示されました。
左側はキーワードが検索された時間です。
【9】もう一度「データ取得」ボタンをクリックします。
【10】新しいデータが表示されました。時間がどんどん変わっていますね。
＊通信相手のサーバーに負担をかけないように、適当な間隔を置いてクリックしてください。
【11】どれか文字リンクをクリックします。
【12】gooのウェブ検索結果が表示されました。
＊Firefox の場合は新しいタブが開きます。
【13】同様に Internet Explorer でも動作確認してください。
＊Internet Explorer の場合は新しいウィンドウが開きます。
Internet Explorer では「データ取得」ボタンを再度クリックしても、データが更新されません。これはキャッシュを表示しているからです。その場合は「ツール → インターネット オプション」でキャッシュを消去してください。そうすると更新されます。
【解説】
(1)同じプログラムでも Firefox と Internet Explorer では、少し動きが異なることがわかったと思います。
(2)文字リンクをクリックした時、gooのウェブ検索結果が表示されるのは、「gooウェブ検索 最新キーワード」のRSSフィードから得られるリンクが、キーワードの検索結果へのリンクだからです。こちら側で特にプログラムしているわけではありません。
gooはRSSフィードを公開することで、訪問者が増えるメリットがあるのです。
(3)Internet Explorer でもキャッシュではなく、常に最新のデータを取得するように工夫することができます。その方法はのちに説明します。
(4)RSSフィードのタグはクセがあります。そのため各ブラウザに対応したプログラムにするには少し工夫が必要です。これまでと違うプログラムが一部ありますが、今は気にしないでください。名前空間というものを使っているだけです。
今回のプログラムの中身については、次回に詳しく解説します。
