Ajax初心者入門講座 http://ajax.pgtop.net/ Ajaxの基礎からはじまり、高機能なJavaScriptデバッガを備えているFirebugの使い方、フレームワークであるPrototype.jsを使ったサンプルまでを、初心者向けに図を使って詳しく解説しています。 ja http://ajax.pgtop.net/article/86894834.html Ajax sample011で使用したプログラムの解説。 今回は sample011 で使用した Ajax プログラムについて、解説します。実際にプログラムを動かしながら解説を読むと理解が深まります。DOM を使って要素数を調べて、子要素を削除しているところがポイントです。■index.html側(1)新しい JavaScript の外部ファイルを読み込む部分を追加しました。<script type="text/javascript" src="city.js"></script>(2)タイトルを変えました。... Step21・sample011の解説 Ajax入門 2008-02-24T21:38:15+09:00 Ajax プログラムについて、解説します。実際にプログラムを動かしながら解説を読むと理解が深まります。

DOM を使って要素数を調べて、子要素を削除しているところがポイントです。


■index.html側

(1)新しい JavaScript の外部ファイルを読み込む部分を追加しました。
<script type="text/javascript" src="city.js"></script>


(2)タイトルを変えました。
<title>pref・city</title>

(3)新しい div 要素(result2)を追加しました。
<div id="result2"></div>


■index.js側

(1)変数を追加しました。
var result2;

(2)変数で div 要素(result2)を参照できるようにしている部分です。
result2 = $('result2');

(3)関数 clearDisp() は使わないので、削除しました。


■pref.js側

(1)都道府県の選択リストボックスを切り替えた時に、呼び出される関数 prefChange() の中に、市町村をクリアする関数 clearCity() と、市町村を表示する関数 cityDisp() を加えました。

function prefChange(obj) {
    省略

    //市町村をクリア
    clearCity();
    //市町村を表示
    cityDisp(prefCd);
  }
}

(2)関数 cityDisp() は、取得した値(value)を引数にしているところがポイントです。
cityDisp(prefCd);

＊prefCd は市町村の抽出条件に使われます。


■city.js側

(1)city.js は、ほどんと pref.js と同じです。大きな違いは関数 clearCity() だけです。

function clearCity() {
  //result2の子要素を取得
  var sel = result2.childNodes;

  //既に子要素がある場合は削除
  if (sel.length >= 1) {
    result2.removeChild(sel[0]);
  }

}

(2)div 要素(result2)の子要素を取得している部分です。
var sel = result2.childNodes;

・div 要素(result2)からみると、select要素が子要素になります。
・childNodes の戻り値は配列になります。


(3)子要素がある場合(すでにselect要素がある)は、削除しています。
result2.removeChild(sel[0]);

・1回目は子要素が無いので何もしません。
・selは配列です。子要素は1個しかないので、[0]番目を指定しています。
　(配列は0から始まるため)


(4)clearCity()を呼び出さないと、以下のようにselect要素がどんどん増えます。

ajax-342.gif

pref.js でコメントにすると確認できます。
//clearCity();


■pref.php側
pref.phpに変更はありません。


■city.php側

(1) city.phpでは、GETメソッドで値を受け取った場合は、さらに「GetCity.php」を呼び出し、XMLとして出力します。値を受け取らなかった場合は、HTMLとしてメッセージを出力します。

<?php
  if (isset($_GET["prefCd"])){
    header("Content-type: application/xml");
    $prefCd = $_GET["prefCd"];
    $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
    readfile($url);
  }else{
    header("Content-type: text/html");
    print "パラメータに prefCd を含めてください。";
  }
?>


(2)if文を使って、GETメソッドで値を受け取ったかどうかで、処理を分岐しています。

if (isset($_GET["prefCd"])){
  省略
}else{
  省略
}


(3)XMLで出力することをブラウザに送信する処理です。
header("Content-type: application/xml");


(4)受け取った値を変数に代入している部分です。
$prefCd = $_GET["prefCd"];


(5)受け取った値を、さらに外部ドメインのプログラムへのパラメータとして組み立てている部分です。
$url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;


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

readfile($url);


(7)HTMLで出力することをブラウザに送信する処理です。
header("Content-type: text/html");


