M5StickC PlusをWiFiに接続し、Cloud FunctionsのHTTPトリガーのURLを叩いてJSONを取得する 🔥

https://docs.m5stack.com/ja/core/m5stickc_plus より引用

前回作ったCloud Functionsの関数のHTTPトリガーをWiFiに接続したM5StickC Plusから叩いてみます。

blog.kimizuka.org

• WiFi接続
• HTTPリクエスト
• JSONのパース

と、やらないといけないことがいくつかあるので、ひとつずつ順番にクリアしていきます。

M5StickC PlusをWiFiに接続する

まずは、M5StickC PlusをWiFiに接続します。
接続できたら、確認のためにIPアドレスを表示してみましょう。
こちらのライブラリを使えば簡単に実装できます。

docs.m5stack.com

ソースコード

#include <M5StickCPlus.h>
#include <WiFi.h>

const char* ssid = ""; // WiFiのssid
const char* password = ""; // WiFiのパスワード

void setup() {
  M5.begin();
  M5.Lcd.setRotation(1);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setTextSize(2);
  M5.Lcd.print("SSID:");
  M5.Lcd.println(ssid);

  WiFi.begin(ssid, password);

  M5.Lcd.print("Connecting");

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    M5.Lcd.print(".");
  }

  M5.Lcd.println("");
  M5.Lcd.print("IP:");
  M5.Lcd.println(WiFi.localIP());
}

void loop() {}

こちらのコードをM5StickC Plusに書き込めばOKです。

WiFiに接続したM5StickC PlusでHTTPリクエストを投げる

次に、WiFiに接続したM5StickC PlusでHTTPリクエストを投げてみます。
こちらのライブラリを使えば簡単に実装できます。

www.arduino.cc

ソースコード

#include <M5StickCPlus.h>
#include <WiFi.h>
#include <HTTPClient.h>

void setup() {
  M5.begin();
  M5.Lcd.setRotation(1);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setTextSize(2);
  M5.Lcd.print("SSID:");
  M5.Lcd.println(ssid);

  WiFi.begin(ssid, password);

  M5.Lcd.print("Connecting");

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    M5.Lcd.print(".");
  }

  M5.Lcd.println("");
  M5.Lcd.print("IP:");
  M5.Lcd.println(WiFi.localIP());
}

void loop() {
  M5.Lcd.fillScreen(BLACK);

  HTTPClient http;

  http.begin(url);

  int httpCode = http.GET();

  if (httpCode > 0) {
    if (httpCode == HTTP_CODE_OK) {
      String payload = http.getString();
        
      M5.Lcd.setCursor(0, 0);
      M5.Lcd.println(payload);
    } else {
      M5.Lcd.print("ERROR");
    }
  } else {
    M5.Lcd.print("ERROR");
  }

  http.end();

  delay(60 * 1000);
}

こちらのコードをM5StickC Plusに書き込めば、1分に1度、HTTPリクエストを投げた結果をディスプレイに表示してくれるはずです。
前回作成した関数を叩けば、

{"value":"2024/8/21 23:11:42"}

と、最終アクセスの日時が表示されるはずです。

M5StickC PlusでJSONをパースする

最後に、M5StickC PlusでJSONをパースします。
こちらのライブラリを使えば簡単に実装できます。

www.arduino.cc

ソースコード

#include <M5StickCPlus.h>
#include <WiFi.h>
#include <HTTPClient.h>
#include <Arduino_JSON.h>

const char* ssid = ""; // WiFiのssid
const char* password = ""; // WiFiのパスワード
String url = ""; // HTTPリクエストを投げるURL

void setup() {
  M5.begin();
  M5.Lcd.setRotation(1);
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setTextSize(2);
  M5.Lcd.print("SSID:");
  M5.Lcd.println(ssid);

  WiFi.begin(ssid, password);

  M5.Lcd.print("Connecting");

  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    M5.Lcd.print(".");
  }

  M5.Lcd.println("");
  M5.Lcd.print("IP:");
  M5.Lcd.println(WiFi.localIP());
}

void loop() {
  M5.Lcd.fillScreen(BLACK);

  HTTPClient http;

  http.begin(url);

  int httpCode = http.GET();

  if (httpCode > 0) {
    if (httpCode == HTTP_CODE_OK) {
      String payload = http.getString();
      JSONVar json = JSON.parse(payload);
      
      if (json.hasOwnProperty("value")) {
        String value = json["value"];
        
        M5.Lcd.setCursor(0, 0);
        M5.Lcd.println(value);
      }
    } else {
      M5.Lcd.print("ERROR");
    }
  } else {
    M5.Lcd.print("ERROR");
  }

  http.end();

  delay(60 * 1000);
}

こちらのコードをM5StickC Plusに書き込めば、1分に1度、HTTPリクエストを投げて取得したJSONの"value"をディスプレイに表示してくれるはずです。

JSONVar json = JSON.parse(payload);

if (json.hasOwnProperty("value")) { // json["value"]が存在するか確認
  String value = json["value"];
}

JSONをパースする部分はJSONの型に応じて適宜変更する必要があります。

今回は以上です。