サンプルコードも掲載していますので、コピペで実現できますよ～

Slackにメッセージを送信するには？

SlackにESP32からメッセージを送信するには、SlackのIncoming Webhook APIを作成しておく必要があります。

Webhook APIの作成手順については次の記事の中で紹介していますので、あらかじめ作成しておきましょう。

【Slack】Curlコマンドでメッセージを送信するには？API有効化からPOSTでメッセージを送信するまでの手順

curlコマンドを使用し、Slackへメッセージを送信する方法を紹介します。

takabus.com

2022.01.23

APIを作成すると、専用のURLが作成されます。作成されたURLに対し、メッセージ本文を含めたJSONをPOSTすると、任意のSlackチャンネルにメッセージを送信することができます。

サンプルコード

APIを作成したら、さっそくソースコードを作成していきましょう。

ESP32からJSONを送信するには、ArduinoJsonとHttpClientを使用していきます。

もちろんHttpClientだけで送信することもできますが、ここでは将来的な拡張も容易に行えるようにJSONをオブジェクト的で扱えるArduinoJsonも組み合わせてみたいと思います。

main.cppの先頭で使用するライブラリのヘッダファイルをインクルードします。

#include <ArduinoJson.h>
#include <HTTPClient.h>

メッセージを送信する部分はこのようになります。

#include <ArduinoJson.h>
#include <HTTPClient.h>
 
///
/// Slackにメッセージを送信する
///

void SendSlackMessage(){
    // JSONを作成する
    StaticJsonDocument<JSON_OBJECT_SIZE(1)> json_array;
    char json_string[255];
    // 送信したいメッセージを指定する
    json_array["text"] = "こんにちは";
    // JSONフォーマットの文字列に変換する
    serializeJson(json_array, json_string, sizeof(json_string));
    // POSTするURLを指定する
    httpClient.begin("ここにWebhook URLを指定する");
    // postするのはjsonなので、Content-Typeをapplication/jsonにする
    httpClient.addHeader("Content-Type", "application/json");
    // POSTしてステータスコードを取得する
    int status_code = httpClient.POST((uint8_t *)json_string, strlen(json_string));
    if (status_code == 200)
    {
    Serial.printf("[POST]Send to server (URL:%s)", postUrl);
    }
    else
    {
    Serial.printf("[POST]failed to send to server (URL:%s)", postUrl);
    }
    // HTTPClinetを終了する
    httpClient.end();
}

SendSlackMessageという名前の関数にしてみました。あとはこの関数を呼び出せば、Slackにメッセージを送信することができます。

まとめ

ESP32からSlackにメッセージを送信するサンプルを紹介しました。

なお、ESP32から単に通知を送りたいケースでは、LINE Notifyのほうが簡単です。あわせて確認しておくことをおすすめします。

ESP32からLINEを送るには？サンプルコードを紹介（LINE Notify）

ESP32やM5StickからLINEメッセージを送信する方法を紹介します。

takabus.com

2022.09.12

あらかじめLINE Notifyへの登録を済ませ、トークンを取得しておいてください。

LINE Notify

notify-bot.line.me

サンプルコード

まずはサンプルをご覧ください。LINE NotifyのAPIにメッセージをPOSTしているだけです。

#include <HTTPClient.h>
HTTPClient httpClient;
String LINE_NOTIFY_TOKEN = "トークンをここに入力";

void sendLine(String body)
{ 
  // HTTPClinetでPOSTする
  String postUrl = "https://notify-api.line.me/api/notify";
  httpClient.begin(postUrl);
  httpClient.addHeader("Content-Type", "application/x-www-form-urlencoded");
  httpClient.addHeader("Authorization", "Bearer " + LINE_NOTIFY_TOKEN);
  // POSTしてステータスコードを取得する
  int status_code = httpClient.POST("message=" + body);
  Serial.println(httpClient.getString());
  if (status_code == 200)
  {
    Serial.printf("[SUCCESS]LINE Notify (URL:%s)", postUrl.c_str());
  }
  else
  {
    Serial.printf("[SUCCESS]LINE Notify (URL:%s) Code:%d", postUrl.c_str(), status_code);
  }
  // HTTPClinetを終了する
  httpClient.end();
}