■index.css側

(1)div 要素(result2)を追加したので、CSSにも追加しました。

#result2 {
  省略
}


(2)選択リストボックスを横に並べるため、要素を回り込ませています。
float:left;

・floatを指定しなかった場合は、下に表示されます。
ajax-343.gif


(3)div 要素の間を広げています。
margin-right:10px;

ajax-344.gif


(4)選択リストボックスで、フォントサイズは効果がないので不要です。
font-size:14px;

これは以前に、ブラウザの画面に div 要素として、直接出力していた時の名残です。削除してかまいません。


]]> http://ajax.pgtop.net/article/86762251.html Ajax sample011の動作確認をしてみる。 前回に作成した Ajax プログラムの動作を確認してみましょう。このプログラムは、都道府県を切り替えたら、自動的に市町村が変わるというものです。使い方をマスターすれば、いろいろ応用範囲が広がります。プログラムがまだの方は一つ前のステップをご覧ください。プログラムの準備ができたら、Webサーバーを起動して動作を確認します。【1】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。【2】まずは「city... Step20・sample011の動作確認 Ajax入門 2008-02-24T17:09:58+09:00 Ajax プログラムの動作を確認してみましょう。

このプログラムは、都道府県を切り替えたら、自動的に市町村が変わるというものです。使い方をマスターすれば、いろいろ応用範囲が広がります。

プログラムがまだの方は一つ前のステップをご覧ください。

プログラムの準備ができたら、Webサーバーを起動して動作を確認します。

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

ajax-166.gif


【2】まずは「city.php」がちゃんと動くか確認します。

http://localhost/ajax/sample011/city.php?prefCd=1

ajax-330.gif

＊city.php の確認は非常に重要です。

city.php で XML が表示されなければ、city.js のプログラムも動きません。city.php は別ドメインにある「GetCity.php」を、同一ドメイン(localhost)にするための、中継プログラムです。


【3】今度はわざとパラメータを含めないで動かしてみます。パラメータを含めない場合は、メッセージが表示されます。

http://localhost/ajax/sample011/city.php

ajax-331.gif


次はいよいよ Ajax プログラムの動作確認です。

【4】Firefox を起動して、動作を確認します。

http://localhost/ajax/sample0011/

ajax-333.gif


【5】どれか都道府県を選択してください。

ajax-334.gif


【6】新たに選択リストボックスが表示されました。

ajax-335.gif

新しい選択リストボックスには、選択した都道府県に対応する市町村のリストが表示されます。


【7】どれか市町村を選択してください。

ajax-336.gif


【8】選択した市町村の値が、メッセージとして表示されました。

ajax-337.gif


【9】他の都道府県に切り替えてみましょう。

ajax-338.gif


【10】都道府県を切り替えると、市町村がリセットされます。

ajax-339.gif


【11】選択した都道府県に対応する市町村のリストに変わりました。

ajax-340.gif


【12】他の都道府県や市町村でも試してください。


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

・Internet Explorer の場合
ajax-341.gif


【ワンポイント】

市町村の選択リストボックスを切り替えたときに、取得した値を使って、次のプログラムを呼び出す条件にすれば、 全国の特産品検索 のような使い方ができます。
(Internet Explorer で確認)


]]> http://ajax.pgtop.net/article/86683151.html Ajax 都道府県から市町村を絞り込んで表示する方法。 今回は都道府県を選択すると、該当する市町村の一覧が表示できる Ajax プログラムについて説明します。全国に都道府県は 47 しかありませんが、市町村は 1900 を超えます。レコードを全件表示していては大変です。そこで「URLにパラメータを渡すと、該当する市町村のリストをXMLで返す」というWebサービスを私が作りました。http://ws.bzen.net/pgtop/GetCity.php?prefCd=1prefCd=1 の数字を 1~47 の範囲で変更すると、XML... Step19・市町村を絞り込んで表示する Ajax入門 2008-02-24T15:24:36+09:00 Ajax プログラムについて説明します。

全国に都道府県は 47 しかありませんが、市町村は 1900 を超えます。レコードを全件表示していては大変です。

そこで「URLにパラメータを渡すと、該当する市町村のリストをXMLで返す」というWebサービスを私が作りました。

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

