Ajax 動的なXMLの具体例について

今回は Ajax でよく使われる、動的なXMLを使った実用的でわかりやすい例を説明します。

全国の市町村は 1900 以上あるのですが、データを一度に全て表示しようとすると、多すぎて大変です。そこで各都道府県ごとの市町村だけを表示できたら便利です。

その場合、静的なXMLだと都道府県別に 47 のファイルを用意しなければなりません。

しかし動的なXMLなら、プログラミング言語を使い、データベースから条件に合った市町村のみを取得して表示することができます。そのためファイルは1つで済みます。

イメージし難いかもしれませんが、実際に見ればすぐにわかります。


【1】Internet Explorer を起動して、以下のURLにアクセスします。

http://ws.bzen.net/pgtop/GetCity.php?prefCd=1

ajax-309.gif

北海道の市町村だけが表示されました。


【2】次は Webブラウザのアドレスで、URLのパラメータを「8」に変更し、「移動」ボタンをクリックします。

ajax-311.gif


【3】今度は東京都の市町村が表示されました。

ajax-310.gif


【4】パラメータの数値を 1~47 の範囲で変え、他の都道府県の市町村も表示してみてください。


【解説】

(1)Webブラウザのアドレスから、URLを入力して表示した場合は、GETメソッドとなります。リンクをクリックして表示した場合もGETメソッドです。


(2)「GetCity.php」はプログラミング言語のPHPで書かれています。このプログラムは、GETメソッドでリクエストされると、「prefCd」という名前のパラメータで指定した数値(都道府県)の市町村をデータベースから検索して、XML形式で出力するようになっています。

これも簡単なWebサービスと言えます。都道府県を指定すると、市町村データが取得できるサービスです。

この仕組みを Ajax のプログラムで利用したのが、最初に紹介したWebサイトです。
全国の特産品検索


(3)GETメソッドを使うメリットは、特にプログラムを書くことなく、URLだけで取得するデータを変化させられることです。POSTメソッドならある程度プログラムを書かなければなりません。

楽天Webサービスなどでも、パラメータの数が増えるだけで、GETメソッドの使い方は同じです。そのため初心者のうちはGETメソッドが何かと便利なのです。

ただしGETメソッドでは、送信できる情報量に制限があることや、URLに情報が表示されてしまうため、重要な情報のやり取りには向きません。その場合はPOSTメソッドが適しています。


(4)Webサービスを利用するだけなら、それほど深い知識はいりません。しかしWebサービスを自分で公開する場合は、データベースとサーバーサイドで動くプログラミング言語の知識が必要です。よく使われているのが、PHPとMySQLの組み合わせです。

詳しくは PHP初心者入門講座 をご覧ください。基本的なことが学べます。




Ajax 静的なXMLと動的なXMLの違いについて

Ajax のプログラムで非同期通信を行なう時、よく XMLベースのフォーマットが使われますが、それには情報が「静的」なものと「動的」なものがあります。

静的 = 変化しない
動的 = 変化する

まずは以下のリンクをクリックして、比較してみてください。

・静的なXML
http://ws.bzen.net/pgtop/pref.xml

ajax-307.gif

・動的なXML
http://ws.bzen.net/pgtop/GetPref.php

ajax-308.gif

違いがわかりましたか?
表示されているデータの内容はまったく同じですが、実は大きな違いがあります。

よく見るとファイル名の拡張子が、静的なXMLの場合は「.xml」、動的なXMLの場合は「.php」になっています。

静的なXMLはデータをテキストエディタで書いてあるだけなので変化することはありません。変更したい場合はテキストエディタで再編集する必要があります。

それに対し動的なXMLのほうは、データベース(MySQL)に蓄積されたデータを、プログラミング言語(PHP)を使って出力していますので、自由自在に変化させることができます。

拡張子が「.php」でも、都道府県のような場合はデータ数が少ないし、変わることがありませんから、違いがわかり難いですね。でもこれが基礎になります。

次回は動的なXMLの具体的な活用例を紹介します。


【解説】

(1)Ajax の非同期通信には XMLベースのフォーマット以外に、テキストやHTMLなども利用できます。XML形式の場合は「タグでデータに意味付けができる」ので、プログラムの中で利用しやすいです。そのため例題でよく使っています。


(2)動的なXMLの出力には、PHP以外にもサーバーサイドで動くプログラミング言語が使えます。Java や Perl などもよく使われています。データベースは MySQL のほかに PostgreSQL がよく使われています。


Ajax プログラムを自作することのメリットについて。

今回は Ajax のプログラムを自作することのメリットについて考えてみたいと思います。

その前に少し補足すると、前回までに作成した簡易RSSリーダーは、RSS1.0対応です。RSS1.0ならそのまま動きますが、 RSS2.0、RDF、Atom、XML の場合は取得するデータの形式に合わせて変更が必要です。

既成のRSSリーダーなら、ほとんどのXMLフォーマットに対応しているし、さらに高機能です。なので今さらRSSリーダーを自作するまでもありません。

もちろん学習用の例題として適していたから取り上げたのですが、RSSリーダー自体を作ることが目的ではないのです。

学んでいただきたかったのは、「複数のコンピュータによるデータのやり取り」であり「公開されている膨大なデータの活用」、「データをいかに結びつけるか」なのです。

例えば自作した簡易RSSリーダーは、RSSフィードを読み込んで表示しましたが、これはまだ点の活用レベルです。他のWebサイトの情報とは結びついていません。

点 → 線 → 面

ネット上に点在している情報を結び付けて「線」や「面」の形に組み立てることで、新しい付加価値を作り出すことのほうが、面白くて楽しいのです。

では具体的な例を挙げてみます。現在検索されている最新のキーワードから、すぐにネットショップの商品を検索できるようにしてみるとどうでしょう。

もともと最新の検索キーワードとネットショップの商品情報は、別の情報でありつながっていません。これをプログラムを使ってつなげてみると以下のようになります。どれかリンクをクリックしてみてください。(Internet Explorer で確認)

・楽天Webサービスと連携した場合

2008-01-17T21:45:02+09:00 :シャトレーゼ

2008-01-18T14:59:24+09:00 :観葉植物

2008-01-18T15:04:53+09:00 :花粉症



・電脳卸Webサービスと連携した場合

2008-01-17T21:45:41+09:00 :石鹸

2008-01-17T21:47:17+09:00 :お茶

2008-01-17T21:42:58+09:00 :英会話



イメージが湧きましたか?リンクしたキーワードで商品が検索されていますね。これは二つの情報を線で結んだ活用レベルです。最新キーワードを元に自動的にネットショップへのリンクを作成する仕組みです。

さらにいろんなWebサービスを同時に組み合わせることで、複数のネットショップを横断検索することもできます。そうすると面の活用レベルとなり、膨大な情報を利用して新たな付加価値を生み出すことになります。

Ajaxのプログラムでは、このような情報の組み立てが簡単にできるのです。自分で作ったシステムなら、アイデア次第で可能性が広がることが、プログラムを自作するメリットです。