これだけでLINEを送ることができます。

ESP32でPOSTする方法については、こちらの記事にまとめてあります。LINE NotifyにPOSTする際はJSONではなくapplication/x-www-form-urlencodedでエンコードする必要がありますが、以前の記事で紹介した手順をほぼ踏襲していますので、参考にしてみてください。

【ESP32】JSONをPOSTするには？HTTPClientがおすすめ！

ESP32でサーバーにJSONをPOSTする方法を紹介します。

takabus.com

2021.12.28

メッセージを送信する

sendLineを実行すると、LINE Notifyでメッセージが送信されます。

sendLine("こんにちは");

引数に送信したいメッセージを指定してください。LINEが届きます。

トランジスタを使用したスイッチング回路を作成し、赤外線LEDに十分なパルス電流を流せるように設計してみたのですが、なぜかテストを重ねていくうちにLEDの出力が落ちていく現象が見られました。赤外線LEDを交換してみると復活しますが、またしばらくすると出力が低下し使い物にならなくなります。パルス(<10μs)では1Aまで流せるはずのLEDで、設計上は200mAのパルスを流すようにしてあるので、電流値は問題ないはずなのですが、どこかのタイミングで過電流が発生してしまい、故障しているようです。

原因はGPIOピンの初期モードを考慮していなかったため起こった、ESP32が起動する際の意図しない出力でした。

デフォルトのGPIOモードに注意しよう！

ESP32のGPIOピンのモードはプログラムから変更することができます。

pinMode(PIN,MODE)

入力モードとする場合はINPUT、出力とする場合はOUTPUTとします。

しかし、ここで重要なのが、pinMode関数が実行されるまでは、GPIOごとに決まっているデフォルトのモードで動作するということです。

ESP32のGPIOにはそれぞれ既定のモードが決められています。プログラムから任意のモードに切り替えることはできますが、ESP32が起動し、モードを切り替えるプログラムが実行されるまでは、各GPIOは既定のモードで動作します。

たとえ、setup関数の先頭にpinModeをプログラムしていたとしても、ESP32が起動してから実行されるまでにはそれなりの時間がかかります。このため、デフォルトで電圧が印加されるモード（INPUT_PULLUPなど）になっているGPIOに、パルス波を流す前提で設計された回路が接続されていたりすると、ESP32が起動する過程で連続的にONになってしまい、部品が故障してしまいます。

今回赤外線LEDが故障してしまった原因も同じでした。赤外線LEDをリモコンに使用する場合は、10μs以下のパルス波で使用することを前提に設計します。通電時間を小さくする代わりに電流値を大きくすることで実用的な出力を得るようにするのですが、デフォルトでINPUT_PULLUPが設定されているGPIO16ピンに赤外線LEDの回路を接続していたため、ESP32が起動する間に連続してONになってしまっていたようです。

連続上限50mAのLEDに対し、パルス許容最大値の200mAが流れる回路を組んでいたので、赤外線LEDが故障してしまったのでしょう。

起動時に出力モードとなっているピンは要注意！

ESP32のGPIOピンの大半は、プログラムから自由にモードを変更できるようになっています。

一方、ピンモードを変更するプログラムが走るまでは、各GPIOは初期値で動作してしまいます。これを忘れていると、EPS32が起動する過程で意図しない電圧が出力され、トラブルの原因となります。GPIOを使用する際はESP32のデータシートなどを確認し、必ず初期値を確認しておくことをおすすめします。

こちらのサイトの方がすべてのGPIOピンの初期値をまとめてくれています。

ESP32のGPIO研究

概要Arduino IDEでのGPIOまわりを調査しなおしてみました。pinMode()まわりやアナログ入力のときにはどんなGPIOかを意識して利用する必要があります。GPIO一覧GPIO種類アナログ入力タッチ入力RTCPULLpinMod...

lang-ship.com

当記事ではESP32でOLEDディスプレイ（SSD1306）を使用する方法を紹介していきます。基本からよくあるサンプルコードまで掲載していますので、ぜひご覧ください。

【重要】ちゃんとしたライブラリを選ぼう！

定番のOLEDディスプレイである「SSD1306」ですが、ESP32で正常に動作するライブラリを見つけるのに意外と苦労しましたので、詳しく解説しておきます。