ajax-332.gif

prefCd=1 の数字を 1～47 の範囲で変更すると、XMLのデータが変わります。

このWebサービスを Ajax のプログラムから利用することで、都道府県を切り替えるごとに市町村が変わるフォーム部品が作れます。

＊上記のWebサービスは、サーバーに付加がかかるため、この講座の学習目的でのみ利用できます。その他の目的での利用は禁止します。

今回はプログラムが長いので、プログラミング、動作確認、プログラムの解説、というステップに分けて解説します。まずはプログラミングから行ないましょう。


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

ajax-328.gif


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

ajax-329.gif

・city.js と city.php は新たに作成します。
・pref.php と city.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
・変更点があるのは index.html、index.js、pref.js、index.css です。
・pref.php に変更はありませんので省略します。

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

保存先　C:\phpdev\www\ajax\sample011
ファイル名　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>
    <script type="text/javascript" src="city.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref・city</title>
  </head>
  <body>
    <div id="state"></div>
    <div id="result"></div>
    <div id="result2"></div>
  </body>
</html>


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

onload = init;
var state;
var result;
var result2;

function init() {
  state = $('state');
  result = $('result');
  result2 = $('result2');
  prefDisp();
}


保存先　C:\phpdev\www\ajax\sample011
ファイル名　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');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectPref');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    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;

      var opt = document.createElement('option');
      opt.setAttribute('value', prefCdValue);
      var text = document.createTextNode(prefNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult要素に追加
    result.appendChild(sel);
    //イベントハンドラの設定
    $('selectPref').onchange = function (){prefChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

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

}

function prefChange(obj) {
  var prefCd = Number(obj.value);

  if (prefCd == 0) {
    state.innerHTML = "都道府県が選択されていません。<br />\n";
  } else {
    var prefName = obj.options[obj.selectedIndex].text;
    state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";
    //市町村をクリア
    clearCity();
    //市町村を表示
    cityDisp(prefCd);
  }

}


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

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

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

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectCity');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    for(i = 0; i < item.length; i++){
      var cityCd = item[i].getElementsByTagName('CITY_CD');
      var cityCdValue = cityCd[0].firstChild.nodeValue;

      var cityName = item[i].getElementsByTagName('CITY_NAME');
      var cityNameValue = cityName[0].firstChild.nodeValue;

      var opt = document.createElement('option');
      opt.setAttribute('value', cityCdValue);
      var text = document.createTextNode(cityNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult2要素に追加
    result2.appendChild(sel);
    //イベントハンドラの設定
    $('selectCity').onchange = function (){cityChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

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

}

function cityChange(obj) {
  var cityCd = Number(obj.value);

  if (cityCd == 0) {
    state.innerHTML = "市町村が選択されていません。<br />\n";
  } else {
    var cityName = obj.options[obj.selectedIndex].text;
    state.innerHTML = cityCd + "：" + cityName + " を選択しました。<br />\n";
  }

}

function clearCity() {
  //result2の子要素を取得
  var sel = result2.childNodes;

  //既に子要素がある場合は削除
  if (sel.length >= 1) {
    result2.removeChild(sel[0]);
  }

}


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

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

#result {
  float:left;
  margin-right:10px;
  font-size:14px;
  color:#000000;
}

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


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

<?php
  if (isset($_GET["prefCd"])){
    header("Content-type: application/xml");
    $prefCd = $_GET["prefCd"];
    $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
    readfile($url);
  }else{
    header("Content-type: text/html");
    print "パラメータに prefCd を含めてください。";
  }
?>


pref.php を含めると、必要なファイルは全部で 7つ です。

変更点のある index.html、index.js、pref.js、index.css については、それほど大きな変更ではありません。また新たに作成した city.js と city.php も、 pref.js と pref.php を少し改良しただけです。

ファイル数が増え、プログラムも長くなったように感じるかもしれませんが、中身は今までとほとんど同じで、新しいことは少しだけです。

これまでのステップを順番に学んできた方は、詳しい説明がなくても、大体意味がつかめる力が身に付いていると思います。

プログラムの動作確認は次回に行ないます。


]]> http://match.seesaa.jp/ot_listing.pl?aid=35126&sid=ajaxhp&tid=seesaa_hotspot&k=%E8%B2%B7%E5%8F%96&hid=35 オススメ・スポンサーサイト「買取」 高価 買取 | パソコン 買取 | 家電 買取 | 車 買取 | バイク 買取 ]]> 2008-02-24T15:24:36+09:00 ads by Seesaa http://ajax.pgtop.net/article/86203279.html Ajax sample010で使用したプログラムの解説。 今回は sample010 で使用した Ajax のプログラムについて、詳しく解説します。 DOM(ドム:Document Object Model) を使っている部分を重点的に説明します。「.innerHTML」を使った時と「DOM」を使った時で、どのように変わるのか考えながら読んでみてください。■index.html側HTMLには div 要素に id 名を付けているだけで、中身は空です。&lt;div id="result"&gt;&lt;/div&gt;■pref.j... Step18・sample010の解説 Ajax入門 2008-02-23T23:14:06+09:00 Ajax のプログラムについて、詳しく解説します。 DOM(ドム:Document Object Model) を使っている部分を重点的に説明します。