上記のプログラムはあくまで「例え」であり、本当に連携しているわけではありません。最新キーワードは仮定です。しかし楽天、電脳卸の部分は本物です。本当に買い物することができます。

実際にデータを使うときは、情報を提供しているサイトの利用規約に従う必要があります。商用利用や取得したデータから統計をとって公開することを禁止している場合もありますので注意してください。


【ワンポイント】

電脳卸や楽天はWebサービスで商品情報を公開しています。楽天は会員登録していればすぐに使えます。一度でも楽天のサービスを何か利用したことがあれば、会員登録されているはずです。

電脳卸は販売店登録(無料)すると、Webサービスを無料で利用できます。販売店とはアフィリエイターのことです。アフィリエイトは成果に応じて報酬がもらえる仕組みです。
電脳卸の 販売店登録はこちら から行なえます。

電脳卸や楽天のWebサービスを活用したプログラミングについては、この「Ajax初心者入門講座」の続編で行ないます。まだ販売店登録していない方は、今のうちに登録してログインできるように準備しておいてください。

最近では電脳卸、楽天、Amazonなど多くのサイトがWebサービスを提供しています。ではどのようなメリットがあるのでしょうか?

それは多くの人にシステムを開発してもらうことで、販路を広げるチャンスが生まれるからです。

アフィリエイター側のメリットは、Webサービスを利用してシステムを開発することで、膨大な商品情報を簡単に利用できることです。元のサイトにはないような「商品の見せ方を工夫」すれば新たな価値になります。しかも成果に応じて報酬がもらえるのです。

ネットショップを利用していて「不便だな」と感じた時はチャンスです。それをWebサービスを利用したプログラミングで解決できれば、面白いことになるかも。


Ajax sample008で使用したプログラムの解説。

今回は sample008 で使用した Ajax のプログラムについて詳しく解説します。追加や変更は少しだけで済みます。最小限の変更で複数のRSSフィードが読み込めるようになっています。


■index.html側

(1)flash.js を読み込む部分を追加しました。

<script type="text/javascript" src="flash.js"></script>


(2)ニュース速報を表示するための div要素を追加しました。

<div id="result2"></div>


■index.js側

(1)変数を宣言している部分に新しい変数を追加しました。

var result2;

*この変数の有効範囲はプログラム全体です。


(2)ボタンをクリックした時のイベントハンドラの設定を変更しました。

$("btnData").onclick = newkwDisp;

$("btnData").onclick = function (){newkwDisp();flashDisp();}

呼び出す関数を無名関数にし、その中で複数の関数を呼び出すようにしました。関数内では関数名の後に()カッコが付くことに注意してください。

これは以下のように書くこともできます。無名関数は呼び出したその場ですぐに定義していることがわかります。

$("btnData").onclick = function (){
  newkwDisp();
  flashDisp();
}

中に書くプログラムが多い場合は、この書き方のほうがわかりやすいです。


(3)変数で参照できるようにしている部分に1行追加しました。

result2 = $('result2');

*$()関数は getElementById() のショートカットで、prototype.js の機能です。


(4)「クリア」ボタンをクリックした時に呼び出される関数に1行追加しました。

result2.innerHTML = "";


■newkw.js側

変更はありません。


■flash.js側

(1)関数名を flashDisp に変更しました。

function flashDisp() {
  省略
}


(2)中継プログラムのURLを変更しました。

var url = "flash.php";


(3)div要素に結果を出力している部分を変更しました。

result2.innerHTML = tmpHtml;


■index.css側

(1)result2要素のCSSを指定しました。

#result, #result2 {
  font-size:14px;
  color:#000000;
}

id名を「,」カンマを用いて区切ると、複数要素の属性を一度に指定することができます。


■newkw.php側

変更はありません。


■flash.php側

flash.phpは中継プログラム(スクリプト)です。

(1)取得するURLを変更しました。

$url = "http://mainichi.jp/rss/etc/flash.rss";


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 IEのキャッシュを無効にする方法。

Internet Explorer で Ajax のプログラムを使って、XML形式のファイルを読み込んだ場合、2回目からはキャッシュしたデータが表示されてしまう問題がありました。

Webブラウザでキャッシュしないようにするには、いくつか方法があります。

・メタタグを使う(no-cache、expires)
ブラウザにより動作が異なることがあるようなので、確実とはいえません。

・POSTメソッドにする
初心者のうちはGETメソッドのほうが便利なことがあります。Webサービスを利用するとき、GETメソッドならプログラムを書かなくても、URLを入力するだけでデータの表示を確認できます。これについては後に説明します。

どれも一長一短がありますが、実は JavaScript が使える環境なら簡単な方法があります。キャッシュを無効にするというより、回避するといったほうがいいかもしれません。

元々Webブラウザがキャッシュするのは、リクエストしたURLが同じ時です。したがってURLにパラメータを加えて、パラメータの値が毎回変わるようにすればよいのです。以下の数字の部分が毎回変わると考えてください。

newkw.php?time=1200490671468

では実際にどうするのか説明します。まずは数値を変化させる簡単なサンプルで仕組みを理解しましょう。


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

ajax-285.gif


【2】sample007 フォルダを開き、「getTime.html」を新規に作成します。

ajax-286.gif

*UTF-8 形式で保存してください。
*「\」はWindowsでは円記号のことです。

保存先 C:\phpdev\www\ajax\sample007
ファイル名 getTime.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>getTime</title>
  </head>
  <body>
    <script type="text/javascript">
      <!--
        document.write(new Date());
        document.write("<br />");
        document.write(new Date().toLocaleString());
        document.write("<br />");
        document.write(new Date().getTime());
      // -->
    </script>
  </body>
</html>



準備ができたら、Webサーバーを起動して動作確認してみましょう。

【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【4】今回は Internet Explorer を起動して動作確認します。

http://localhost/ajax/sample007/getTime.html

ajax-287.gif

三通りの日付時刻が表示されましたね。


【5】ブラウザの「更新」ボタンをクリックします。

ajax-288.gif


【6】クリックする度に時刻がどんどん変わります。

ajax-289.gif

特に3番目の値の変化に注目してください。この値をURLのパラメータに使います。


動作を確認したら、この機能を簡易RSSリーダーに組み込んでみましょう。

【7】newkw.js を少しだけ変更します。

var paramList = "";

var paramList = "time=" + (new Date().getTime());

変更はたったこれだけです。


【8】Internet Explorer を起動して動作確認します。

http://localhost/ajax/sample007/

ajax-290.gif


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

ajax-291.gif


【10】データが表示されました。ここまでは今までと同じですね。

ajax-292.gif


【11】ではもう一度「データ取得」ボタンをクリックしてください。

ajax-293.gif


【12】新しいデータが表示されました。時間とキーワードがどんどん変わりますね。

ajax-294.gif

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

これで Internet Explorer でも常に新しいデータを取得できるようになりました。プログラムを変更したので、念のため Firefox でも動作確認してください。


【解説】

(1)今回は簡単な動作テストだったので、「getTime.html」では HTML の中に直接 JavaScript のプログラムを書きました。

