Help us understand the problem. What is going on with this article?

M5StickCのディスプレイに現在の天気を表示する。

はじめに

obnizOSを搭載したM5StickCのディスプレイに現在の天気を表示したいと思います。

HTMLとJavaScriptしか使わない簡単なコードなので、プログラミング初心者にも優しくなっています。

天気を取得するにはOpenWeatherMapという無料のAPIを使用します。

完成品

StickC_weather.jpg

用意するもの

作成手順

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()で文字を90度回転させています。
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. M5StickCを電源に繋ぐ

電源が入ってもディスプレイには何も表示されません。起動したのかわかりづらいですが、電源ボタンを何度も押さないようにしましょう。

4. 実行

上手くいくと、このように現在の天気が表示されます。

StickC_weather.jpg

最後に

このコードにobnizのdeveloper's consoleからサーバレスイベントを使用すれば、毎日朝8時に天気を自動で取得して表示したり、30分毎に表示したりすることが可能です。

わざわざ、アプリやWebで天気を調べる必要もなくなるので是非作ってみてはいかがでしょうか。

最後まで読んでいただきありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした