Blynkを使ってスマホとM5StickCでコミュニケーション

#やりたいこと
スマホ-デバイス間やデバイス-デバイス間でコミュニケーションできるようなものを作りたい。インターネット経由で。
でも、AzureとかAWSとか使うとお金かかっちゃう。
ということで何かいいものないかなーと探してたらありました。
「Blynk」というサービスです。一定の範囲内で使うなら"無料"です。すばらしい！

#Blynkとは
Blynkとは、スマホなどから外部ネットワークにあるデバイスを遠隔操作できるようにするサービスです。
どんなことできるのかは以下のページで簡単に紹介されてます。
https://gigazine.net/news/20150202-blynk/

#作るもの全体イメージ
スマホからLINEのように何かしらメッセージをM5StickCに送り付け、逆にM5StickCからもスマホに対してYES、NOの返事を送るようなものを作ってみたいと思います。
![blynkイメージ_説明あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/ddf14447-fcfb-b4c8-cfdb-92280d7ab4db.png)

#出来上がったもの
文字が小さいので、フルスクリーンにして視聴ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQ7KGZEUXNQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

　　　
スマホにメッセージを入力すると、M5StickCに表示されます。
![スマホtom5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/9268959f-22d1-baeb-70b0-c5000ea2829b.png)

M5StickCのAボタン（正面のボタン）を押すと、スマホに返事が表示されます。
![m5toスマホ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/9020d285-580b-cc66-728d-a117bb594d28.png)

ちなみに、M5StickCのボタン毎にメッセージを割り当てており、Aボタン（正面のボタン）で「OK!!」、Bボタン（サイドのボタン）で「OKじゃない」のメッセージを送ります。
長押しとかダブルクリックとかでメッセージ変えても面白いかもしれませんね。

#作り方
Blynkの使い方やインストールの手順は色々な記事が出てますので、そちらを参考にしてください。結構簡単でした。
私は以下のページを参考にしました。
https://wak-tech.com/archives/1546

以下はスマホにBlynkをインストールして、トークンを発行した状態での手順です。

###Blynkアプリ側（スマホ側）の設定
![Screenshot_20210604-125633.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/16d2d4b4-46cf-5aba-04b5-d1ebe0d15ee7.png)
TerminalコントロールとNotificationコントロールを配置してます。
Terminaiコントロールは入力した文字列をデバイスに送信したり、逆にデバイスから送信された文字列を表示したりするコントロールです。
NotificationコントロールはLINEのメッセージ受信したときの通知みたいな機能を提供してくれるコントロールです。

###M5StickC側のソース
日本語表示できるようにするためにefontのライブラリを使用しています。ライブラリマネージャからインストールしてください。

```c++:sample.ino

#define BLYNK_PRINT Serial
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
#include <M5StickC.h>
#include "efont.h"
#include "efontEnableJa.h"
#include "efontM5StickC.h"

WidgetTerminal terminal(V2);

void setup()
{
  char auth[] = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Blynkから送られてきたメール内にある Auth コード
  char ssid[] = "xxxxxxx"; //ご自分のルーターの SSID
  char pass[] = "xxxxxxx"; //ご自分のルーターのパスワード

  M5.begin();
  Serial.begin(115200);
  // Blynk初期化
  Blynk.begin(auth, ssid, pass);

  M5.Lcd.setTextSize(2);
  M5.Lcd.printf("started.");
  delay(1000);
  M5.Lcd.fillScreen(BLACK);
}

void loop()
{
  M5.update();
  Blynk.run();

  if (M5.BtnA.wasPressed())
  {
    Blynk.notify("OK!!");       // スマホに通知
    terminal.println("OK!!");   // スマホのターミナルに表示
    terminal.flush();

    M5.Lcd.fillScreen(BLACK);
    printEfont("OK!!", 0, 140, 1);  // M5StickCの画面に送信した内容を描画
  }
  if (M5.BtnB.wasPressed())
  {
    Blynk.notify("OKじゃない");
    terminal.println("OKじゃない");
    terminal.flush();

    M5.Lcd.fillScreen(BLACK);
    printEfont("OKじゃない", 0, 140,1);
  }
}

BLYNK_WRITE(V2) {
  Serial.printf("Blynk_read = %s\r\n", param[0].asStr());
  M5.Lcd.fillScreen(BLACK);
  printEfont((char*)param[0].asStr(), 0, 0, 1); // スマホのターミナルから入力された文字列を描画
}
```

#作ってみて
何となく思い付きで作ってみたので、これの使い道は分かりません。スパイごっことかでしょうか。

Blynkには他にもいろんなコントロールが用意されてます。色々できそう。凄いです！！