しかし JavaScript に未対応のブラウザの場合、プログラムの部分を画面に表示してしまいます。そこでプログラム全体を <!-- と // --> で囲んで、もしブラウザが未対応の場合はコメントにして表示しないようにしています。これはよく使われる書き方です。


(2)document.write はブラウザの画面に、引数に指定した文字列や値を書込みます。引数には文字列や値以外に、オブジェクトや関数が使われることもあります。その場合は処理結果が表示されます。


(3)プログラムと表示は以下のように対応しています。

document.write(new Date());
Wed Jan 16 23:11:18 UTC+0900 2008
new Date() は引数に指定した時刻を表す、日付オブジェクトを生成します。引数を省略した場合は現在の時刻となります。


document.write(new Date().toLocaleString());
2008年1月16日 23:11:18
toLocaleString() メソッドは、日付オブジェクトを現地時刻を表す文字列に変換します。文字列の表示形式はWebブラウザやバージョンによって異なります。 toString() メソッドも使えます。

上記のプログラムは分かりやすく書くと以下のようになります。

d = new Date();
document.write(d.toLocaleString());
↓省略
document.write((new Date()).toLocaleString());
↓さらに省略
document.write(new Date().toLocaleString());

JavaScript にはオブジェクトに対する処理を定義した「メソッド」があらかじめ用意されています。オブジェクトの後にメソッドを書くことで処理結果が得られます。今回の例では日付オブジェクトの生成と同時にメソッドも指定した書き方です。


document.write(new Date().getTime());
1200492678562
getTime() メソッドは 1970年1月1日0時0分0秒(UTC:世界標準時刻)からの経過ミリ秒を表します。値は 1/1000秒ごとに変化します。この値をパラメータに使うことで、リクエストするURLがいつも新しくなります。


(4)パラメータの書き方について

動的なURLを作成するとき、通常は「?」の後にパラメータの組み合わせを書いていきます。
newkw.php?time=1200490671468

「time=1200490671468」が一つの組み合わせです。パラメータが複数ある時は「&」でつなげることができます。

しかし prototype.js を使っていますので、変数に組み合わせを代入するだけで、URLを組み立ててくれます。そのため「?」は不要です。

var url = "newkw.php";
var paramList = "time=" + (new Date().getTime());

new Ajax.Request(url,
  {
    method: 'get',
    onSuccess: getData,
    onFailure: showErrMsg,
    parameters: paramList
});


(5)渡したパラメータはリクエスト先のプログラムで利用することができます。つまり JavaScript から PHP にデータが渡せますが、今回は特に使っていません。ただ URL を変化させているだけです。


Ajax sample006で使用したプログラムの解説。

今回は sample006 で使用した Ajax のプログラムについて詳しく解説します。これまでに学んだプログラムとほとんど同じなので、変更した部分を中心に解説します。

またXML名前空間を扱う部分と、クロスブラウザ対応にするところは新しいので、そこに重点を置いて学んでください。

基本的な解説は既に sample003 で行なっています。そちらも参考にしてください。
Step14・sample003の解説
http://ajax.pgtop.net/category/4479851-1.html


■index.html側

(1)外部ファイルとして記述した JavaScript のファイル名を newkw.js に変更しました。

<script type="text/javascript" src="newkw.js"></script>


■index.js側

(1)イベントハンドラの設定で、呼び出す関数を newkwDisp に変更しました。

$("btnData").onclick = newkwDisp;


■index.css

変更はありません。


■newkw.php

newkw.phpは中継プログラム(スクリプト)です。

(1)取得するURLを変更しました。

$url = "http://search.goo.ne.jp/rss/newkw.rdf";


■newkw.js側

(1)関数名を newkwDisp に変更しました。

function newkwDisp() {
  省略
}


(2)中継プログラムのURLを変更しました。

var url = "newkw.php";


(3)接頭辞に対応したURIを変数に代入している部分です。

var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";

URIはXMLドキュメントの最初の部分に定義されています。
ajax-279.gif

*どうしても URI がわからない場合は、「*」アスタリスクを使うこともできますが、その場合は「全て」ということになります。

var url = "*";


(4)通信で取得したデータから rdf:RDF という要素を取り出している部分です。

var response;

if(document.all){
  response = data.responseXML.getElementsByTagName('rdf:RDF');
}else{
  response = data.responseXML.getElementsByTagNameNS(rdf,'RDF');
}

*1つしかなくても response は配列になります。

rdf:RDF を取り出すイメージ
ajax-280.gif

名前空間が使われた要素を取り出すには、getElementsByTagNameNS() というメソッドを使います。しかしこのメソッドは Internet Explorer では使えないため、Webブラウザによって処理を分ける必要があります。

if文の条件になっている document.all は Internet Explorer 4.0 で実装された独自拡張です。これが使えるブラウザは Internet Explorer ということになるので、getElementsByTagName()メソッドを使います。

逆にWebブラウザが Internet Explorer 以外の場合は getElementsByTagNameNS() メソッドを使う仕組みです。その時、引数になっている変数 rdf には接頭辞に対応したURIが入っています。


(5)変数 response から、さらに item という要素を取り出している部分です。

var item = response[0].getElementsByTagName('item');

response は配列なので、添え字を指定する必要があります。item も配列になります。

item を取り出すイメージ
ajax-281.gif


(6)変数 item から title という要素を取り出している部分です。

var title = item[i].getElementsByTagName('title');

*titleは配列になります。

titleを取り出すイメージ
ajax-282.gif


(7)titleの値を取り出している部分です。

var titleValue = title[0].firstChild.nodeValue;

開始タグと終了タグではさまれた部分も要素になるので、その最初の子要素(firstChild)の値(nodeValue)で取得できます。

値を取り出すイメージ
ajax-283.gif


*** link、dc:date でも同じようにイメージしてください。 ***


(8)変数 item から link という要素を取り出している部分です。

var link = item[i].getElementsByTagName('link');

*linkは配列になります。


(9)linkの値を取り出している部分です。

var linkValue = link[0].firstChild.nodeValue;


(10)変数 item から dc:date という要素を取り出している部分です。このタグは名前空間が使われていますので、ブラウザにより処理を分けています。

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');
}

*dcDateは配列になります。


(11)dc:dateの値を取り出している部分です。

var dcDateValue = dcDate[0].firstChild.nodeValue;


(12)取得したデータを連結して組み立てている部分です。この部分を工夫することで、いろんな形で表示することができます。

tmpHtml += dcDateValue + " :"
tmpHtml += "<a href='" + linkValue + "' target='_blank'>" + titleValue + "</a>";
tmpHtml += "<br />\n";

for文が1回繰り返される毎に、以下のようなHTMLが連結していきます。
2008-01-16T14:47:46+09:00 :<a href='' target='_blank'>テキスト</a><br />

プログラミングする時は、逆に組み立てたいHTMLを想像しながら書くことがコツです。


【解説】

Web系のプログラミングで難しいのは、クロスブラウザ対応にすることです。今回は単純に Internet Explorer と それ以外という処理に分岐しました。

