前回の記事では、新しく出来た Azure のサービスである、Azure Maps Weather Services を使用して、天気予報のデータの JSON を呼び出しました。今回は API で出力した JSON を元に、WebApp で天気予報を表示するアプリを作成してみます。
サンプルコード
シンプルに Javascript ベースで WebApp を作成します。作成するファイルは index.html、weather.js、style.css の3つです。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Azure Maps API から 天気予報JSONデータを取得する</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="weather.js"></script>
</head>
<body>
<h1>Azure Maps API から 天気予報JSONデータを取得する</h1>
<div id="result">Getting weather...</div>
</body>
</html>
weather.js
var result = null;
var data = null;
var httpObj = new XMLHttpRequest();
httpObj.open("GET", "https://atlas.microsoft.com/weather/forecast/daily/json?subscription-key={API Key}&api-version=1.0&query=35.628471,139.73876&duration=5&language=ja", true);
httpObj.onload = function(){
data = JSON.parse(this.responseText);
console.log(data);
console.log("XHR送信成功!!");
showWeather(data);
}
httpObj.send(null);
function showWeather(data){
var tag = "";
tag += "<table>";
tag += "<tr><th>日付</th><th>天気</th></tr>";
for(var i in data.forecasts){
tag += "<tr>";
tag += "<td>" + data.forecasts[i].date + "</td>";
tag += "<td>" + data.forecasts[i].day.shortPhrase + "</td>";
tag += "</tr>";
}
tag += "</table>";
result.innerHTML = tag;
}
window.onload = function(){
result = document.getElementById("result");
}
style.css
body{
margin: 50px;
padding: 0;
background: #fff;
font-family: '游ゴシック', 'メイリオ', Osaka;
}
h1{
border-bottom: solid 1px #000;
}
table{
border-collapse: collapse;
}
table, th, td{
border: solid 1px #000;
}
th, td{
padding: 0.5em;
}
# result{
font-size:24px;
}
.description{
font-size: 16px;
}
.center{
text-align: center;
}
.red{
color: red;
}
.blue{
color: blue;
}
動かしてみる
実際に動かしてみると、以下のようなページが表示されます。
API の扱い方
今回は Weather Services のオプションを使用した URL を 呼び出しました。
サンプルでは日付と天気予報概要のみを呼び出しましたが、下記 JSON から必要なデータを抽出することが可能です。
{
"summary": {
"startDate": "2020-01-07T04:00:00+00:00",
"endDate": "2020-01-08T04:00:00+00:00",
"severity": 3,
"phrase": "火曜日の午後から水曜日の朝にかけて雨模様の天気になる見込みです",
"category": "rain"
},
"forecasts": [
{
"date": "2020-01-06T22:00:00+00:00",
"temperature": {
"minimum": {
"value": 5.0,
"unit": "C",
"unitType": 17
},
~中略~
],
"day": {
"iconCode": 12,
"iconPhrase": "にわか雨",
"hasPrecipitation": true,
"precipitationType": "Rain",
"precipitationIntensity": "Light",
"shortPhrase": "雨や霧雨",
"longPhrase": "雨や霧雨",
"precipitationProbability": 62,
"thunderstormProbability": 0,
"rainProbability": 62,
"snowProbability": 0,
"iceProbability": 0,
"wind": {
"direction": {
"degrees": 7.0,
"localizedDescription": "北"
},
"speed": {
"value": 9.7,
"unit": "km/h",
"unitType": 7
}
},
~ 省略 ~
}
Weather - Get Daily Forecast Preview
https://docs.microsoft.com/en-us/rest/api/maps/weather/getdailyforecastpreview
ここでの point は Dairy Forecast で 5日間先までの天気予報を表示させるオプションを使用することです。
ドキュメントにはこのように記載されています。
Specifies for how many days the daily forecast responses are returned. Available values are
1 - Return forecast data for the next day. Returned by default.
5 - Return forecast data for the next 5 days.
10 - Return forecast data for the next 10 days.
25 - Return forecast data for the next 25 days. Only available in S1 SKU.
45 - Return forecast data for the next 45 days. Only available in S1 SKU.
Azure Maps の API では 10 日間までは S0 プランで呼び出し可能です。25日、45日先の天気予報を呼び出すためには S1 プランにする必要があるみたいですね。