おすすめのライブラリはthingpulse/ESP8266 and ESP32 OLED driver for SSD1306 displaysです。

PlatformIO Registry

The world's first package and project dependency management solution for embedded development

registry.platformio.org

GitHub - ThingPulse/esp8266-oled-ssd1306: Driver for the SSD1306 and SH1106 based 128x64, 128x32, 64x48 pixel OLED display running on ESP8266/ESP32

Driver for the SSD1306 and SH1106 based 128x64, 128x32, 64x48 pixel OLED display running on ESP8266/ESP32 - ThingPulse/e...

github.com

thingpulse/ESP8266 and ESP32 OLED driver for SSD1306 displaysは、Platform IOが公式で提供しているライブラリの中でトップ100に入る人気のライブラリです。目立ったバグもなく安定して動作しますし、人気なだけあってネット上の情報が豊富なため、特段の理由がない限りこちらを使うのがよいでしょう。

SSD1306については、Google検索すると他のライブラリも多数ヒットします。しかし、バグが入っており正常に動作しないライブラリも少なくないようですので、注意したほうが良さそうです。

というのも、この記事を書いたのはバグだらけのライブラリを導入し、なかなかうまくいかなかったから。ヘッダーファイルの書き換えをしないと動作しないようなライブラリを選んでしまったがために、かなり時間をロスしてしまいました。ヘッダーファイルなど、ライブラリ自体の編集を要求するようなものは信頼性に欠けますので、選ばないようにしましょう。

とりあえず動かしてみよう！

まずはとにかく一度動かしてみましょう。GitHubに掲載されているコードを使用し、SSD1306でテスト表示してみます。

【STEP1】PlatformIOでプロジェクト作成

PlatformIOでプロジェクトを作成します。

【STEP2】ライブラリをインストールしよう

PlatformIOのコマンドラインからthingpulse/ESP8266 and ESP32 OLED driver for SSD1306 displaysをインストールします。

platformio lib install 2978

GitHubにはIDを指定してインストールする方法が記載されていましたが、もちろんPlatformIOのページにある通り、ライブラリの名前を指定してインストールしてもOKです。

PlatformIO Registry

The world's first package and project dependency management solution for embedded development

registry.platformio.org

pio lib install "thingpulse/ESP8266 and ESP32 OLED driver for SSD1306 displays@^4.2.1"

【STEP3】ESP32とディスプレイを接続しよう

OLEDディスプレイ（SSD1306）はESP32に接続しなければ動きません。当然なんだけど、たまに忘れる(^^;)

OLEDとの通信はI₂C通信により行います。ESP32の21にSDA、22にSCLを接続、VCCには3.3V、GNDにはGNDを接続するだけでOKです。

なお、プルアップは不要です。抵抗と接続してプルアップするように推奨しているサイトが多いですが、ESP32はプルアップ回路まで内蔵していますので、自分で回路を組む必要はありません。I₂Cに限らず、ボタン回路などを作るときのプルアップもESP32側でできてしまいます。

【STEP4】サンプルを動かしてみよう！

GitHubにサンプルが掲載されているので、試しに動かしてみましょう。

GitHub - ThingPulse/esp8266-oled-ssd1306: Driver for the SSD1306 and SH1106 based 128x64, 128x32, 64x48 pixel OLED display running on ESP8266/ESP32

Driver for the SSD1306 and SH1106 based 128x64, 128x32, 64x48 pixel OLED display running on ESP8266/ESP32 - ThingPulse/e...

github.com

examplesフォルダにいくつかのサンプルが用意されていますが、今回はSSD1306DrawingDemoを動作させてみます。examples/SSD1306DrawingDemo/SSD1306DrawingDemo.inoをコピーして、PlatformIOのプロジェクトのsrc/main.cppにすべてコピペします。

動作結果はこのあと動画で紹介していますので、お楽しみに！

/**
   The MIT License (MIT)
   Copyright (c) 2018 by ThingPulse, Daniel Eichhorn
   Copyright (c) 2018 by Fabrice Weinberg
   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to deal
   in the Software without restriction, including without limitation the rights
   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   copies of the Software, and to permit persons to whom the Software is
   furnished to do so, subject to the following conditions:
   The above copyright notice and this permission notice shall be included in all
   copies or substantial portions of the Software.
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
   SOFTWARE.
   ThingPulse invests considerable time and money to develop these open source libraries.
   Please support us by buying our products (and not the clones) from
   https://thingpulse.com
*/

