お天気情報をよそからもってくる

天気情報をどう使えばよいかとの質問がありましたので，走り書き

各種サイトで天気情報が公開されています．

今回は非商用ですので，無料で使えるサービスを利用して天気を表示してみましょう．

なお、こうしたサービスの多くは個人での利用を前提としており、アプリ化して配布するなど、頻繁なアクセスをすり前提ではありませんので注意してください。
また、商用利用可能であっても、頻繁にアクセスしないようキャッシュを利用することがマナーとされています。

まず，こういうサービスのことをAPI(Application Programming Interface)と呼びます．ですので，Googleなどで”天気　API”などと検索するといくつか無料サービスが出てきます．このほかにも地図や交通情報などのAPIもあります．これらは”無料　API”で検索してみてください．

このほかにも”オープンデータ”などを利用してみても良いでしょう．

サンプルにはopenweathemapのAPIを利用しました．

次のHTMLをコピペしてブラウザで開いてみてください．（新JavaScript例文辞典さんの例文を利用しています）

<!DOCTYPE html>
<html>
<head>
<title>おてんき</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで　スマホの挙動を制限している -->
</head>
<body>
<h1>てんき</h1>

<script type="text/javascript">


httpObj = new XMLHttpRequest();
httpObj.open("get", "http://api.openweathermap.org/data/2.5/weather?q=Nagoya,jp", true);
httpObj.onload = function(){
	var myData = JSON.parse(this.responseText);
	var txt = "";
	for (var i=0; i<myData.weather.length; i++){
		txt = txt + myData.weather[i].description + "  " + myData.weather[i].main+"<br>" + "<img src=http://openweathermap.org/img/w/" + myData.weather[i].icon + ".png>";
	}
	document.getElementById("result").innerHTML = txt;
	

}
httpObj.send(null);


</script>

<div id="result"></div>
<!-- このDIVのIDを探してここに21行目で作成したHTMLをいれちゃう -->

</body>
</html>

解説はいずれ

名古屋の天気情報が沢山出るのですが，そのうち，天気の記号とアイコンを引き出しています．

実際のデータは

http://api.openweathermap.org/data/2.5/weather?q=Nagoya,jp

です．この結果（JSON）から該当する部分を抜き出して，HTMLに入れています．