「.innerHTML」を使った時と「DOM」を使った時で、どのように変わるのか考えながら読んでみてください。


■index.html側
HTMLには div 要素に id 名を付けているだけで、中身は空です。

<div id="result"></div>


■pref.js側

(1)select要素を作成している部分です。
var sel = document.createElement('select');

イメージ
<select></select>

＊新しい要素を作成するには、createElementメソッドを使います。


(2)select要素に id 名を付けている部分です。
sel.setAttribute('id', 'selectPref');

イメージ
<select id="selectPref"></select>


(3)1行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(4)option 要素に値をセットしている部分です。
opt.setAttribute('value', 0);

<option value="0"></option>


(5)option 要素内に項目をセットしている部分です。
var text = document.createTextNode('選択してください。');
opt.appendChild(text);

<option value="0">選択してください。</option>

＊要素内に文字列を使う場合は、createTextNode で「テキストノード」を作成する必要があります。文字列を直接使うことはできないので注意してください。

＊要素を親要素に追加するには、appendChildメソッドを使います。


(6)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
</select>


(7)2行目以降の option 要素は、for文の中で作成します。レコード件数分だけ繰り返されます。

for(i = 0; i < item.length; i++){
  省略
}


(8)2行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(9)option 要素に値をセットしている部分です。
opt.setAttribute('value', prefCdValue);

<option value="1"></option>


(10)option 要素内に項目をセットしている部分です。
var text = document.createTextNode(prefNameValue);
opt.appendChild(text);

<option value="1">北海道</option>


(11)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
</select>


(12)もう一度for文が繰り返されると、以下のようになります。

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
  <option value="2">青森県</option>
</select>

これがどんどん繰り返されます。


(13)select要素を div 要素(result)に追加している部分です。
result.appendChild(sel);

<div id="result">
  <select id="selectPref">
    <option value="0">選択してください。</option>
    <option value="1">北海道</option>
    <option value="2">青森県</option>
  </select>
</div>

＊ここではじめて画面に表示されます。


(14)select要素にイベントハンドラを設定している部分です。
$('selectPref').onchange = function (){prefChange(this);}

＊thisは選択リストボックス自身です。

＊select要素を作成した後でないと、イベントハンドラを設定できないため、この位置に書いています。


(15)イベントハンドラを設定したので、都道府県を切り替えた時には、関数 prefChange() が呼び出されます。

function prefChange(obj) {
  省略
}

＊引数の obj は選択リストボックス自身を参照しています。


(16)選択リストボックスで、選択したオプションの値(value)を数値にして、変数に代入している部分です。
var prefCd = Number(obj.value);

＊この値は市町村を絞り込む時の抽出条件に使うことができます。


(17)if文で選択リストボックスの値が、0の時(1行目)とそれ以外の時で、処理を分けています。

if (prefCd == 0) {
  state.innerHTML = "都道府県が選択されていません。<br />\n";
} else {
  var prefName = obj.options[obj.selectedIndex].text;
  state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";
}

＊選択リストボックスで、選択したオプションの項目(テキスト)は、以下のように取得できます。
obj.options[obj.selectedIndex].text;


