LINEBOT に M5Stack からメッセージを送る

今回作る仕組み

image

そこに GitHub の LINE BOT のサーバーで、M5Stack からメッセージを受け付ける入口も作っているので、M5Stack からメッセージを受け取ると、それがユーザーから見た LINE BOT にメッセージが届いています。

事前準備：ホスト名を準備しましょう

この後の設定で、ホスト名というものが必要になるので、さきほどメモした GitHub URL からホスト名を分離してメモしておきます。

もし、 https://3000-hoge-fuga-scnzIUgdS.github.dev/ という GitHub URL の場合は 3000-hoge-fuga-scnzIUgdS.github.dev としてホスト名をメモしておきます。

今回のプログラムはどのように動くか

image

書き込みと同時に Wi-Fi がつながり Launched! というメッセージが GitHub のサーバーに送られ、 LINE BOT にメッセージが通されます。

image

さらに A B C 各ボタンを押すと、

image

押したボタンの情報が LINE BOT に表示されます。

ソースコードを反映＆保存

Arduino IDE で新規ファイルを作成し、以下のコードをコピーアンドペーストします。こちらを dhw-pp2-study-02-06-LINEBotMessageHTTPSToGitHub というファイル名で保存します。

#include <M5Stack.h>

// HTTP 通信を行うライブラリ
#include <HTTPClient.h>

// Wi-FiのSSID
char *ssid = "Wi-FiのSSID";
// Wi-Fiのパスワード
char *password = "Wi-Fiのパスワード";

void setup() {
  // init lcd, serial, but don't init sd card
  // LCD ディスプレイとシリアルは動かして、SDカードは動かさない設定
  M5.begin(true, false, true);

  // スタート
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(10, 10);
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(2);

  // Arduino のシリアルモニタ・M5Stack LCDディスプレイ両方にメッセージを出す
  Serial.print("START");  // Arduino のシリアルモニタにメッセージを出す
  M5.Lcd.print("START");  // M5Stack LCDディスプレイにメッセージを出す（英語のみ）

  // WiFi 接続開始
  WiFi.begin(ssid, password);
  // 勝手に Button A が押されることを回避
  WiFi.setSleep(false);

  while (WiFi.status() != WL_CONNECTED) {
      delay(500);

      // Arduino のシリアルモニタ・M5Stack LCDディスプレイ両方にメッセージを出す
      Serial.print(".");
      M5.Lcd.print(".");
  }

  // WiFi Connected
  // WiFi 接続完了
  M5.Lcd.setCursor(10, 40);
  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(2);

  // Arduino のシリアルモニタ・M5Stack LCDディスプレイ両方にメッセージを出す
  // 前のメッセージが print で改行入っていないので println で一つ入れる
  Serial.println("");  // Arduino のシリアルモニタにメッセージを出し改行が最後に入る
  M5.Lcd.println("");  // M5Stack LCDディスプレイにメッセージを出す改行が最後に入る（英語のみ） 

  // Arduino のシリアルモニタ・M5Stack LCDディスプレイ両方にメッセージを出す
  Serial.println("WiFi Connected.");  // Arduino のシリアルモニタにメッセージを出す
  M5.Lcd.println("WiFi Connected.");  // M5Stack LCDディスプレイにメッセージを出す（英語のみ）

  // 起動時に送る
  delay(1000);
  send_message("{\"message\":\"Launched!\"}");
}

// HTTP でメッセージ送信部分
void send_message(String msg) {

  // 今回送るホスト名 GitHub Codespaces のホスト名 (https://なし)を反映
  // https://3000-hoge-fuga-scnzIUgdS.github.dev/ の場合は 3000-hoge-fuga-scnzIUgdS.github.dev
  String hostName = "*********************.github.dev";

  // 今回送るURL
  String url = "https://" + hostName + "/from/m5stack";

  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setCursor(10, 10);

  M5.Lcd.println("-> send_message");
  M5.Lcd.print("msg: ");
  M5.Lcd.println(msg);

  Serial.println("-> send_messagey");
  Serial.print("msg: ");
  Serial.println(msg);

  // 送るデータ
  String queryString = msg;
  // HTTPClient 準備
  HTTPClient httpClient;
  // URL 設定
  httpClient.begin(url);
  // Content-Type
  httpClient.addHeader("Content-Type", "application/json");

  // データ送信完了
  M5.Lcd.println("sended.");
  Serial.println("sended.");

  // ポストする
  int status_code = httpClient.POST(queryString);
  if( status_code == 200 ){
    String response = httpClient.getString();

    M5.Lcd.println("response:");
    M5.Lcd.println(response);
  }
  httpClient.end();

  delay(2000);
}

