この章ではLivedoorがサービスを行っている「お天気Webサービス」を利用してみます。ただし、2006年3月4日現在、Livedoor自体がどうなるのか全く不明なので、このサービスが継続されるかどうかも分かりません。
お天気WebサービスはRESTを利用します。リクエストパラメータおよび返されるXMLの形式は以下のURLで参照することができます。
http://weather.livedoor.com/weather_hacks/webservice.html
それでは、お天気Webサービスを使ってみましょう。お天気Webサービスは各地域、都市を指定することができます。取得したい地域には番号が割り振られており上記のURLに番号を知る方法が書かれています。この番号を「city=番号」として送信します。また、いつの天気を知りたいかも指定できます。これは「day=〜」で指定できます。今日であればtoday、明日であればtomorrow、明後日であればdayaftertomorrowとなります。
お天気Webサービスは非常にシンプルなXMLデータを返します。まず、以下のサンプルでどんなXMLが返されるか確認しましょう。（サンプルを
実行する）
●curl.rb
#!/usr/local/bin/ruby
require "cgi-lib"
input = CGI.new
n = input["city"]
fh = open("| curl 'http://weather.livedoor.com/forecast/webservice/rest/v1?city="+n+"&day=today'")
print "Content-type: text/xml\n\n"
while !fh.eof
print fh.gets
end
fh.close
●サンプルHTML
<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)
{
$("result").innerText = httpObj.responseText;
$("result").textContent = httpObj.responseText;
}
// --></script>
</head>
<body>
<h1>お天気サービス</h1>
<form>
地域番号:<input type="text" value="73" id="cityNo" size="10"><br>
<input type="button" value="お天気を表示" onClick="checkWeather()"><br>
</form>
<div id="result"></div>
</body>
</html>
晴れとか曇りなどの天気を示す文字はtelopタグの最初のノードになっています。getElemntsByTagName()でtelopタグを取得し最初のノードを読み出して表示すれば、指定した地域の今日の天気が表示されます。以下のサンプルでは松本（73番）の今日の天気を表示するものです。（実際のサンプルを
実行する）
<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;
}
// --></script>
</head>
<body>
<h1>お天気サービス</h1>
<form>
地域番号:<input type="text" value="73" id="cityNo" size="10"><br>
<input type="button" value="お天気を表示" onClick="checkWeather()"><br>
</form>
<p>
今日の天気：<span id="result"></span>
</p>
</body>
</html>
dayのパラメータを変更すれば、今日、明日、明後日の天気を表示することができます。（実際のサンプルを
実行する）
<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()
{
getWeather("today","result1");
getWeather("tomorrow","result2");
getWeather("dayaftertomorrow","result3");
}
function getWeather(aDay, pData)
{
city = $("cityNo").value;
sURL = "curl.rb?city="+city+"&day="+aDay+"&cache="+(new Date()).getTime();
new Ajax.Request(sURL, { method: "get", onComplete:
function(httpObj)
{
XML = httpObj.responseXML;
$(pData).innerHTML = XML.getElementsByTagName("telop")[0].firstChild.nodeValue;
}
});
}
// --></script>
</head>
<body>
<h1>お天気サービス（今日〜明後日の天気を表示）</h1>
<form>
地域番号:<input type="text" value="73" id="cityNo" size="10"><br>
<input type="button" value="お天気を表示" onClick="checkWeather()"><br>
</form>
<p>
今日の天気：<span id="result1"></span><br>
明日の天気：<span id="result2"></span><br>
明後日の天気：<span id="result3"></span><br>
</p>
</body>
</html>
次項では天気だけでなく、天気概要を表示させてみます。
[
天気概況を表示する]
[
目次へ]
(2006.3.4)