今回のように DOM を使った方法では、要素の種類(select、option、li、a、img など)や目的によって、使うメソッドがいろいろありますので、慣れが必要です。

HTMLタグを直接代入できる「.innerHTML」の簡単さがわかったのではないでしょうか。


【ワンポイント】

index.html側で、select要素と1行目のオプションまでは書いておいて、プログラムでは2行目の option 要素から作成する方法もあります。もちろん1行目は書かなくて、空の select要素だけでもかまいません。

<select id="selectPref">
  <option value='0' selected>選択してください。</option>
</select>

動的に作成したフォーム部品が、どうしても上手く動作しないときには、あらかじめ親要素だけは書いておくと有効です。

その場合、最初から要素が存在するので、index.js側でイベントハンドラを設定することができます。


]]> http://ajax.pgtop.net/article/86108855.html Ajax DOMを使って選択リストボックスを書き換える方法。 前回の最後に少し説明した通り、 Ajax で「.innerHTML」を使って、動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。そこで今回は DOM(ドム:Document Object Model) を使った方法に書き換えてみます。DOM は慣れるまで少し難しく感じると思いますが、今回はとりあえず動かしてみることに専念してください。【1】sample009 フォルダをコピーして sample010 フォルダを作成します。【2】今回は最終... Step17・DOMを使って書き換える Ajax入門 2008-02-23T16:37:03+09:00 Ajax で「.innerHTML」を使って、動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。

そこで今回は DOM(ドム:Document Object Model) を使った方法に書き換えてみます。DOM は慣れるまで少し難しく感じると思いますが、今回はとりあえず動かしてみることに専念してください。


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

ajax-319.gif


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

ajax-320.gif

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

変更は pref.js だけです。 index.html、index.js、pref.php、index.css に変更はありませんので省略します。

保存先　C:\phpdev\www\ajax\sample010
ファイル名　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');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectPref');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    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;

      var opt = document.createElement('option');
      opt.setAttribute('value', prefCdValue);
      var text = document.createTextNode(prefNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult要素に追加
    result.appendChild(sel);
    //イベントハンドラの設定
    $('selectPref').onchange = function (){prefChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

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

}

function prefChange(obj) {
  var prefCd = Number(obj.value);

  if (prefCd == 0) {
    state.innerHTML = "都道府県が選択されていません。<br />\n";
  } else {
    var prefName = obj.options[obj.selectedIndex].text;
    state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";
  }

}



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

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

ajax-166.gif


【4】Firefox を起動して、動作を確認します。

http://localhost/ajax/sample0010/

ajax-321.gif


【5】どれか都道府県を選択してください。

ajax-322.gif


【6】都道府県が選択され、上にメッセージが表示されました。

ajax-323.gif

＊選択したオプションの値と項目が表示できるということは、プログラムの中で値を活用できるということです。(例えば市町村を絞り込む検索条件にしたり)


【7】他の都道府県でも試してください。

ajax-326.gif


【8】今度はわざと一番上の「選択してください。」を選択します。

ajax-324.gif


【9】「都道府県が選択されていません。」というメッセージが表示されました。

ajax-325.gif


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

ajax-327.gif

選択リストボックスは、前回と同じように動作することが確認できると思います。


【ワンポイント】

今回の sample010 と同じように、都道府県を切り替えた時にメッセージを表示する機能を、「.innerHTML」を使っている sample009 に組み込んだ場合、 Internet Explorer では動くのですが、Firefox では上手く動きませんでした。

やはり DOM を使った方法のほうがよさそうです。


DOM のプログラム部分については次回に詳しく解説します。


]]> http://match.seesaa.jp/ot_listing.pl?aid=35126&sid=ajaxhp&tid=seesaa_hotspot&k=%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8&hid=35 オススメ・スポンサーサイト「ホームページ」 ホームページ 製作 会社 | ホームページ 制作 横浜 | ホームページ 制作 名古屋 | ホームページ 製作 東京 | ホームページ 制作 会社 ]]> 2008-02-23T16:37:03+09:00 ads by Seesaa http://ajax.pgtop.net/article/85790665.html Ajax sample009で使用したプログラムの解説。 今回は sample009 で使用した Ajax のプログラムについて、詳しく解説します。これまでとほとんど同じプログラムなので、選択リストボックスを動的に作成するところ以外は簡単だと思います。Ajax で非同期通信することで、XML形式のデータを、フォーム部品の値として表示する方法をつかんでください。選択リストボックスは、「オプションメニュー」や「セレクトボックス」という場合もあります。■index.html側sample005と比べると、ボタンを除いただけです。■inde... Step16・sample009の解説 Ajax入門 2008-02-22T23:16:51+09:00 Ajax のプログラムについて、詳しく解説します。

これまでとほとんど同じプログラムなので、選択リストボックスを動的に作成するところ以外は簡単だと思います。

Ajax で非同期通信することで、XML形式のデータを、フォーム部品の値として表示する方法をつかんでください。

選択リストボックスは、「オプションメニュー」や「セレクトボックス」という場合もあります。


■index.html側
sample005と比べると、ボタンを除いただけです。


■index.js側
ページを読み込んだ直後に、すぐ選択リストボックスを表示するため、関数 init() の中で関数 prefDisp() を呼び出すようにしました。

function init() {
  省略
  prefDisp();
}


■pref.js側

(1)選択リストボックスの開始タグを、変数に代入している部分です。
tmpHtml += "<form><select name='selectPref'>";


(2)選択リストボックスの最初のオプション(1行目)を作成している部分です。
tmpHtml += "<option value='0' selected>選択してください。</option>";


(3)for文で、選択リストボックスのオプション(2行目以降)を、レコード件数分だけ連結している部分です。

<option value='1'>北海道</option> のような値と項目になります。

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 +="<option value='" + prefCdValue + "'>" + prefNameValue + "</option>\n";
}


(4)選択リストボックスの終了タグを、変数に代入している部分です。
tmpHtml += "</select></form>";


(5)プログラムで組み立てた選択リストボックスを、ブラウザの画面に表示している部分です。
result.innerHTML = tmpHtml;


■pref.php側
sample005では静的な XML を使っていましたが、sample009では動的な XML に変更してみました。

・静的なXML
http://ws.bzen.net/pgtop/pref.xml
↓
・動的なXML
http://ws.bzen.net/pgtop/GetPref.php

どちらを使っても結果は同じです。

動的な GetPref.php は、データベースのレコードを XML 形式に加工して出力するプログラムです。一種のWebサービスだと考えると、GetPref.php プログラムの中身はブラックボックスでかまいません。

Webサービスは、使い方さえわかれば、プログラムの中でどういった処理が行われているのか、考慮しなくても大丈夫です。(楽天や Amazon の Web サービスでも同じ)

＊GetPref.php はサーバーに負荷がかかるため、学習目的でのみお使いください。その他の利用は禁止します。


【ワンポイント】

今回、選択リストボックスの表示に「.innerHTML」プロパティを使いました。この方法が一番簡単だからです。innerHTML は HTML タグや文字列を直接代入できるため、わかりやすいというメリットがあります。

しかし動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。したがって、「.innerHTML」ではなく DOM(ドム:Document Object Model) を使ったほうがよいと言われています。

DOM を使う方法については、次回に説明します。


]]> http://ajax.pgtop.net/article/85612789.html Ajax 選択リストボックスを動的に作成する方法 今回は Ajax を使って、非同期通信で取得した XML データを、「選択リストボックス」にしてみましょう。選択リストボックスは Web サイトでよく使われています。選択リストボックスを使うと、一覧から入力できるようになります。しかもデータベースに連動して動的に変化させる方法を覚えておくと、用途がとても広がります。【1】sample005 フォルダをコピーして sample009 フォルダを作成します。【2】今回は最終的に以下のようなファイルの構成になります。プログラムを一部... Step15・選択リストボックスを作成 Ajax入門 2008-02-22T16:50:11+09:00 Ajax を使って、非同期通信で取得した XML データを、「選択リストボックス」にしてみましょう。

選択リストボックスは Web サイトでよく使われています。選択リストボックスを使うと、一覧から入力できるようになります。

しかもデータベースに連動して動的に変化させる方法を覚えておくと、用途がとても広がります。


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