// Include the correct display library
// For a connection via I2C using Wire include
#include <Wire.h>        // Only needed for Arduino 1.6.5 and earlier
#include "SSD1306Wire.h" // legacy include: `#include "SSD1306.h"`
// or #include "SH1106Wire.h", legacy include: `#include "SH1106.h"`
// For a connection via I2C using brzo_i2c (must be installed) include
// #include <brzo_i2c.h> // Only needed for Arduino 1.6.5 and earlier
// #include "SSD1306Brzo.h"
// #include "SH1106Brzo.h"
// For a connection via SPI include
// #include <SPI.h> // Only needed for Arduino 1.6.5 and earlier
// #include "SSD1306Spi.h"
// #include "SH1106SPi.h"

// Use the corresponding display class:

// Initialize the OLED display using SPI
// D5 -> CLK
// D7 -> MOSI (DOUT)
// D0 -> RES
// D2 -> DC
// D8 -> CS
// SSD1306Spi        display(D0, D2, D8);
// or
// SH1106Spi         display(D0, D2);

// Initialize the OLED display using brzo_i2c
// D3 -> SDA
// D5 -> SCL
// SSD1306Brzo display(0x3c, D3, D5);
// or
// SH1106Brzo  display(0x3c, D3, D5);

// Initialize the OLED display using Wire library
SSD1306Wire display(0x3c, SDA, SCL); // ADDRESS, SDA, SCL  -  SDA and SCL usually populate automatically based on your board's pins_arduino.h e.g. https://github.com/esp8266/Arduino/blob/master/variants/nodemcu/pins_arduino.h
// SH1106Wire display(0x3c, SDA, SCL);

// Adapted from Adafruit_SSD1306
void drawLines()
{
  for (int16_t i = 0; i < display.getWidth(); i += 4)
  {
    display.drawLine(0, 0, i, display.getHeight() - 1);
    display.display();
    delay(10);
  }
  for (int16_t i = 0; i < display.getHeight(); i += 4)
  {
    display.drawLine(0, 0, display.getWidth() - 1, i);
    display.display();
    delay(10);
  }
  delay(250);

  display.clear();
  for (int16_t i = 0; i < display.getWidth(); i += 4)
  {
    display.drawLine(0, display.getHeight() - 1, i, 0);
    display.display();
    delay(10);
  }
  for (int16_t i = display.getHeight() - 1; i >= 0; i -= 4)
  {
    display.drawLine(0, display.getHeight() - 1, display.getWidth() - 1, i);
    display.display();
    delay(10);
  }
  delay(250);

  display.clear();
  for (int16_t i = display.getWidth() - 1; i >= 0; i -= 4)
  {
    display.drawLine(display.getWidth() - 1, display.getHeight() - 1, i, 0);
    display.display();
    delay(10);
  }
  for (int16_t i = display.getHeight() - 1; i >= 0; i -= 4)
  {
    display.drawLine(display.getWidth() - 1, display.getHeight() - 1, 0, i);
    display.display();
    delay(10);
  }
  delay(250);
  display.clear();
  for (int16_t i = 0; i < display.getHeight(); i += 4)
  {
    display.drawLine(display.getWidth() - 1, 0, 0, i);
    display.display();
    delay(10);
  }
  for (int16_t i = 0; i < display.getWidth(); i += 4)
  {
    display.drawLine(display.getWidth() - 1, 0, i, display.getHeight() - 1);
    display.display();
    delay(10);
  }
  delay(250);
}

// Adapted from Adafruit_SSD1306
void drawRect(void)
{
  for (int16_t i = 0; i < display.getHeight() / 2; i += 2)
  {
    display.drawRect(i, i, display.getWidth() - 2 * i, display.getHeight() - 2 * i);
    display.display();
    delay(10);
  }
}

