M5Stick-Cで天気表示器を作る

天気情報APIの「OpenWeatherMap」を使い、M5Stick-Cに現在の天気と気温を表示する方法を紹介します。

参考にした記事

• https://qiita.com/issi030/items/766ca80887d6fa71af41#_reference-e57cec4970f801beb02b
• ESP32でお天気ステーションを作ろう

コード（ほぼコピペ）

#include "FS.h"
#include "SPIFFS.h"
#include <stdio.h>
#include "M5StickC.h"
#include "M5Display.h"

#include <HTTPClient.h>
#include <ArduinoJson.h> 
char str[100];
const char* ssid = "YOURSSID";
const char* password = "PASSWORD";

const String endpoint = "http://api.openweathermap.org/data/2.5/weather?q=tokyo,jp&APPID=";
const String key = "YOURAPIKEY";


String getWeather(){
  HTTPClient http;
  http.begin(endpoint + key); //URLを指定
  int httpCode = http.GET();  //GETリクエストを送信
  String weather="Error";
  if (httpCode > 0) { //返答がある場合

      String payload = http.getString();  //返答（JSON形式）を取得
      Serial.println(httpCode);
      Serial.println(payload);

      //jsonオブジェクトの作成
      DynamicJsonBuffer jsonBuffer;
      String json = payload;
      JsonObject& weatherdata = jsonBuffer.parseObject(json);

      //パースが成功したかどうかを確認
      if(!weatherdata.success()){
        Serial.println("parseObject() failed");
      }

      //各データを抜き出し
       weather = weatherdata["weather"][0]["main"].as<char*>();
      const double temp = weatherdata["main"]["temp"].as<double>();
      }
  return weather;
}
double getTemperature(){
  HTTPClient http;
  http.begin(endpoint + key); //URLを指定
  int httpCode = http.GET();  //GETリクエストを送信
  if (httpCode > 0) { //返答がある場合

      String payload = http.getString();  //返答（JSON形式）を取得
      Serial.println(httpCode);
      Serial.println(payload);

      //jsonオブジェクトの作成
      DynamicJsonBuffer jsonBuffer;
      String json = payload;
      JsonObject& weatherdata = jsonBuffer.parseObject(json);

      //パースが成功したかどうかを確認
      if(!weatherdata.success()){
        Serial.println("parseObject() failed");
      }
      const double temp = weatherdata["main"]["temp"].as<double>();
      return temp;
  }else{
    return -88.88;
  }
}

void showWeather(){
  M5.Lcd.fillScreen(BLACK);
  String weather = getWeather();
  String temp = String(getTemperature()-273.15) + " C";
  Serial.println(weather);
  M5.Lcd.setCursor(0,10);
  M5.Lcd.print(weather);
  M5.Lcd.setCursor(0,40);
  M5.Lcd.print(temp);
}
void setup(){
    M5.begin();
    M5.Axp.ScreenBreath(12);          // 7-12で明るさ設定
    M5.Lcd.setRotation(3);            // 0-3で画面の向き  
    M5.Lcd.setTextSize(3);
    if(!SPIFFS.begin(true)){
        Serial.println("SPIFFS Mount Failed");
        return;
    }
    WiFi.begin(ssid, password);
  
    while (WiFi.status() != WL_CONNECTED) {
      delay(1000);
      Serial.println("Connecting to WiFi..");
    }
    Serial.println("Connected to the WiFi network");
    delay(1000);
}

void loop(){
  showWeather();
  delay(1000*600);//10分待機
}

大文字で書いてある部分（WiFiの設定と天気APIのキー）は自分のデータに変更して書き込んでください。
天気APIの登録・使い方は以下で解説します。

解説：天気の取得(api)

今回はOpenWeatherMapと呼ばれるサービスを使って天気の情報を取得します。

天気予報情報をjson形式で取得する

ESP32で現在の天気を取得してみたとほぼ同様の方法で天気予報を取得します。
このページに載っている方法でOpenWeatherMapのアカウントを作成して、API KEYを作成しておいてください。

以下に２種類のURLを例に示します。

これが現在の天気を取得するURL

http://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp&APPID=YOURKEY

これが天気予報を取得するURL

http://api.openweathermap.org/data/2.5/forecast?q=Tokyo,jp&APPID=YOURKEY

今回のコードでは現在の天気を取得しています。予報に変えたい場合はforecast版URLにしましょう。

※この天気予報APIの情報は公式ページをご覧下さい。

実装した関数

• getWeather
  APIから返ってきたjsonデータを加工して、天気のデータを取得します。晴れならばClear、曇りならClouds、雨ならRain等の文字列が取得されます。その他珍しい天気の状態が見れるかもしれません。
• getTemperature
  APIから返ってきたjsonデータを加工して、気温のデータを取得します。返り値はケルビン単位なので、℃に直すには-273.15引きます。

今回のコードではこれらのデータを直接M5.Lcd.print()に流して表示しています。代わりに温度で色を変えたり、天気により動作を変えたりすることも容易ですね。
上記の２関数をうまく使って様々な天気アプリケーションを作ってみましょう！