全国に都道府県は 47 しかありませんが、市町村は 1900 を超えます。レコードを全件表示していては大変です。
そこで「URLにパラメータを渡すと、該当する市町村のリストをXMLで返す」というWebサービスを私が作りました。
http://ws.bzen.net/pgtop/GetCity.php?prefCd=1
prefCd=1 の数字を 1～47 の範囲で変更すると、XMLのデータが変わります。
このWebサービスを Ajax のプログラムから利用することで、都道府県を切り替えるごとに市町村が変わるフォーム部品が作れます。
＊上記のWebサービスは、サーバーに付加がかかるため、この講座の学習目的でのみ利用できます。その他の目的での利用は禁止します。
今回はプログラムが長いので、プログラミング、動作確認、プログラムの解説、というステップに分けて解説します。まずはプログラミングから行ないましょう。
【1】sample010 フォルダをコピーして sample011 フォルダを作成します。
【2】今回は最終的に以下のようなファイルの構成になります。
・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 を少し改良しただけです。
ファイル数が増え、プログラムも長くなったように感じるかもしれませんが、中身は今までとほとんど同じで、新しいことは少しだけです。
これまでのステップを順番に学んできた方は、詳しい説明がなくても、大体意味がつかめる力が身に付いていると思います。
プログラムの動作確認は次回に行ないます。
