はじめに
obnizOSを搭載したM5StickCのディスプレイに現在の天気を表示したいと思います。
HTMLとJavaScriptしか使わない簡単なコードなので、プログラミング初心者にも優しくなっています。
天気を取得するにはOpenWeatherMapという無料のAPIを使用します。
完成品
用意するもの
作成手順
1. OpenWeatherMapにサインアップする
OpenWeatherMapにアクセスし、サインアップをしてください。
その後、サインアップ完了のメールが届きます。メールに記載してあるAPI Keyを控えておいてください。
API Keyは、Webサイトにログイン後、API Keysというページからも確認できます。
2. プログラムを書く
最終プログラムは以下になります。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.2.0/obniz.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/m5stickcjs/m5stickc.js"></script>
</head>
<body>
<canvas id="canvas" width="80" height="160"></canvas>
<script>
const m5 = new M5StickC('OBNIZ_ID_HERE');
m5.onconnect = async function () {
console.log("connected");
await m5.m5display.onWait();
let ctx = document.getElementById("canvas").getContext("2d");
let baseURL = "http://api.openweathermap.org";
let area = "/data/2.5/weather?q=Tokyo,jp";
let key = "&APPID=APPID_HERE";
let url = baseURL + area + key;
let weatherListEn = ["Clouds","Rain","Clear","Snow","Drizzle","Thunderstorm"];
let weatherListJa = ["くもり","あめ","はれ","ゆき","きりさめ","かみなり"];
$.ajax({
url: url,
type: 'GET',
dataType: "json",
})
.done(function(response) {
weather = response.weather[0].main;
for(let i = 0; i < weatherListEn.length; i++){
if(weather === weatherListEn[i]){
weather = weatherListJa[i];
break;
}
}
console.log(weather);
ctx.clearRect(0, 0, m5.m5display.width, m5.m5display.height);
ctx.fillStyle = "#fff";
ctx.font = "30px sans-serif";
ctx.translate(m5.m5display.width - 30, m5.m5display.height - 10) ;
ctx.rotate(-90 * Math.PI / 180);
ctx.fillText(weather, 0, 0);
m5.m5display.draw(ctx);
});
};
</script>
</body>
</html>
コードの解説
obniz.js, m5stickc.jsをそれぞれ読み込みます。
obniz.jsを読み込んだ後に、m5stickc.jsを読み込むようにしてください。
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="https://unpkg.com/obniz@3.2.0/obniz.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/m5stickcjs/m5stickc.js"></script>
次に、M5StickCのインスタンスを作成します。OBNIZ_ID_HEREにはあなたのobniz_idを入れてください。
const m5 = new M5StickC('OBNIZ_ID_HERE');
このコードではディスプレイの初期化処理をしています。
await m5.m5display.onWait();
次に、URLを指定します。baseURLはこのままで大丈夫です。
areaは「Tokyo,jp」の部分に調べたい都市の名前を入れてください。今回は東京の天気を取得します。
keyには「APPID_HERE」の部分に先ほど控えたOpenWeatherMapのAPI Keyを入力してください。
let baseURL = "http://api.openweathermap.org";
let area = "/data/2.5/weather?q=Tokyo,jp";
let key = "&APPID=APPID_HERE";
以下のコードでは、APIが返す天気の一覧とそれに対応する日本語を配列に格納しています。
本当はもう少し天気の種類は多いのですが、頻度が少ないので割愛しています。
let weatherListEn = ["Clouds","Rain","Clear","Snow","Drizzle","Thunderstorm"];
let weatherListJa = ["くもり","あめ","はれ","ゆき","きりさめ","かみなり"];
その後、AjaxでHTTP通信を行なっています。戻り値のresponse.weather[0].mainに天気が格納されているので変数weatherに代入します。
戻り値は英語なので日本語への変換を以下のコードで行います。
for(let i = 0; i < weatherListEn.length; i++){
if(weather === weatherListEn[i]){
weather = weatherListJa[i];
break;
}
}
今回はcanvasを利用して文字を表示します。canvasを使用することで文字を横向きに表示することが可能です。
ctx.translate()とctx.rotate()で文字を９０度回転させています。
m5.m5display.draw（）の引数にはcanvasオブジェクトのみ指定できます。
ctx.clearRect(0, 0, m5.m5display.width, m5.m5display.height);
ctx.fillStyle = "#fff";
ctx.font = "30px sans-serif";
ctx.translate(m5.m5display.width - 30, m5.m5display.height - 10) ;
ctx.rotate(-90 * Math.PI / 180);
ctx.fillText(weather, 0, 0);
m5.m5display.draw(ctx);
3. M５StickCを電源に繋ぐ
電源が入ってもディスプレイには何も表示されません。起動したのかわかりづらいですが、電源ボタンを何度も押さないようにしましょう。
4. 実行
上手くいくと、このように現在の天気が表示されます。
最後に
このコードにobnizのdeveloper's consoleからサーバレスイベントを使用すれば、毎日朝8時に天気を自動で取得して表示したり、30分毎に表示したりすることが可能です。
わざわざ、アプリやWebで天気を調べる必要もなくなるので是非作ってみてはいかがでしょうか。
最後まで読んでいただきありがとうございました。