M5StickCでAPIの情報を取得して表示してみよう（HTTPS通信）

さて、前回まではM5StickCで加速度センサーを使ったり、GPSモジュールを使ってみたりしましたよね。今回はWifiでアクセスポイントに接続して、HTTPS通信でAPIの情報を取得してみようと思います。

ちなみに環境設定などはこのへんの過去の記事を参考にしてください。http://hotwire.club/news/463

まずはライブラリのインストール

今回使うライブラリのうち、新たにインストールが必要なのは、「ArduinoJson」です。例によってArduino IDEのツール – ライブラリを管理から「ArduinoJson」で検索しましょう。ちなみに下の画像の1番目ではなく3番目のほうです。今回のサンプルでは v6.13.0を使用しました。

今回やること

M5StickCをWifiアクセスポイントに接続する
HTTPSリクエストをする
レスポンスをJsonに格納する
LCD画面に表示する

なお、WEB APIはbitflyerのビットコイン現在価格を教えてくれるやつに決定しました。特にビットコインが大好きなわけではないですが、なんとなくです。

コードを書こう

#include <M5StickC.h>　
#include <WiFi.h>
#include <WiFiMulti.h>
#include <HTTPClient.h>
#include "ArduinoJson.h"

WiFiMulti WiFiMulti;

const char* api = "https://api.bitflyer.jp/v1/ticker?product_code=BTC_JPY"; //WEB APIのアドレス

void setup() {

  M5.begin();
  M5.Lcd.setRotation(3);
  M5.Lcd.setCursor(0, 0, 2);

  WiFiMulti.addAP("SSID","Password"); // ①
  M5.Lcd.print("Connecting");

  while(WiFiMulti.run() != WL_CONNECTED) { // ②
    M5.Lcd.print(".");
    delay(1000);
  }
  M5.Lcd.println("");
  M5.Lcd.println("Connected to");
  M5.Lcd.println(WiFi.localIP()); // ③
  delay(500);
}

void loop() {

  if ((WiFi.status() == WL_CONNECTED)) { // ④
    http.begin(api);
    int httpCode = http.GET(); 
    
    if (httpCode > 0) { // ⑤
      
        String payload = http.getString(); // ⑥
        DynamicJsonDocument doc(1024); 
        deserializeJson(doc,payload); // ⑦
        JsonObject obj = doc.as<JsonObject>(); // ⑧
        String price = obj[String("best_bid")];　// ⑨
        M5.Lcd.print("Bitcoin price = "); 
        M5.Lcd.println(price); // ⑩
    } else {
      M5.Lcd.println("error");
      return;
    }
    http.end(); // ⑪
    delay(5000);
  }
}

解説しよう

① WifiのSSID・パスワードの設定

ここは、アクセスポイントのSSIDとパスワードを記入します。今回はiPhoneの「インターネットの共有」を使用しましたが、問題なく接続できました。

② Wifiコネクションの開始

Wifiアクセスポイントに接続します。接続中はなんとなく「…」みたいなのを表示してみました。

③ WifiのローカルIPアドレスを表示

別に表示する必要はないのですが、気分で表示してみました。

④ Wifiの状態を確認

Wifiコネクションが張られているかぎり、この処理が実行されます。

⑤ HTTPレスポンスコードを確認

エラーコードが返ってきたら、この処理は実行されません。

⑥ HTTPレスポンスを格納

ペイロードに一旦レスポンスをすべて格納します。

⑦ レスポンスのデシリアライズ

デシリアライズとは、直列化されたデータを構造化されたデータに直す処理です。ここではDynamicJsonDocumentの形に変換しています。

⑧ JsonObjectへの変換

構造化されたデータを、JsonObjectに代入します。これでレスポンスがJsonとして扱えるようになりました。

⑨ Jsonから文字列を抽出

Jsonから「best_bid」という変数の値を文字列に代入しています。ちなみに今回のレスポンスはこんな形をしています。

{"product_code":"BTC_JPY","timestamp":"2019-12-18T14:20:44.933","tick_id":927579,"best_bid":729120.0,"best_ask":729451.0,"best_bid_size":1.7039669,"best_ask_size":0.1,"total_bid_depth":1686.55444186,"total_ask_depth":1194.07639445,"ltp":729120.0,"volume":149020.51025288,"volume_by_product":5295.42120722}