// Adapted from Adafruit_SSD1306
void fillRect(void)
{
  uint8_t color = 1;
  for (int16_t i = 0; i < display.getHeight() / 2; i += 3)
  {
    display.setColor((color % 2 == 0) ? BLACK : WHITE); // alternate colors
    display.fillRect(i, i, display.getWidth() - i * 2, display.getHeight() - i * 2);
    display.display();
    delay(10);
    color++;
  }
  // Reset back to WHITE
  display.setColor(WHITE);
}

// Adapted from Adafruit_SSD1306
void drawCircle(void)
{
  for (int16_t i = 0; i < display.getHeight(); i += 2)
  {
    display.drawCircle(display.getWidth() / 2, display.getHeight() / 2, i);
    display.display();
    delay(10);
  }
  delay(1000);
  display.clear();

  // This will draw the part of the circel in quadrant 1
  // Quadrants are numberd like this:
  //   0010 | 0001
  //  ------|-----
  //   0100 | 1000
  //
  display.drawCircleQuads(display.getWidth() / 2, display.getHeight() / 2, display.getHeight() / 4, 0b00000001);
  display.display();
  delay(200);
  display.drawCircleQuads(display.getWidth() / 2, display.getHeight() / 2, display.getHeight() / 4, 0b00000011);
  display.display();
  delay(200);
  display.drawCircleQuads(display.getWidth() / 2, display.getHeight() / 2, display.getHeight() / 4, 0b00000111);
  display.display();
  delay(200);
  display.drawCircleQuads(display.getWidth() / 2, display.getHeight() / 2, display.getHeight() / 4, 0b00001111);
  display.display();
}

void printBuffer(void)
{
  // Initialize the log buffer
  // allocate memory to store 8 lines of text and 30 chars per line.
  display.setLogBuffer(5, 30);

  // Some test data
  const char *test[] = {
      "Hello",
      "World",
      "----",
      "Show off",
      "how",
      "the log buffer",
      "is",
      "working.",
      "Even",
      "scrolling is",
      "working"};

  for (uint8_t i = 0; i < 11; i++)
  {
    display.clear();
    // Print to the screen
    display.println(test[i]);
    // Draw it to the internal screen buffer
    display.drawLogBuffer(0, 0);
    // Display it on the screen
    display.display();
    delay(500);
  }
}

void setup()
{
  display.init();

  // display.flipScreenVertically();

  display.setContrast(255);

  drawLines();
  delay(1000);
  display.clear();

  drawRect();
  delay(1000);
  display.clear();

  fillRect();
  delay(1000);
  display.clear();

  drawCircle();
  delay(1000);
  display.clear();

  printBuffer();
  delay(1000);
  display.clear();
}

void loop() {}

↑ソースコードを貼っておきましたので、こちらをコピペしてもらってもOK

実行してみよう！

ソースコードをコピペしたら、ビルドしてESP32にアップロードします。

さあ動いてくれますでしょうか！？

しっかり動いてくれました！よかった！

基本的な使いかた

基本となるソースコードは次のようになります。

#include <Wire.h>        
#include "SSD1306Wire.h" 

SSD1306Wire display(0x3c, SDA, SCL);

void setup()
{
  //初期化する
  display.init();

  //ここで処理をする
  display.drawString(10,10,"Test!Hello!");

  //表示する
  display.display();
  //バッファをクリア
  display.clear();
}

void loop() {}

はじめにSSD1306Wire型の変数displayを定義します。コンストラクタにディスプレイのI₂CアドレスとSDA、SCLのGPIOピン番号を渡しておきます。

I₂Cアドレスはほとんどのケースで0x3cとなっています。SSD1306の基盤上にシルク印刷されていますので、万が一動作しないときは確認してみるとよいかもしれません。ピンについては特別な場合を除き、SDA、SCLと指定しておけばOKです。自動的にGPIO21と22がディスプレイとの接続に使用できるようになります。

あとはsetupでdisplay.initを呼び出し、初期化すれば表示できるようになります。変数displayがバッファとして働き、display.display()を呼び出すとデータがOLEDに転送され、実際に表示がされます。基本はこれだけで、非常にかんたんに表示を行うことが出来ます。

なお、表示後にdisplay.clear()はバッファ（display変数）をクリアするという意味です。表示を消去するにはdisplay.resetDisplay()を実行します。

よく使うサンプルコード集

