UIFlowにAWS IoT用のブロックが追加されたので試してみた

## UIFlowってどんな物？

UIFlowは簡単に言うと、M5Stack系のデバイスでBlocklyと呼ばれるビジュアルプログラミング言語と、MicroPythonを使ったプログラミングが出来るものです。

https://m5stack.github.io/UIFlow_doc/ja/

デバイスに専用のイメージを焼き込むと、専用のエディタ(インストール版、Web番)で作成したプログラムをデバイスにアップロードすることができます。

イメージの焼き込みにはM5Burnerというツールを使います。

https://m5stack-store.myshopify.com/pages/download

デバイスをPCにUSBで繋いてアプリケーションをアップロードするには、インストール版のエディタを利用します。インターネット経由でデバイスにアプリケーションをアップロードするには、Web版のエディタを利用します。

UIに関してはどちらもほぼ同じです。

インストール版のUI(Betaの画面)
![uiflow_ide1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/033e11df-a50f-20d2-7ae0-310e38e2406c.png)

Web版のUI
![uiflow_ide2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/026dc8c6-5d61-4024-136c-fa4d74e582ad.png)

左上を見てもらうとバージョンが確認できますが、Web版のほうが最新の機能を使える事が多いと思います。Web版の方のBlocklyのメニューのところに`IoTCloud`というのが確認できると思います。

## AWS IoTに対応したって？

今まで、MQTT用のブロックが有ったので、MQTTを使った通信は出来ましたが、相互認証が必要なAWS IoT CoreだCAの証明書が指定できなかったせいか、うまく繋がりませんでした。

今回ブロック自体が用意されたことも有り、試してみました。IoTCloudのブロックは、2021/3/20時点では、まだインストール版に来ていないので、Web版で試しています。

![uiflow_ide3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/0aeef6a9-3f93-478f-f03c-b0b3a5dd9890.png)

このように、AWS IoT Coreを利用するためのブロックが利用できるようになっていました！

## デバイスの準備

まずは、デバイスにUIFlow用のファームを書き込みます。ファームは最新のv1.7.3.1以上を使ってください。イメージの焼き方は[こちら](https://m5stack.github.io/UIFlow_doc/ja/ja/base/Update.html)を参考にしてください。ファームの設定ができたらWi-Fiの情報を設定します。

Web版を利用する場合、どのデバイスに対してアップロードするかを識別する必要があり、APIキーを指定する必要があります。APIキーについては[こちら](https://m5stack.github.io/UIFlow_doc/ja/ja/base/setting_APIkey.html)を参考にエディタに設定します。デバイスとの接続が確認できたら、次に進んでください。


## 初めてのMQTT Publish

AWS IoT のブロックを使う際、AWS IoT Coreとの認証にクライアント証明書が必要になるのですが、その証明書はAWSのマネージメントコンソールで発行します。

この記事では、証明書の発行については細かく紹介しませんが、[ AWS IoT Core 初級ハンズオン > AWS IoT Coreセットアップ](https://aws-iot-core-for-beginners.workshop.aws/phase3/step1.html)の手順を参考に、必要なThingの登録、証明書の発行、IoT Policyを作成します。

手順通り進めると、証明書がPCにダウンロードできたと思いますが、UIFlowだとファイル名の文字数制限(10文字)があるため、`*****-certificate.pem.crt` > `cert.pem`、 `*****-private.pem.key` > `key.pem` と名前を変更します。

### MQTTの設定ブロックを配置

ブロックをドラッグ・アンド・ドロップして、`Setup`にMQTTの設定ブロックを配置します。

![uiflow_aws1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/83e07b8d-45e6-0a62-ced5-0f723aabdc1a.png)

このブロックの左下にあるファイルを追加するみたいなアイコンをクリックして、先程リネームした2つのファイルをアップロードします。アップロードされたら、以下の設定を行います。

- Init things name
  - AWS IoT Coreのマネージメントコンソールで登録したThing Name
- host
    - 自分のIoT Coreエンドポイント名（確認方法は[こちら](https://aws-iot-core-for-beginners.workshop.aws/phase3/step1.html#311-aws-iot-のエンドポイント確認))
- port
    - 8883
- keepalive
    - 600(5分)
- keyFile
    - 先程アップロードしたkey.pem
- certFile
    - 先程アップロードしたcert.pem

次に、`AWS start`のブロックをMQTTの設定のブロックに付けてSetupの処理は終わりです。

![uiflow_aws2_14_20_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/d0d3696f-4e56-9a40-924b-2feb416562e9.png)

### パブリッシュに設定

ボタンを押したら、`HelloWorld`とパブリッシュしたいのですが、その様な場合はEventのブロックを利用します。その中の`ボタンが押されたら`というものがありますので、これを利用します。

![uiflow_aws3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/c3d66d6e-3c85-c0f0-a0fc-96a60a7c3203.png)

このブロックの中に、`Publish`のブロックを指定して、topicに`uiflow`、ｍｓｇに`HelloWorld!`を指定します。

![uiflow_aws4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/b1ccee69-df52-bf77-9d43-c9fc806a121b.png)

## 動作確認

これで出来上がりましたので、AWS IoT Coreのテストツールを使って、MQTTが正しく送られてくることを確認します。テストツールの使い方は[こちら](https://aws-iot-core-for-beginners.workshop.aws/phase3/step2-b.html)を参考にしてください。サブスクライブするtopicは、`uiflow`としています。

![uiflow_aws6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/8187c0d9-3b86-f957-7f1c-7727229ac5c2.png)

ちゃんと届いてました！

サブスクライブも、LabelをM5StackのUI上に配置して、メッセージを受け取ったら表示することもできました。

![uiflow_aws7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36184/0c3ba300-1ca3-d788-9b9c-eb540772babe.png)

UIFlow楽しいですね！

## 免責

発言内容は個人的な意見であり、所属する企業を代表するものではありません。
掲載しているのはサンプルレベルの物ですので動作を保証するものではありません。