しかし場合によっては、さらに Firefox、Safari、Opera、Netscape、Mozilla ごとに処理を分けなければならないこともあります。

現状では Internet Explorer と Firefox でシェアの 93% を超えるようなので、学習レベルでしたら、とりあえずこの2つのWebブラウザに対応できれば大丈夫です。


(1)Webブラウザの判別方法について

今回はWebブラウザによって処理を切り替えるため、document.all オブジェクトの有無を判定する「オブジェクト検出」という方法を使いました。all、getElementById、layers などがよく使われます。

if(document.all){
  処理
}else{
  処理
}

実際に使っている getElementsByTagNameNS で書くこともできます。使えない場合が Internet Explorer だということに注意してください。「!」で判定を逆にしています。「!」を使いたくない場合は、処理の内容を逆にしてください。

if(!document.getElementsByTagNameNS){
  処理
}else{
  処理
}


(2)他にも appName というプロパティの値で、ブラウザ名から判断する方法もあります。

if (navigator.appName == "Microsoft Internet Explorer") {
  処理
}else{
  処理
}


Ajax XML名前空間について。

前回、簡易RSSリーダーを作成しましたが、読み込んだRSSフィードのタグには「名前空間」が使われています。 Ajax のプログラミングとも関連が深いので、先に名前空間について説明します。

名前空間とは、XMLドキュメントの中で、要素名や属性名が衝突することを避けるために用いる修飾子のことです。

XML名前空間(Namespaces in XML) または XMLネームスペース

以下のようなタグ名になっているものが、名前空間を使っています。rdfやdcを接頭辞といい、接頭辞とタグ名は「:」コロンで区切って書きます。

<rdf:RDF></rdf:RDF>
<dc:date></dc:date>

タグ名は普通でも属性名に名前空間を使っている場合もあります。
<item rdf:about=""></item>

名前空間を使うと、あらかじめ定義されたHTMLタグや各分野で定義されたXMLタグと、あなたが独自に定義したXMLタグを区別することができます。

名前空間を使うには、XMLドキュメントの最初の部分で、接頭辞と対応するURIを定義します。
URI(ユーアールアイ:Uniform Resource Identifier)

ajax-284.gif

あとはタグ名の前に接頭辞を加えることで、同じタグ名を使っていても区別できるようになります。

名前空間を使った要素をプログラムの中で取り出すには、接頭辞に対応したURIを使いますので、あらかじめ変数に代入しておくと便利です。

var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";

var dc ="http://purl.org/dc/elements/1.1/";

以上の点を踏まえて、sample006の解説を読んでください。


【ワンポイント】

XMLドキュメントには複数の形式のタグを一緒に書くことができます。例えばHTMLとXMLを同時に書いたりする場合です。そのような時はタグ名が重複する可能性があります。しかし名前空間を使うことで、同じタグ名でも区別できるのです。

また同じタグ名で違う意味を持たせたい場合にも便利です。
<a:address></a:address>
<b:address></b:address>


Ajax 簡易RSSリーダーを作成する方法。

今回は Ajax を使って、RSSフィードを読み込む『簡易RSSリーダー』を作成します。RSSリーダーはこれまでに学んだプログラムを少し変更するだけでできます。

Ajaxの魅力の一つが、Webサイトで公開されているデータを取り込み、プログラムの中で活用できることです。ブログで配信されているRSSフィードはとても良い学習の例題になります。

基本は一緒ですので、RSSフィードを取り込めるようになると、他のXMLベースのフォーマットにも応用することができます。

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


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

ajax-249.gif


【2】sample006 フォルダを開き、以下のように変更してください。

pref.js → ファイル名を newkw.js に変更
pref.php → ファイル名を newkw.php に変更

ajax-255.gif


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

ajax-166.gif


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

http://localhost/ajax/sample006/newkw.php

ajax-259.gif

中継プログラムが表示できなければ、このあとのプログラムは動きませんので、重要な確認です。


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

http://localhost/ajax/sample006/


ajax-260.gif


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

ajax-261.gif


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

ajax-273.gif

左側はキーワードが検索された時間です。


【9】もう一度「データ取得」ボタンをクリックします。

ajax-274.gif


【10】新しいデータが表示されました。時間がどんどん変わっていますね。

ajax-275.gif

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


【11】どれか文字リンクをクリックします。

ajax-276.gif


【12】gooのウェブ検索結果が表示されました。

ajax-277.gif

*Firefox の場合は新しいタブが開きます。


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

ajax-278.gif

*Internet Explorer の場合は新しいウィンドウが開きます。

Internet Explorer では「データ取得」ボタンを再度クリックしても、データが更新されません。これはキャッシュを表示しているからです。その場合は「ツール → インターネット オプション」でキャッシュを消去してください。そうすると更新されます。


【解説】

(1)同じプログラムでも Firefox と Internet Explorer では、少し動きが異なることがわかったと思います。


(2)文字リンクをクリックした時、gooのウェブ検索結果が表示されるのは、「gooウェブ検索 最新キーワード」のRSSフィードから得られるリンクが、キーワードの検索結果へのリンクだからです。こちら側で特にプログラムしているわけではありません。

gooはRSSフィードを公開することで、訪問者が増えるメリットがあるのです。


(3)Internet Explorer でもキャッシュではなく、常に最新のデータを取得するように工夫することができます。その方法はのちに説明します。


(4)RSSフィードのタグはクセがあります。そのため各ブラウザに対応したプログラムにするには少し工夫が必要です。これまでと違うプログラムが一部ありますが、今は気にしないでください。名前空間というものを使っているだけです。


今回のプログラムの中身については、次回に詳しく解説します。


Ajax XMLドキュメントツリーの読み方。

Ajax ではWebページを動的に書き換えたり、非同期通信でXML形式などのデータを取得したりしますが、それにはDOMの知識が欠かせません。

DOM(ドム:Document Object Model)

DOMとはHTMLやXMLの内容と配置をツリー構造のオブジェクトとして扱い、プログラミング言語を使って制御するための仕組みです。

HTMLタグやXMLタグで記述したドキュメントは、ツリー構造として表現できます。DOMを使うとHTMLやXMLの各要素を特定することができます。またDOMには様々なメソッドやプロパティが用意されていて、特定した要素はプログラム中でいろんな操作が行なえるようになります。

・要素を特定する
・要素のデータを取得する
・新たな要素を生成する
・要素を削除する
・スタイルを変更する など

まずはXMLのツリー構造の読み方について説明します。この読み方がわかれば、DOMについて理解することができます。基本は「開始タグ」と「終了タグ」です。各要素は重箱のように入れ子になっています。そこに注意して読み進めてください。


【1】以下のURLをクリックし、RSSフィードを表示します。

http://search.goo.ne.jp/rss/newkw.rdf

ajax-263.gif


【2】「rdf:RDF」が最上位(ルート)の階層になっています。

ajax-264.gif

「rdf:RDF」の終了タグは最後にあります。つまり他の要素は全て rdf:RDF の内側に含まれています。


