obniz:お天気取得
天気予報を取得して、obnizのディスプレイとPC/スマホ等の画面に天気予報を表示するプログラムです。
OpenWeatherMapのAPIを利用します。これには、利用者登録をしてAPI Keyを取得する必要があります。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@1.13.0/obniz.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var tempMax;
var tempMin;
var weatherDesc;
// 取得する地域
var city = "Tokyo,jp";
var httpObj = new XMLHttpRequest();
// openweathermapからJSONデータ取得
httpObj.open("GET", "http://api.openweathermap.org/data/2.5/forecast?q=Tokyo,JP&appid=<<your API Key>>", true);
httpObj.onload = function(){
var data = JSON.parse(this.responseText); // JSON形式データを変換
var cityName = data.city.name; // 都市名を取得
// データ整形
var day = ["今日"];
var tag = "";
var Kelv = 273.16;
tag += "<p>" + cityName + "</p>";
tag += "<table>";
for(var i=0; i<1; i++){ // 明日とか取得する場合にはiを増やす
tempMax = Math.floor((Number(data.list[i].main.temp_max) - Kelv) * 10)/10 + " ℃"; // 最高気温
tempMin = Math.floor((Number(data.list[i].main.temp_min) - Kelv) * 10)/10 + " ℃"; // 最低気温
weatherDesc = data.list[i].weather[0].main;
var icon = "<img src='http://openweathermap.org/img/w/" + data.list[i].weather[0].icon + ".png'>"; // お天気アイコン
tag += "<tr>";
tag += "<td>" + day[i] + "</td>";
tag += "<td>" + icon + "</td>";
tag += "<td>最高</td><td>" + tempMax + "</td>";
tag += "<td>最低</td><td>" + tempMin + "</td>";
tag += "</tr>";
}
tag += "</table>";
var result = document.getElementById("result");
result.innerHTML = tag;
}
httpObj.send(null);
var weatherDate = new Date();
//年・月・日・曜日を取得
var year = weatherDate.getFullYear();
var month = weatherDate.getMonth()+1;
var week = weatherDate.getDay();
var day =weatherDate.getDate();
var yobi= new Array("日","月","火","水","木","金","土");
var obniz = new Obniz("<<your obniz ID>>");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.display.print(month+"月"+day+"日 "+yobi[week]+"曜日");
obniz.display.print("天気 : " + weatherDesc);
obniz.display.print("最高 : " + tempMax);
obniz.display.print("最低 : " + tempMin);
};
</script>
</head>
<body>
<h1>お天気情報取得</h1>
<div id="result">Getting weather...</div>
</body>
</html>
“人生は読めないブログ”さんの、”JavaScript：JSONを使ったお天気情報の取得”を参考にさせていただきました。