ajax-312.gif


【2】今回は最終的に以下のようなファイルの構成になります。プログラムを一部変更します。

ajax-313.gif

＊index.css に変更はありません。
＊「\」はWindowsでは円記号のことです。

保存先　C:\phpdev\www\ajax\sample009
ファイル名　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 id="state"></div>
    <div id="result"></div>
  </body>
</html>


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

onload = init;
var state;
var result;

function init() {
  state = $('state');
  result = $('result');
  prefDisp();
}

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


保存先　C:\phpdev\www\ajax\sample009
ファイル名　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="";
    tmpHtml += "<form><select name='selectPref'>";
    tmpHtml += "<option value='0' selected>選択してください。</option>";

    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 +="<option value='" + prefCdValue + "'>" + prefNameValue + "</option>\n";
    }

    tmpHtml += "</select></form>";

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

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

}


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

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


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

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

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



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

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

ajax-166.gif


【4】Firefox を起動して、動作を確認してみましょう。

http://localhost/ajax/sample009/

ajax-315.gif

＊ページを読み込んだ直後にプログラムが動きます。


【5】「選択リストボックス」をクリックします。

ajax-316.gif


【6】都道府県のリストが表示されるので、好きなものを選択してください。

ajax-317.gif


【7】都道府県が選択できました。

ajax-318.gif


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

ajax-314.gif


【解説】

(1)元になる XML のデータは Web 上のデータベースにあります。

まずデータベースのレコードを GetPref.php で XML 形式に加工して出力しています。
http://ws.bzen.net/pgtop/GetPref.php

それを中継プログラムの pref.php で同一ドメイン内にします。そして Ajax の非同期通信で取り込み、JavaScript のプログラムで選択リストボックスを組み立てる仕組みです。

データベース → GetPref.php(XML出力) → pref.php(中継) → 選択リストボックス組み立て → 画面に表示

この方法のメリットは、データベースのデータが変われば、自動的に選択リストボックスの値にも反映されることです。

＊GetPref.php は pref.php の中で呼び出しています。
＊サーバーに負荷がかかるため、 GetPref.php は学習目的でのみお使いください。


(2)選択リストボックスの用途について

例えば選択リストボックスをチェンジした時に、イベントハンドラを設定すれば、都道府県を切り替えた瞬間に、該当する市町村だけを表示するような応用ができます。

↓このような使い方( Internet Explorer で確認)
全国の特産品検索

またはネットショップの注文画面で、顧客に住所を入力してもらうときに使うことができます。