【3】rdf:RDF の左側にある「-」をクリックします。

ajax-265.gif


【4】rdf:RDF が閉じられました。

ajax-266.gif


【5】rdf:RDF の左側にある「+」をクリックすると、元通り展開されます。

ajax-267.gif

このように開いたり閉じたりすることで、各要素の関係が掴めます。


【6】今度は channel の左側にある「-」をクリックします。

ajax-268.gif


【7】channel が閉じられました。

ajax-269.gif

表示されなくなった title、link、description、dc:language、items が channel の内側に含まれていることがわかりましたね。

*この時 channel を「親ノード」、内側の要素を「子ノード」といいます。


【8】次は item に注目してください。

ajax-270.gif

item の中には title、link、dc:date が含まれていますね。これから作る簡易RSSリーダーではこれらの値を取得します。


【9】item の開始タグをよく見ると、どこまでがタグ名かわかり難いですよね。

ajax-271.gif


【10】そんな時は、終了タグのほうを見るのがコツです。

ajax-272.gif

「item」がタグ名だということがすぐにわかります。

ちなみに「rdf:about」は属性名です。属性値も取得できます。XMLを作る時に子ノードにするか、属性にするかは自由に決められます。

今回はXMLの階層ツリーについての読み方でした。これは非同期通信でデータを取得する時に必要になります。

またHTMLの要素も階層ツリーで表せますが、これは動的にページを書き換える時に必要になります。HTMLの場合についてはまたの機会に解説します。


Ajax 取得するRSSフィードを決める。

これから Ajax プログラミングで、簡易RSSリーダーを作成しますが、まずは取得するRSSフィードを決めることにします。

RSSフィードの探し方は、前回までに説明したので参考にしてください。どのRSSフィードを選んでもかまいません。しかし特に理由がなければ、最初はサンプルと同じものを使ってください。RSSの形式は同じなのであとで応用できます。

サンプルでは「gooウェブ検索 最新キーワード」のRSSフィードを使ってみることにします。このRSSフィードは、gooのウェブ検索で今まさに検索されているキーワード情報を配信しています。RSSの情報が短時間で更新されるため、動作確認のとき実感しやすく、学習に向いています。

*今回は Internet Explorer で進めてください。理由があります。


【1】以下のURLをクリックし、「goo RSS対応サイト一覧」のWebサイトにアクセスします。

http://www.goo.ne.jp/rss/

ajax-251.gif

このページで既成のRSSリーダーをダウンロードすることもできますが、今回は簡易RSSリーダーを自作します。


【2】利用規約をよく読んでください。

ajax-258.gif

RSSを利用するにあたっての規約がある場合がありますので、その範囲内で利用してください。今回はあくまで学習用として利用します。

公開されているRSSフィードは、常識的な範囲において利用してください。個人的な利用なら問題ないと思います。しかし事前に承諾が必要なケースもあります。

・データを利用して新しいシステムを作って公開する場合
・商用利用する場合
・短時間に大量のアクセスが発生する場合


【3】「ウェブ検索最新キーワード」のRSSリンクをクリックします。

ajax-252.gif


【4】ウェブ検索最新キーワードのRSSが表示されました。

ajax-253.gif

これをXMLファイルのドキュメントツリーと言います。それぞれの要素が階層構造になっていることが特徴です。


【5】「更新」ボタンをクリックすると、最新のRSSに変わります。

ajax-254.gif

時間を見ると、更新されていることがよくわかります。


【解説】

今回 Firefox を使わなかったのは理由があります。Firefox にはRSSリーダーの機能が付いています。「スタイル情報」が関連付けられている XMLファイルは以下のように表示されるため、ドキュメントツリーの形式で表示できないからです。(ソース表示は可能)

ajax-262.gif

そのためドキュメントツリーを表示したい時は、Internet Explorer を使ってください。

XMLのスタイル情報とはXSLのことです。XSLはXMLドキュメントをWebブラウザで見た場合の見栄え(スタイル)を指定します。HTMLに対するCSSのようなものです。

XSL(エックスエスエル:Extensible Stylesheet Language)

Ajax 通常のWebサイトからRSSを自動的に作成する方法。

ほとんどのブログでは、標準でRSSフィードを配信しています。ブログの普及とともにRSSフィードも広まりました。そしてRSSリーダーの登場が、さらにRSSの利用を促進しています。最近ではWebブラウザにRSSリーダーの機能が付いているものもあります。Ajax プログラミングでも非同期通信でRSSのデータを活用できます。

RSSの普及にともない、一般のWebサイトでもRSSフィードを配信するようになってきました。大手のWebサイトは大体対応しています。

しかしRSSフィードに対応していない一般のWebサイトもたくさんあります。どうせRSSを利用するなら、全てのWebサイトの情報を活用できたほうがいいですよね。

そんな時に便利なのが、「WebサイトからRSSを自動的に作成するサービス」です。いくつか種類があり、RSSを生成する方法に特徴があります。

・MyRSS.jp
http://myrss.jp/

「MyRSS.jp」はWebサイトを登録すると、Webサイトを自動的に巡回し、更新があれば最新ニュースの形でRSSを配信します。特徴はWebサイトに新しく追加された『クリックできるテキスト』をRSSにすることです。

・なんでもRSS
http://blogwatcher.pi.titech.ac.jp/nandemorss/

「なんでもRSS」は、東京工業大学 精密工学研究所 奥村研究室 が運営している、RSSフィードを自動的に生成するサービスです。特徴は『同じパターンで記述される日付情報を少なくとも二つ以上含む』ページが対象となっていることです。

サイトに日付情報が無い場合は「MyRSS.jp」のほうがいいと思います。目的により使い分けてください。


【ワンポイント】

RSS形式になった情報は利用しやすいですが、どうしてもRSSにできない場合は、正規表現を使って解析する方法もあります。


Ajax RSSフィードを効率よく探す方法。

最近では多くのブログや一般のWebサイトで、XMLベースのフォーマットを配信しています。サイトによりXML、RSS、RDF、Atomなど、配信している種類はいろいろです。数種類配信しているWebサイトもあります。

RSSはサイドバーにリンクが表示されていたり、前回説明したように、検索結果などに表示される場合など様々です。

このようにWebサイトの見出しや要約などをRSSとして配信したデータを、RSSフィード(RSS feed)と言います。

RSSフィードはRSSリーダーを使って受信したり、 Ajax プログラミングで非同期通信を行なう際に活用できます。

普段見慣れているサイトのRSSならすぐに見つかります。しかし特定の分野のRSSを集めようとした場合、個別にサイトを探していたのでは効率が悪いです。そんな時に便利なのが「RSSの総合情報サイト」です。

RSSの総合情報サイトでは、RSSを分野別にまとめて表示していますので、目的のRSSを効率よく探すことができます。個別サイトのRSSはもちろん、分野全体の最新RSSを取得することもできるのでとても便利です。

・RSSナビ
http://www.rssnavi.jp/

・RSScity
http://www.rsscity.net/


