スポンサード リンク

Ajax 複数のRSSフィードを取得する方法。

Ajax を使って作った『簡易RSSリーダー』に、複数のRSSフィードを読み込む機能を加えてみましょう。

もちろん既成のRSSリーダーには及びませんが、自分で作ったシステムは細かい調整や改良ができるので、アイデア次第では可能性が広がります。

今回取り込むRSSフィードは、毎日新聞のサイトで公開しているニュース速報です。

ニュース速報(総合)のRSS
http://mainichi.jp/rss/etc/flash.rss

ajax-295.gif

*商業目的での利用は禁止されていますのでご注意ください。

このRSSフィードのタグ名は前回と同じなので、これまでに作ったプログラムをコピーして、少し変更するだけでできます。

今回も動作確認に専念してほしいので、プログラムの解説は次回に行ないます。まずはプログラムが動くようにして、全体の処理の流れをつかんでください。


【1】sample007 フォルダをコピーして sample008 フォルダを作成します。

ajax-304.gif


【2】sample008 フォルダを開き、以下のようにファイルをコピーしてください。

newkw.js → コピーしてファイル名を flash.js にする
newkw.php → コピーしてファイル名を flash.php にする

ajax-298.gif

*元のファイルも使います。


【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 を起動します。

ajax-166.gif


【5】まずは中継プログラムが、きちんと動いているか確認します。

http://localhost/ajax/sample008/flash.php

ajax-299.gif

*中継プログラムの確認は重要です。


【6】Firefox を起動して、動作するか確認します。

http://localhost/ajax/sample008/

ajax-301.gif


【7】「データ取得」ボタンをクリックします。

ajax-302.gif


【8】データが表示されました。

ajax-303.gif

最新キーワードは頻繁に更新されますが、ニュース速報は更新間隔が長いので、すぐには反映されません。

*通信相手のサーバーに負担をかけないように、適当な間隔を置いてクリックしてください。


【9】ニュース速報の文字リンクをクリックします。

ajax-305.gif


【10】毎日新聞の記事が表示されました。

ajax-306.gif

毎日新聞はRSSフィードを提供することで、RSSリーダーなどからのアクセスを増やせるわけですね。


【11】同様に Internet Explorer でも動作確認してください。

ajax-300.gif


【解説】

(1)今回は別々のサイトからRSSフィードを取得している点がポイントです。異なるコンピュータ同士が、XML形式のデータを介してつながり、同じ画面上に出力しているわけです。


(2)RSSにはいくつかバージョンがあり、これまでに使っていたのは RSS1.0 です。同じ種類のRSSなら今回のような方法で扱えます。取り込むRSSフィードを3つ、4つと増やしても要領は同じです。

しかし RSS2.0、RDF、Atom、XML の場合は、取得したデータを解析する部分のプログラムを少し変更する必要があります。


(3)newkw.js と flash.js は統合することもできますが、
・表示形式を個別に変えたい
・異なるXMLフォーマットを利用したい
など、細かなカスタマイズをするような場合は、分けていたほうが便利です。


スポンサード リンク






Ajax初心者入門講座TOPへ