プログラムの変更点については、次回に詳しく解説します。


]]> http://ajax.pgtop.net/article/80068454.html Ajax 動的なXMLの具体例について 今回は Ajax でよく使われる、動的なXMLを使った実用的でわかりやすい例を説明します。全国の市町村は 1900 以上あるのですが、データを一度に全て表示しようとすると、多すぎて大変です。そこで各都道府県ごとの市町村だけを表示できたら便利です。その場合、静的なXMLだと都道府県別に 47 のファイルを用意しなければなりません。しかし動的なXMLなら、プログラミング言語を使い、データベースから条件に合った市町村のみを取得して表示することができます。そのためファイルは1つで済み... Step14・動的なXMLの具体例 Ajax入門 2008-01-22T15:16:10+09:00 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初心者入門講座 をご覧ください。基本的なことが学べます。


]]> http://ajax.pgtop.net/article/80062247.html Ajax 静的なXMLと動的なXMLの違いについて Ajax のプログラムで非同期通信を行なう時、よく XMLベースのフォーマットが使われますが、それには情報が「静的」なものと「動的」なものがあります。静的 = 変化しない動的 = 変化するまずは以下のリンクをクリックして、比較してみてください。・静的なXMLhttp://ws.bzen.net/pgtop/pref.xml・動的なXMLhttp://ws.bzen.net/pgtop/GetPref.php違いがわかりましたか？表示されているデータの内容はまったく同じですが、... Step13・静的なXMLと動的なXML Ajax入門 2008-01-22T14:21:06+09:00 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 がよく使われています。


]]> http://ajax.pgtop.net/article/79289679.html Ajax プログラムを自作することのメリットについて。 今回は Ajax のプログラムを自作することのメリットについて考えてみたいと思います。その前に少し補足すると、前回までに作成した簡易RSSリーダーは、RSS1.0対応です。RSS1.0ならそのまま動きますが、 RSS2.0、RDF、Atom、XML の場合は取得するデータの形式に合わせて変更が必要です。既成のRSSリーダーなら、ほとんどのXMLフォーマットに対応しているし、さらに高機能です。なので今さらRSSリーダーを自作するまでもありません。もちろん学習用の例題として適して... Step12・プログラムを自作するメリット Ajax入門 2008-01-18T16:41:15+09:00 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サービスを利用したプログラミングで解決できれば、面白いことになるかも。


]]> http://ajax.pgtop.net/article/79119141.html Ajax sample008で使用したプログラムの解説。 今回は sample008 で使用した Ajax のプログラムについて詳しく解説します。追加や変更は少しだけで済みます。最小限の変更で複数のRSSフィードが読み込めるようになっています。■index.html側(1)flash.js を読み込む部分を追加しました。&lt;script type="text/javascript" src="flash.js"&gt;&lt;/script&gt;(2)ニュース速報を表示するための div要素を追加しました。&lt;div id... Step11・sample008の解説 Ajax入門 2008-01-17T21:29:19+09:00 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";


]]> http://ajax.pgtop.net/article/79086638.html Ajax 複数のRSSフィードを取得する方法。 Ajax を使って作った『簡易RSSリーダー』に、複数のRSSフィードを読み込む機能を加えてみましょう。もちろん既成のRSSリーダーには及びませんが、自分で作ったシステムは細かい調整や改良ができるので、アイデア次第では可能性が広がります。今回取り込むRSSフィードは、毎日新聞のサイトで公開しているニュース速報です。ニュース速報(総合)のRSShttp://mainichi.jp/rss/etc/flash.rss＊商業目的での利用は禁止されていますのでご注意ください。このRS... Step10・複数のRSSフィードを取得する Ajax入門 2008-01-17T18:03:15+09:00 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フォーマットを利用したい
など、細かなカスタマイズをするような場合は、分けていたほうが便利です。


]]> http://ajax.pgtop.net/article/79032931.html Ajax IEのキャッシュを無効にする方法。 Internet Explorer で Ajax のプログラムを使って、XML形式のファイルを読み込んだ場合、2回目からはキャッシュしたデータが表示されてしまう問題がありました。Webブラウザでキャッシュしないようにするには、いくつか方法があります。・メタタグを使う(no-cache、expires)ブラウザにより動作が異なることがあるようなので、確実とはいえません。・POSTメソッドにする初心者のうちはGETメソッドのほうが便利なことがあります。Webサービスを利用するとき... Step9・IEのキャッシュを無効にする Ajax入門 2008-01-17T11:58:17+09:00 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 を変化させているだけです。


]]> http://ajax.pgtop.net/article/78888653.html Ajax sample006で使用したプログラムの解説。 今回は sample006 で使用した Ajax のプログラムについて詳しく解説します。これまでに学んだプログラムとほとんど同じなので、変更した部分を中心に解説します。またXML名前空間を扱う部分と、クロスブラウザ対応にするところは新しいので、そこに重点を置いて学んでください。基本的な解説は既に sample003 で行なっています。そちらも参考にしてください。Step14・sample003の解説http://ajax.pgtop.net/category/4479851-... Step8・sample006の解説 Ajax入門 2008-01-16T17:56:38+09:00 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{
  処理
}


]]> http://ajax.pgtop.net/article/78856579.html Ajax XML名前空間について。 前回、簡易RSSリーダーを作成しましたが、読み込んだRSSフィードのタグには「名前空間」が使われています。 Ajax のプログラミングとも関連が深いので、先に名前空間について説明します。名前空間とは、XMLドキュメントの中で、要素名や属性名が衝突することを避けるために用いる修飾子のことです。XML名前空間(Namespaces in XML) または XMLネームスペース以下のようなタグ名になっているものが、名前空間を使っています。rdfやdcを接頭辞といい、接頭辞とタグ名は... Step7・XML名前空間について Ajax入門 2008-01-16T14:17:12+09:00 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>


]]>