公開されているRSSフィードは、常識的な範囲において利用してください。個人的な利用なら問題ないと思います。しかし事前に承諾が必要なケースもあります。

・データを利用して新しいシステムを作って公開する場合
・商用利用する場合
・短時間に大量のアクセスが発生する場合

RSS配信元の各Webサイトの利用規約をよく読んで活用してください。


Ajax Webサイトで公開されているRSSを表示する方法。

XMLベースのフォーマットでよく見かけるのが、ブログなどで提供されているRSSです。RSSはWebサイトの見出しや要約などをデータとして公開することに使われています。

RSSで公開されたデータは、RSSリーダーなどのアプリケーションで簡単に利用できます。また Ajax で非同期通信することにより、簡単にデータを活用することができます。

最近ではブログに限らず、様々なWebサイトがRSSを配信していますので、いくつか見てみましょう。RSSを表示する方法は大体同じですので参考になります。


まずはニュースサイトです。ニュースサイトでは最新記事などをRSSとして提供しています。

【1】以下のURLをクリックし、「毎日新聞社」のWebサイトにアクセスします。

http://mainichi.jp/

ajax-247.gif


【2】「RSS」と書かれたリンクを探してクリックします。

ajax-248.gif


【3】RSSについての説明ページが表示されました。

ajax-236.gif


【4】「RSS一覧」からRSSを選択します。

ajax-237.gif


【5】ニュースに関するRSSが表示されました。

ajax-238.gif


次はオークションサイトです。オークションサイトでは、出品された商品に関するRSSを提供しています。しかもキーワードによる絞込みができます。

【6】以下のURLをクリックし、「Yahoo!オークション」のWebサイトにアクセスします。

http://auctions.yahoo.co.jp/jp/

ajax-239.gif


【7】検索ボックスにキーワードを入力し、「検索」ボタンをクリックします。

ajax-240.gif


【8】検索結果に「RSS」と書かれたリンクが表示されるのでクリックします。

ajax-241.gif


【9】検索キーワード(オークション)に関するRSSが表示されました。

ajax-242.gif


次はブログ検索サイトです。ブログ検索サイトでは、投稿されたブログ記事に関するRSSを提供しています。これもキーワードによる絞込みが可能です。

【10】以下のURLをクリックし、「livedoorブログ検索」のWebサイトにアクセスします。

http://sf.livedoor.com/

ajax-243.gif


【11】検索ボックスにキーワードを入力し、「検索」ボタンをクリックします。

ajax-244.gif


【12】検索結果に「RSS」と書かれたリンクが表示されるのでクリックします。

ajax-245.gif


【13】検索キーワード(ブログ)に関するRSSが表示されました。

ajax-246.gif


大事なポイントは、これらのRSSが自動的に更新されることです。ニュース、オークション、ブログなど最新のデータが書き込まれる度に更新されます。

RSS以外にも様々な分野でXMLベースのフォーマットが決められていて、情報のやり取りが行なわれています。


【ワンポイント】

WebサイトによってRSS、RDF、XMLなど提供している形式が少し異なります。複数の形式を提供している場合もあります。でもXMLベースのフォーマットであることに変わりはないので、ほとんど同じように利用することができます。

XML(エックスエムエル:Extensible Markup Language)
RSS(アールエスエス:Rich Site Summary)
RDF(アールディーエフ:Resource Description Framework)


中級ではこのRSSを非同期通信で取り込むプログラムを説明します。


Ajax 中級で学ぶポイント。

Ajax 中級では、これまでに学んだことを活用して、簡単なRSSリーダーなどのアプリケーションを作ってみます。

他のサイトで公開されている XML や RSS を利用することで、どんなことが便利になるのか実際に体験することができます。

無料で使える高機能のRSSリーダーは、ネット上にたくさんあるので、RSSリーダー自体を作ることが目的ではありません。

ネット上に公開されている膨大な情報を取得して、いかに自分自身に役立てるかが重要です。取得した情報を独自に加工するには、やはり自分でプログラムできたほうが便利なのです。

XMLをプログラムの中で扱えるようになると、いろいろ応用範囲が広がります。例えばデータベースに保存して分析したり、バラバラな情報を上手く組み合わせて独自の視点を加えれば、新しい情報を作り出すことも可能です。

何より自分一人では蓄えられない、膨大な情報を利用できることが魅力です。

AjaxのプログラムはWebブラウザ上で動作しますが、ブラウザはもともとインターネットに接続して利用しているので、情報の取得が簡単です。

また中級では、DOM(ドム: Document Object Model)を使った画面への表示や、XMLの解析など、一歩踏み込んだ使い方を解説します。

初級で学んだことが前提なので、まだの方は初級から行なってください。


Ajax JavaScriptのプログラムを分割する方法。

Ajax では頻繁に非同期通信を行なったり、動的にページを書き換えたりするので、それに関わるプログラムが長くなります。

例えば複数のWebサービスからデータを取得する場合を考えてみてください。prefDisp()のような関数が増えることが想像できますよね。

もちろん1つのファイルに長いプログラムを書くこともできますが、見通しが悪くなります。

そこで今後の展開も考えて、前回までに作成した JavaScript のプログラムを分割することにします。

JavaScript の外部ファイルは複数読み込むことができるので、プログラムを適当なまとまりに分割することで、とても読みやすくなります。


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

ajax-232.gif


【2】次は以下のように変更してください。

pref.html → ファイル名を index.html に変更
pref.js → コピーして index.js と pref.js の二つにする
pref.css → ファイル名を index.css に変更
pref.php そのまま


【3】最終的に以下のようなファイルの構成になります。

ajax-233.gif

index.css と pref.php の中身に変更はありませんが、念のために掲載しておきます。

*pref.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
*「\」はWindowsでは円記号のことです。

保存先 C:\phpdev\www\ajax\sample005
ファイル名 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="pref.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref</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\sample005
ファイル名 index.js

onload = init;
var state;
var result;

function init() {
  $("btnData").onclick = prefDisp;
  $("btnClear").onclick = clearDisp;
  state = $('state');
  result = $('result');
}

function clearDisp() {
  state.innerHTML = "";
  result.innerHTML = "";
}


保存先 C:\phpdev\www\ajax\sample005
ファイル名 pref.js

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.php";
  var paramList = "";

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');

    var item = response[0].getElementsByTagName('Item');
    var tmpHtml="";

    for(i = 0; i < item.length; i++){
      var prefCd = item[i].getElementsByTagName('PREF_CD');
      var prefCdValue = prefCd[0].firstChild.nodeValue;

      var prefName = item[i].getElementsByTagName('PREF_NAME');
      var prefNameValue = prefName[0].firstChild.nodeValue;

      tmpHtml += prefCdValue + " " + prefNameValue + "<br />\n";
    }

    result.innerHTML = tmpHtml;
    state.innerHTML = "データを取得しました。<br />\n";

  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}


保存先 C:\phpdev\www\ajax\sample005
ファイル名 index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result {
  font-size:14px;
  color:#000000;
}


保存先 C:\phpdev\www\ajax\sample005
ファイル名 pref.php

