天気を示すアイコンはリクエストパラメーターにdayを指定した場合に返されるXMLデータ内に含まれています。dayパラメーターを指定しない場合には天気を示すアイコンの情報は含まれません。
天気を示すアイコンはimageタグ内に含まれるurlタグの最初のノードになります。このノードの値が天気アイコンがあるURLを示しています。このURLを画像(imgタグ）のsrcプロパティに入れればお天気アイコンが表示されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>お天気Webサービスを利用する</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function checkWeather()
{
city = $("cityNo").value;
sURL = "curl.rb?city="+city+"&cache="+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
XML = httpObj.responseXML;
$("result").innerHTML = XML.getElementsByTagName("telop")[0].firstChild.nodeValue;
var imgTag = XML.getElementsByTagName("image")[0];
$("mark").src = imgTag.getElementsByTagName("url")[0].firstChild.nodeValue;
}
// --></script>
</head>
<body>
<h1>お天気サービス</h1>
<form>
<select id="cityNo">
<option value="72">長野</option>
<option value="73">松本</option>
<option value="74">飯田</option>
<option value="63">東京</option>
<option value="38">名古屋</option>
<option value="81">大阪</option>
</select>
<input type="button" value="お天気を表示" onClick="checkWeather()"><br>
</form>
<p>
今日の天気：<span id="result"></span><br>
<img src="none.gif" id="mark">
</p>
</body>
</html>
[
目次へ]
(2006.3.4)