よく使うサンプルコードをまとめておきます。

文字を表示する

指定した座標に文字を表示したいときのサンプルです。display.drawStringを使用します。

display.drawString(10,10,"Test!Hello!");

実行すると、(x,y)=(10,10)の座標にTest!Hello!と表示します。

文字の寄せ方はdisplay.setTextAlignmentで指定できます。

display.setTextAlignment(TEXT_ALIGN_CENTER)

アンカーポイントを文字列のどこにするか、以下から指定することができます。

• TEXT_ALIGN_LEFT
• TEXT_ALIGN_RIGHT
• TEXT_ALIGN_CENTER
• TEXT_ALIGN_CENTER_BOTH

バックグラウンドを白色にする

デフォルトでは黒の背景に白で描画が行われます。バックグラウンドを白色にしたいときは、display.invertDisplayを呼び出します。

display.invertDisplay();

もとに戻すには、normalDisplayを呼び出します。

display.normalDisplay();

なお、文字色は自動的に変化しないため、setColorを使って手動で変更する必要があります。

フォント・フォントサイズを変える

setFontを実行すると、テキスト描画に使用するフォントを変更することができます。なお、フォントサイズの変更もフォントの変更で行います。

void setFont(const uint8_t* fontData);

フォントは次のページで作成できますので、あわせて確認してみることをおすすめします。

Angularclient

oleddisplay.squix.ch

画像を描画する

画像を描画することもできます。あらかじめ画像ファイルをXBM形式に変換しておき、ソースコードなどに埋め込んでおけば、任意の画像をOLEDに表示させることができます。

void drawXbm(int16_t x, int16_t y, int16_t width, int16_t height, const uint8_t *xbm);

こちらのサイトでXBM形式への変換が行えます。

Convert Image to XBM

www.online-utility.org

画面を点滅させる

loopでnormalDisplayとinvertDisplayを繰り返すことにより、画面を点滅させることが出来ます。

void loop()
{
  delay(800);
  display.normalDisplay();
  delay(800);
  display.invertDisplay();
}

delayにより一定時間（ここでは800ms）待機させることで、ディスプレイを目立たせることが可能です。エラー表示などに使用できるかもしれません。

描画色の変更

display.setColorを使用すると、文字などの描画に使用する色を変更できます。

display.setColor(BLACK);

すべての表示を消す

一度すべての表示を消したいときは、display.resetDisplayを呼び出します。

display.resetDisplay();

呼び出すだけですべての表示が消去されます。display.displayの呼び出しは不要です。

ディスプレイを上下逆にする

display.flipScreenVertically();

左右反転して表示する

display.mirrorScreen();

まとめ

いかがでしたか？ESP32を使って、かんたんにOLEDディスプレイへ表示することが出来ました。

意外な落とし穴はライブラリの選定でしょう。安価で広く普及しているSSD1306だからこそ、さまざまなメーカーがライブラリを開発しているようです。その反面、信頼性の低いライブラリやネット情報が氾濫しており、不確かな情報のためにバグに悩まされることがありえます。当記事の方法を使っていただければ、確実にディスプレイを動作させることができると思いますので、参考にしてみてください。

おすすめのライブラリ

HTTP通信にはArduino Espressif32に含まれているHTTPClientを使用します。

JSONの処理についてはArudinoJsonがおすすめです。

PlatformIO Registry

The world's first package and project dependency management solution for embedded development

registry.platformio.org

サンプル

ライブラリを読み込むため、includeに次を記載します。

#include <ArduinoJson.h>
#include <HTTPClient.h>

POSTするサンプルは次のようになります。

  ///
  /// サーバーにPOSTする
  ///

  // JSONを作成する
  StaticJsonDocument<JSON_OBJECT_SIZE(4)> json_array;
  char json_string[255];
  // JSONに変換したいデータを連想配列で指定する
  json_array["espid"] = 1;
  json_array["temp"] = 2;
  json_array["humi"] = 3;
  json_array["press"] = 4;
  // JSONフォーマットの文字列に変換する
  serializeJson(json_array, json_string, sizeof(json_string));
  // HTTPClinetでPOSTする
  httpClient.begin("https://test.lc/hoge.php");
  // postするのはjsonなので、Content-Typeをapplication/jsonにする
  httpClient.addHeader("Content-Type", "application/json");
  // POSTしてステータスコードを取得する
  int status_code = httpClient.POST((uint8_t *)json_string, strlen(json_string));
  if (status_code == 200)
  {
    Serial.printf("[POST]Send to server (URL:%s)", postUrl);
  }
  else
  {
    Serial.printf("[POST]failed to send to server (URL:%s)", postUrl);
  }
  // HTTPClinetを終了する
  httpClient.end();