<?php
  header("Content-type: application/xml");
  $url = "http://ws.bzen.net/pgtop/pref.xml";
  readfile($url);
?>



準備が整ったらWebサーバーを起動して動作確認してみましょう。

【4】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【5】Webブラウザを起動して、プログラムを分割する前と同じように動作するか確認します。

http://localhost/ajax/sample005/

*index.html や index.php というファイル名は、サーバーの初期設定で省略できるようになっています。

・Firefox で表示した場合
ajax-234.gif

・Internet Explorer で表示した場合
ajax-235.gif


【解説】

■index.html側

(1)JavaScriptのプログラムを分割したので、外部ファイルとして読み込む部分が2つになりました。

<script type="text/javascript" src="pref.js"></script>

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="pref.js"></script>


(2)CSSのファイル名を変更したので、それに合わせました。

<link href="index.css" rel="stylesheet" type="text/css">


■index.js側

全体で使うプログラムだけにしました。


■pref.js側

都道府県を表示するための、非同期通信と表示に関わる部分だけにしました。


*index.css と pref.php に変更はありません。


今後、非同期通信や表示に関わるプログラムが増える場合は、pref.jsのような外部ファイルを増やして、index.html側で読み込むだけで済みます。

このように関連性のあるプログラムをまとめることで、ソースコードが見やすくなります。


Ajax 中継プログラムを使って、外部ドメインのファイルにアクセスする方法。

まずは以下のURLを Firefox で開いてください。
http://ws.bzen.net/pgtop/pref.xml

XMLを開いたらアドレスに注目してください。
ajax-222.gif

このXMLのデータを使いたいのですが、このままではプログラムがある localhost から見ると外部のドメインとなるため、データを取得することができません。

そこで localhost 内に『中継プログラム(スクリプト)』を置くことにします。Ajax のプログラムからは、同一ドメイン内の中継プログラムにはアクセスすることができます。

そして中継プログラムには制限が無いので、外部のドメインにあるファイルにアクセスできます。つまり間接的に外部のドメインにあるデータを取得するのです。

○ pref.js → 同一ドメイン内
× pref.js → 外部ドメイン
○ pref.js → pref.php → 外部ドメイン

中継プログラムにはPHPやJavaなどのサーバーサイドで動くプログラミング言語が使われます。今回はレンタルサーバーでもよく利用されているPHP言語を使うことにします。


【1】sample004 フォルダに、「pref.php」を作成します。pref.php は必ず SHIFT-JIS 形式で保存してください。

ajax-223.gif

*「\」はWindowsでは円記号のことです。

保存先 C:\phpdev\www\ajax\sample004
ファイル名 pref.php

<?php
  header("Content-type: application/xml");
  $url = "http://ws.bzen.net/pgtop/pref.xml";
  readfile($url);
?>



【2】次は pref.js の一部を変更します。

var url = "pref.php";

ajax-224.gif


これで準備ができました。動作を確認してみましょう。

【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


まず中継プログラムが正常に動くか確認してみましょう。

【4】Firefox を起動して、アドレスに以下のように入力し実行します。

http://localhost/ajax/sample004/pref.php

ajax-225.gif

XMLが表示されたらOKです。とても大事なポイントですが、アドレスに注目してください。

このXMLは外部ドメインのデータですが、中継プログラムの働きでアドレスが localhost 内になりました。これでデータを取得できるようになります。


【5】Firefox のアドレスに以下のように入力し実行します。

http://localhost/ajax/sample004/pref.html

ajax-228.gif


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

ajax-229.gif


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

・Firefox で表示した場合
ajax-230.gif


【8】Internet Explorer でも確認してください。

・Internet Explorer で表示した場合
ajax-231.gif


見た目はこれまでのプログラムと変わりませんが、外部のドメインにあるデータを利用できるようになったのは大きな変化です。これで各WebサービスやRSSなどで提供されている膨大なデータを利用することができます。


【解説】

中継プログラムは難しくありません。たった3行で最低限必要な動きはできます。

(1)ヘッダを設定している部分です。

header("Content-type: application/xml");

header() 関数は HTTP ヘッダを送信するために使用されます。XMLで出力するようにしています。

header() を使わなかった場合はXMLとして表示されません。
ajax-226.gif


(2)UTF-8 形式で保存すると header() の部分がうまく動きませんでした。

ajax-227.gif

これは「ヘッダー情報は既に送信済みなので変更できない」という警告です。header() の前に空白や空行があったり、出力が行われてしまうとこのような警告がでるようです。

UTF-8 で保存すると何故そうなるのか原因はわからないのですが、とりあえず SHIFT-JIS で保存すると問題なく動きます。


(3)取得するファイルのURLを変数に代入している部分です。

$url = "http://ws.bzen.net/pgtop/pref.xml";

他のファイルを取得する時は、この部分を変えるだけです。WebサービスによってはURLにパラメータを含める場合があります。パラメータでURLが長くなることもあるので、変数に代入しておいたほうが便利です。


(4)ファイルを読み込んで出力している部分です。

readfile($url);

実際に外部のドメインにあるファイルを開いているのは、readfile()関数を使っているこの1行です。


(5)同一ドメイン内について

非同期通信に関しては、サブドメインは別ドメインとして扱われるので注意が必要です。

例えば pgtop.net にプログラムがある場合、下層のディレクトリにはアクセスできますが、サブドメインにはアクセスできません。

○ pgtop.net/ajax/
× ajax.pgtop.net/


PHP言語は奥が深いですが、中継プログラムとして使う分には、最低限の使い方さえわかれば大丈夫です。

PHPについてもっと詳しく知りたい場合は、 PHP初心者入門講座 を参考にしてください。


Ajax 外部のドメイン上にあるファイルを取り込む方法。

Ajax の非同期通信のメリットとして、各種Webサービスで公開されている膨大なデータを取り込んで利用できることがあります。

まずは以下のURLを開いてみてください。ブラウザで XML が開きます。
http://ws.bzen.net/pgtop/pref.xml

・Internet Explorer で表示した場合
ajax-216.gif

・Firefox で表示した場合
ajax-222.gif

この XML はこれまでに使った pref.xml を、サーバー上にアップしただけです。世界中からアクセスすることができます。このような XML や RSS の形で公開されているデータは、他のコンピュータで利用することができます。

今回の XML はシンプルな例ですが、外部のドメイン上にあるこの pref.xml を取り込めるようになると、いろんなWebサービスに応用できます。


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

ajax-213.gif

コピーしただけなので、この段階では同一ドメイン内の pref.xml を読み込みます。もちろん正常に動作します。


【2】sample004 フォルダを開き、「pref.xml」を削除します。

ajax-214.gif


【3】最終的に今回は以下のようなファイルの構成になります。

ajax-215.gif


【4】次は pref.js の一部を変更します。

ajax-217.gif

pref.xml

http://ws.bzen.net/pgtop/pref.xml

変更はたったこれだけです。では動作を確認してみましょう。


【5】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【6】Firefox を起動して、アドレスに以下のように入力し実行します。

http://localhost/ajax/sample004/pref.html