void loop() {
  M5.update();

  if (M5.BtnA.wasReleased()) {
    // A ボタンを押したら JSON 形式のメッセージを飛ばす
    // \" はダブルクォーテーションで囲まれた中で JSON 内のダブルクォーテーションを表現するために \" でエスケープしてます。
    send_message("{\"message\":\"Pushed A\"}");
  } else if (M5.BtnB.wasReleased()) {
    // B ボタンを押したら JSON 形式のメッセージを飛ばす
    send_message("{\"message\":\"Pushed B\"}");
  } else if (M5.BtnC.wasReleased()) {
    // C ボタンを押したら JSON 形式のメッセージを飛ばす
    send_message("{\"message\":\"Pushed C\"}");
  }
}

Wi-Fi 情報を反映

// Wi-FiのSSID
char *ssid = "Wi-FiのSSID";
// Wi-Fiのパスワード
char *password = "Wi-Fiのパスワード";

自分のつなぎたい Wi-Fi の SSID とパスワードを反映します。

GitHub のホスト名を反映

  // 今回送るホスト名 GitHub のホスト名 (https://なし)を反映
  // https://3000-hoge-fuga-scnzIUgdS.github.dev/ の場合は 3000-hoge-fuga-scnzIUgdS.github.dev
  String hostName = "*********************.github.dev";

今回送るホスト名 GitHub のホスト名を反映します。https://3000-hoge-fuga-scnzIUgdS.github.dev/ の場合は 3000-hoge-fuga-scnzIUgdS.github.dev です。

M5Stack に書き込んでみる

そして、もう一度保存します。（大事）

image

M5Stack に書き込んでみましょう。

動かしてみる

image

うまく設定できていれば、書き込みと同時に Wi-Fi がつながり Launched! というメッセージが GitHub のサーバーに送られ、 LINE BOT にメッセージが通されます。

image

さらに A B C 各ボタンを押すと、

image

押したボタンの情報が LINE BOT に表示されます。

image

このような仕組みで動いています。

プログラムの終了

現在のプログラムは app.js のように実行したらすぐに終わるプログラムではなく、サーバーとして動き続けています。プログラムの終了をしてみましょう。

ターミナル上で Ctrl + C を打ってプログラムを終了します。

3d07a9147a70110c2f932c6dace96eb8

このように ^C 入力とともに、ターミナルの入力待ちになれば終了成功です。

9ea2265a9d054bc697a822b8b0061bee

サーバーが終了したので、さきほどの Index と書かれたページも再読み込みしてもアクセスできなくなります。

今回の Codespace の終了

0a8b4cfb807e57ea1382292a757c6899

今回の Codespace の終了をします。Codespace はブラウザを閉じると自動で閉じることもありますが、確実に閉じたほうが、無料枠の制限時間も無駄に消費せずおススメです。

コードスペースのライフサイクルを理解する
https://docs.github.com/ja/codespaces/getting-started/understanding-the-codespace-lifecycle

コードスペースを操作せずに実行したままにした場合、またはコードスペースを明示的に停止せずに終了した場合、コードスペースは非アクティブな時間が経過するとタイムアウトになり、実行が停止します。デフォルトでは、コードスペースは非アクティブ状態が 30 分間続くとタイムアウトしますが、作成する新しいコードスペースのタイムアウト期間をカスタマイズできます。

いま起動している Codespace から終了してみましょう。

270f2ad603d2c7aa6a984689f0ef6003

左下の >< Codespaces をクリックします。

579e1da05534e8d00cfa81428042c216

上部にコマンドパレットが表示されます。 Stop Current Codespace をクリックします。

6d77c1b267a243d5e43e7c6561bd5339

右下にステータスが表示されます。

4e949f3c23eca5b3d6383905f97eed3e

しばらく待つと画面が切り替わり、このようになれば無事終了できました。

その他に、以下のヘルプで、Codespace 一覧から停止する操作も確認できます。ちゃんと終了されたか確認するときにも役に立つでしょう。

質疑応答

image

ここまでで質問があればどうぞ！

次にすすみましょう

左のナビゲーションから「SNS からのアウトプットの事例や世界観を把握する」にすすみましょう。

results matching ""

    No results matching ""