espid,temp,humi,pressの4つのデータをJSONに変換し、 https://test.lc/hoge.phpに送信するサンプルとしてみました。

ArduinoJsonを使用し、配列をJSON形式の文字列に変換させ、変換した文字列をサーバーにPOSTしています。

レスポンスも受け取るようにしており、200以外ではシリアルにエラーを出力するようにしてみました。

まとめ

HTTPClientとArduinoJSONの組み合わせて、JSONによるデータのやり取りもかんたんに対応できます。ESP32で収集したデータをサーバーに送信する際など、ぜひ使ってみてください。

クエリパラメータを取得するには？

クエリパラメータとは、

http://<ESP32のIPアドレス>/api?param=hoge

でいうところの?param=hogeのことです。つまり、URL末尾に含まれるパラメータのことを指します。

ESPAsyncWebServerでクエリパラメータを取得するには、getParam()を使用します。

 server.on("/test", HTTP_GET, [](AsyncWebServerRequest *request) {
      String value=request->getParam("param")->value();
      Serial.print(value);
}

http://<ESP32のIPアドレス>/test?param=hogeにアクセスすると、シリアルコンソールにhogeと表示されます。

このサンプルではGETされたときに取得していますが、HTTP_GETをHTTP_ANYにすれば、POSTやPUTといった他のメソッドでも同様に動作させることができます。

POSTされたパラメータを取得するには？

POSTされたパラメータ（formタグにより送信されたパラメータなど）を取得するには、arg()を使用します。

 server.on("/test", HTTP_ANY, [](AsyncWebServerRequest *request) {
      String value=request->arg("param");
      print(value);
}

/testにデータがPOSTされると、paramの値を取得して、シリアルポートに出力します。

arg()は、application/x-www-form-urlencodedとmultipart/form-dataの両者に対応します。つまり、<form>タグで作成したフォームのデータでも、javascriptのFormDataオブジェクトでも解釈することができます。

POST - HTTP | MDN

HTTP の POST メソッドは、サーバーにデータを送信します。リクエストの本文の型は Content-Type ヘッダーで示されます。

developer.mozilla.org

Guru Meditation Error: Core  1 panic'ed (LoadProhibited). Exception was unhandled.
Core 1 register dump:
PC      : 0x40151d6b  PS      : 0x00060a30  A0      : 0x800d6d03  A1      : 0x3ffd0c50
A2      : 0x0000000c  A3      : 0x3ffd0cb8  A4      : 0x00000001  A5      : 0x00000003
A6      : 0x00ff0000  A7      : 0xff000000  A8      : 0x800d6a17  A9      : 0x3ffd0c30
A10     : 0x3ffd0cb8  A11     : 0x3ffd0cb8  A12     : 0x3ffd14e8  A13     : 0x0000ff00
A14     : 0x00ff0000  A15     : 0xff000000  SAR     : 0x00000010  EXCCAUSE: 0x0000001c
EXCVADDR: 0x00000014  LBEG    : 0x400012e5  LEND    : 0x40001309  LCOUNT  : 0x800d6f47

ELF file SHA256: 0000000000000000

Backtrace: 0x40151d6b:0x3ffd0c50 0x400d6d00:0x3ffd0c70 0x400d0f13:0x3ffd0c90 0x400d5871:0x3ffd0d00 0x400d4739:0x3ffd0d40 0x400d47c1:0x3ffd0d90 0x401489c1:0x3ffd0db0 0x40148a3d:0x3ffd0df0 0x401490ee:0x3ffd0e10 0x4008996a:0x3ffd0e40

まとめ

ESPAsyncWebServerをつかって、リクエストされたパラメーターを取得する方法を紹介しました。

argとgetParamsの違いがわかりにくいので、注意が必要です。