ajax-219.gif


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

ajax-220.gif


【8】しかし処理が進みません。

ajax-221.gif

原因は他のドメインにあるファイルを取得しようとしているからです。localhost から見るとインターネット上のドメインは全て他のドメインとなります。

非同期通信で取得できるのは、プログラムと同一ドメイン内にあるファイルに限られます。他のドメインのファイルを扱うには、『中継プログラム(スクリプト)』を使う必要があります。中継プログラムについては次回に説明します。


【ワンポイント】

Internet Explorer の場合は、他のドメインに接続しようとすると、以下のようなメッセージが表示されるので、「はい」ボタンをクリックします。

ajax-218.gif

Internet Explorer ではデータが表示されますが、これはローカル環境で動作確認しているからです。実際にレンタルサーバーなどにアップすると、表示できなくなります。

やはり中継プログラムが必要なのです。


Ajax Webブラウザのキャッシュを消去する方法。

Webブラウザのキャッシュとは、ホームページにアクセスした時に、ブラウザがデータを一時的に保存しておく仕組みのことです。次回に同じホームページにアクセスする時は、キャッシュのデータを使うことで、素早く表示することができます。

キャッシュのおかげで同じデータを何度も受信する必要がなく、通信回線やサーバーの負担を軽減できます。

とても便利なキャッシュですが、プログラミングを行なう時に邪魔になることがあります。Ajax のプログラムはWebブラウザで動作確認しますが、ソースコードを修正したのに、結果に反映されないことがあるのです。更新ボタンを押しても上手く表示できません。

原因はWebブラウザのキャッシュに古いデータが保存されていて、情報が更新されないからです。キャッシュのことを知らないと、プログラミングする時に悩むことがありますので注意してください。

またニュースなど更新が頻繁なサイトを見るときも、キャッシュが邪魔になります。常に新しい情報を取得したい時は、キャッシュを使わないほうがいいです。

そこで今回はWebブラウザのキャッシュを消去する方法を説明します。


【1】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【2】Firefox を起動して、アドレスに以下のように入力し実行します。

http://localhost/ajax/sample003/pref.html

ajax-198.gif


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

ajax-199.gif


【4】データが表示されました。ここまでは今までと同じです。

ajax-200.gif


Firefox は開いたままにしてください。

【5】sample003フォルダを開いて、「pref.xml」をわざと「1pref.xml」に変更します。

C:\phpdev\www\ajax\sample003

ajax-203.gif

*「\」はWindowsでは円記号のことです。


【6】Firefox の「再読み込み」ボタンをクリックします。

ajax-208.gif


【7】最初の状態に戻りました。

ajax-202.gif


【8】もう一度「データ取得」ボタンをクリックします。

ajax-204.gif


【9】あれ!変ですよね? データが表示されています。

ajax-205.gif

ファイル名を変えたので、本来ならデータは取得できないはずです。しかも失敗時のメッセージが表示されていません。

原因はブラウザがキャッシュを表示しているからです。キャッシュを消去すればブラウザは新しい情報を読み込みます。


それでは Firefox のキャッシュを消去してみましょう。

【10】Firefox のメニューから「ツール」→「プライバシー情報の消去」を選択します。

ajax-206.gif


【11】「キャッシュ」がチェックされていることを確認し、「今すぐ消去」ボタンをクリックします。

ajax-207.gif


これでキャッシュを消去できたので確認してみましょう。

【12】「再読み込み」ボタンをクリックします。

ajax-208.gif


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

ajax-204.gif


【14】今度はちゃんと失敗時のメッセージが表示されました。

ajax-209.gif


【15】動作を確認したら、sample003フォルダを開いて、「pref.xml」を元に戻します。

ajax-210.gif

プログラムの結果が正しく反映されない場合は、今回学んだキャッシュのことを思い出してください。


【解説】

(1)Internet Explorerでもキャッシュの問題が起こります。Internet Explorer6.0でキャッシュを消去するには以下の手順になります。

IE のメニューから「ツール」→「インターネットオプション」を選択します。

ajax-211.gif


「ファイルの削除」ボタンをクリックし、「OK」ボタンをクリックします。

ajax-212.gif


(2)Firefox と Internet Explorer では名称が違いますので整理しておきます。意味は同じです。

・Firefox キャッシュ 「再読み込み」ボタン
・Internet Explorer 一時ファイル 「更新」ボタン


【ワンポイント】

キャッシュを無視して新しい情報に更新するには、「スーパーリロード」を使う方法もあります。Firefox と Internet Explorerで操作は同じです。

・スーパーリロードの場合
「Ctrlキー」+「F5キー」を同時に押す

・更新、再読み込みの場合
「F5キー」

ただしスーパーリロードを多用すると、Webサーバーに負担がかかるので注意してください。スーパーリロードでもダメな場合は、やはりキャッシュを削除したほうが確実です。


Ajax プログラムを繰り返し追ってみることが効果的。

Ajax のプログラムを理解するには、Firebug でブレイクポイントを設定し、何度もプログラムを追ってみることが効果的です。

sample003の解説を読んで大体の意味をつかんだら、次はぜひプログラムを追ってみてください。1回目はあまり分からないかもしれませんが、繰り返し追うことで、理解できる割合が少しずつ増えてきます。そのうちに「わかった!」と思う瞬間が必ずきます。

人間の成長曲線は最初は緩やかですが、ある時点を境に急激に上昇します。プログラミングの学習も同じで、最初は上達を実感できないかもしれませんが、あきらめずに続ければ理解できるようになります。


【1】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【2】Firefox を起動して、アドレスに以下のように入力し実行します。

http://localhost/ajax/sample003/pref.html

ajax-178.gif


【3】Firebug を起動します。今回は同一ウィンドウで開きます。

ajax-192.gif

*「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。


【4】JavaScriptのファイルを「pref.js」にします。

ajax-193.gif


【5】適当な場所にブレイクポイントを設定してください。

ajax-194.gif


【6】プログラムを実行します。

ajax-197.gif

どこにブレイクポイントを設定したかで、実行の仕方が異なります。ブラウザの「再読み込み」ボタンや、「データを取得」ボタンをクリックするとプログラムが動き出し、ブレイクポイントを設定した場所で一時停止します。


【7】あとはプログラムを1行ずつ進めてください。

ajax-196.gif

再開、ステップオーバー、ステップイン、ステップアウトの各ボタンを使って進めます。コツはステップオーバーとステップインを使い分けることです。

Prototype.js の機能を使っている部分でステップインすると、Prototype.js の中に入ってしまいます。Prototype.js の中まで理解する必要は無いので、入った時はステップアウトで抜け出してください。


【8】またCSSのボックスを視覚化して、どう反映されているか確認してみてください。

ajax-195.gif


【ワンポイント】

Firebug の操作方法については、以下のページを参考にしてください。

Step4・Firebugでデバッグする
http://ajax.pgtop.net/category/4272522-1.html

Step7・Firebugでボックスを視覚化する
http://ajax.pgtop.net/category/4327773-1.html


スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。