【obniz 2020】テキストプログラミングを自分で書かず Node-RED と #obniz を組み合わせて使おうとしてみる（obnizOSも利用）

この記事は、[obniz Advent Calendar 2020](https://qiita.com/advent-calendar/2020/obniz) の 6日目の記事です。

今回、以下の木戸さん（ @wicket さん）の記事にも書かれていた [Node-RED](https://nodered.org/)用の [obnizノード](https://flows.nodered.org/node/node-red-contrib-obniz)の話に関する内容を書こうと思います。
●Node-REDのobnizノードがバージョンアップした！ - Qiita
　https://qiita.com/wicket/items/e150e78cd787da03493e

記事のポイントは、Node-RED上で obniz用の処理を書くのにテキストプログラミングが必要になるところを、obniz用のブロックプログラムを使って生成するという部分です。これにより、できるだけ自分ではテキストプログラミングを行わずに Node-RED上で obniz を扱うようなことをしてみます（※ もちろん、obniz用のブロックプログラムに依存した制約は出てきそうですが）。

以下、obniz・Node-RED・obnizOS・obniz のブロックプログラム の説明をそれぞれ書いていますが、今回のメインの内容をすぐにご覧になりたい方は[この記事の「Node-RED で obniz を使う」](https://qiita.com/youtoy/items/9d00ab9e87720e7f6a2f#node-red-%E3%81%A7-obniz-%E3%82%92%E4%BD%BF%E3%81%86)の部分から読み始めてください。

## obniz と Node-RED

### obniz について
今回の記事の登録先のカレンダーでトピックになっている [obniz](https://obniz.com/ja/) の公式ページはこちらです。

●obniz（オブナイズ）だけで誰でもIoTを今すぐ実現 | obniz
　https://obniz.com/ja/

![obniz（オブナイズ）だけで誰でもIoTを今すぐ実現___obniz.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6f710308-614e-4498-43cb-57b3951f8e50.jpeg)

以下の公式の説明にあるように、IoT開発を簡単に行うことができます。
初期セットアップでデバイスを Wi-Fi につないでしまえば、デバイスに取り付けたセンサー等の部品を、公式のWebサイト上のページから簡単に操作して試すこともできます。

> クラウドから操作するIoT
> 
> obniz（オブナイズ）は、ON/OFFやUART通信などのIO制御をクラウドのAPI経由で行える仕組みです。センサーやアクチュエーター、既存機器をネットワーク経由で直接操作でき、クラウド中心のIoT開発が可能です。

> 引用： 公式ページ「[obnizとは](https://obniz.io/ja/how_obniz_works)」より

詳細は、上記の公式ページをご覧ください。

### Node-RED について
Node-RED は、フローベースでプログラムを開発する、ビジュアルプログラミングツールです。

![Introduction_-_Node-RED_Essentials_-_YouTube.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/841cc561-0978-bd84-95f0-3753a82c2751.jpeg)
※ 上記の画像は「[Introduction - Node-RED Essentials - YouTube](https://www.youtube.com/watch?v=ksGeUD26Mw0)」より

個人的には、IoT関連やデバイスを利用するようなプロトタイプを作る際によく利用しています。また、自分はあまり利用できてないですが Raspberry Pi上で動作させて電子工作的なことをも組み合わせられたり、活用できる範囲が広いです。

- [Raspberry Pi GPIOと連携する : Node-RED日本ユーザ会](https://nodered.jp/docs/faq/interacting-with-pi-gpio)

Node-RED の詳細についてや使い方は、以下のサイトなどをご覧ください。

- [概要 : Node-RED日本ユーザ会](https://nodered.jp/about/)
- [Getting Started : Node-RED日本ユーザ会](https://nodered.jp/docs/getting-started/)

## obnizOS と obniz用のブロックプログラム

### obnizOS
当初、obniz は専用のデバイスを購入して利用する形でしたが、その後、[M5StickC](https://docs.m5stack.com/#/en/core/m5stickc) 等といったデバイスを obniz用に利用できる仕組みも提供されるようになりました。

それが [obnizOS](https://obniz.com/ja/doc/reference/obnizos-for-esp32/overview) です。
当初は、自分で OS を対応デバイスにインストールして利用するためには、有償プランに加入する必要がありましたが、今年の 7月から 1アカウントで 1台だけは無料で利用できるようにもなりました。

●obnizOSが無料になりました！ - blog.obniz.com
　https://blog.obniz.com/news/obniz-os-free/

今回の記事では、[公式の対応デバイス一覧](https://obniz.com/ja/doc/reference/obnizos-for-esp32/official-devices/)に書かれたデバイスの中の1つ、M5StickC を使います。
自分が元から所有していた M5StickC に、[公式で書かれた手順](https://obniz.com/ja/doc/reference/obnizos-for-esp32/quick-start/)で OS をセットしました。

### obniz用のブロックプログラム
今回、Node-RED上で obniz用のプログラムを書く際に、[obniz のブロックプログラム](https://obniz.com/ja/doc/guides/block-programing/start)を組み合わせて使います。

![クイックスタート_-_obniz_Docs.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f9c4c875-199f-6095-8ae9-eb913220634e.jpeg)

obniz用のブロックプログラムは、[公式の開発用ページ](https://obniz.com/ja/console/blockprogram)で利用可能なビジュアルプログラミング環境です。

今回の使い道は、Node-RED上で obniz を制御するプログラムを書く際に、JavaScript で書かれたプログラムが必要になるのですが、そのプログラムをこのビジュアルプログラミングで生成します。

## Node-RED で obniz を使う
ここまでに記載してきた通り、今回の記事に登場する要素として以下があります。

- obniz
- obnizOS
- obniz のブロックプログラム
- Node-RED

そして、これらと冒頭に少しふれた Node-RED用の [obnizノード](https://flows.nodered.org/node/node-red-contrib-obniz)を使って、今回の試作を進めていきます。

### obniz用のノードのセットアップ
それでは、[Node-RED用の obnizノード](https://flows.nodered.org/node/node-red-contrib-obniz)を使っていきます。

下準備として、Node-RED上で obniz用のノードを追加してください。その手順の詳細は、冒頭で紹介した [Qiita の記事の「インストール方法」の部分](https://qiita.com/wicket/items/e150e78cd787da03493e#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95)をご覧ください。

その準備ができた前提で、以下を進めていきます。

### obniz用のノードの使い方（概要）
ノードの追加が完了すると、以下の 2つを使えるようになります。

![Node-REDのobnizノードがバージョンアップした！_-_Qiita.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1fccf54b-29e7-af89-e6c0-a29c6b09d0f4.jpeg)
※ 画像は[冒頭で紹介した記事内の「obniz用のノードのセットアップ」](https://qiita.com/wicket/items/e150e78cd787da03493e#%E3%83%8E%E3%83%BC%E3%83%89%E3%81%AE%E7%A8%AE%E9%A1%9E)より引用

この画像内の説明にあるとおり、連続動作させたいものに使うノードと単発で動作させたいものに使うノードがあるようです。

#### 単発で動作させるパターンを試す
それでは、まずは以下にある 2つのうち、下のほうのノード（obniz function）を試します。

![ノード2つ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dd5675fd-e1af-aa33-de28-6b0e0bb4f73e.jpeg)

その下準備として、これに必要になる簡単なプログラムをブロックプログラムで作ります。
まずは以下のようなシンプルなものを準備し、これを Node-RED上で動作させてみようと思います。
（obniz につながったら、画面上に「Hello World」と表示されて LED が光る、というもの）
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/obnizOS?src=hash&amp;ref_src=twsrc%5Etfw">#obnizOS</a> が入った <a href="https://twitter.com/hashtag/M5StickC?src=hash&amp;ref_src=twsrc%5Etfw">#M5StickC</a> と、 <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> のブロックプログラム、その2。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/j3hVIb1X6S">pic.twitter.com/j3hVIb1X6S</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1335591472226160646?ref_src=twsrc%5Etfw">December 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記のシンプルなプログラムを作ったら、以下の画像にあるメニューを選び、テキストのコードを見てみます。

![コードの生成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fd14e769-61ad-75bf-a678-560178215c30.jpeg)

100行くらいのコードが生成されましたが、必要になりそうな部分は下のほうにある一部のみ（以下）で良さそうです。

```html
    <script>
      $("#bploading").text("RUNNING...");
      (async function () {
        var m5;

        m5 = new Obniz.M5StickC("????-????");
        await m5.connectWait();
        m5.display.clear();
        m5.display.print("Hello, World!");
        m5.led.on();
      })();
    </script>
```

さらに、この中の一部だけあれば良さそうです。
試してみた結果、以下の部分だけがあれば大丈夫でした（それと、「m5」の部分は「obniz」に書きかえました）。

```JavaScript
m5.display.clear();
m5.display.print("Hello, World!");
m5.led.on();
```

Node-RED上で行った作業は、「ノードの配置」、「obniz ID の設定」、「上記の3行のコードのコピペ（各行の先頭部分は書きかえ）」です。それぞれ、関連する画面の様子を掲載します。

このようにノードを配置しました。
![Node-REDのフロー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d5d0e9ca-d096-60c8-e5e7-f22f6c45b3ec.jpeg)

以下のように、obniz ID の設定とデバイス種別の選択を行います。
![obnizノードの設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/05997cdd-defb-4124-0391-148eaa8d6fac.jpeg)

そして、コードは以下のようにしました。
![Node-RED.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ffc74dab-79e9-7751-91cc-be66902d5c5f.jpeg)

そしてデプロイを行い、動作させてみた結果の写真は、以下のとおりです。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">意図通りになったかな。<a href="https://twitter.com/hashtag/obnizOS?src=hash&amp;ref_src=twsrc%5Etfw">#obnizOS</a> <a href="https://twitter.com/hashtag/M5StickC?src=hash&amp;ref_src=twsrc%5Etfw">#M5StickC</a> <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/9OaivNXhDO">pic.twitter.com/9OaivNXhDO</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1335592755561549824?ref_src=twsrc%5Etfw">December 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

（使い方がこれで合っているか、少し不安・・・）

#### 連続動作させるパターンを試す
それでは、まずは以下にある 2つのうち、上のほうのノード（obniz repeat）を試します。

![ノード2つ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dd5675fd-e1af-aa33-de28-6b0e0bb4f73e.jpeg)

お試し用に、ブロックプログラムでこんなプログラムを作ってみました。

![ブロックプログラム2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1bafb930-2b66-95a7-ac52-239ef3c09487.jpeg)

こちらからコードを生成してみます。
おおよそ110行ほどのコードが生成されました。

その中で以下から必要な部分を取り出せば良さそうです。

```html
    <script>
      $("#bploading").text("RUNNING...");
      (async function () {
        var m5, a_x;

        m5 = new Obniz.M5StickC("????-????");
        await m5.connectWait();
        await m5.setupIMUWait("SH200Q");
        while (true) {
          await ObnizUI.Util.wait(0);
          m5.display.clear();
          m5.led.off();
          a_x = (await m5.accelerationWait()).x;
          console.log(a_x);
          if (a_x > 1) {
            m5.display.print(a_x);
            m5.led.on();
          }
          await ObnizUI.Util.wait(500);
        }
      })();
    </script>
```

以下の部分を一部変更したり削除したりして利用すれば良さそうです。

```JavaScript
var m5, a_x;

await m5.setupIMUWait("SH200Q");

m5.display.clear();
m5.led.off();
a_x = (await m5.accelerationWait()).x;
if (a_x > 1) {
  m5.display.print(a_x);
  m5.led.on();
}
```

Node-RED上で、以下のように 1つだけノードを配置して試しました。

![Node-RED2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/36be0c18-944d-37f2-324e-69594c33b391.jpeg)

上の事例で obniz ID を指定したりしていた画面では、「単発で動作させるパターン」の場合と異なるのが「初期化処理の部分」です。

![obnizの設定2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8de7524c-cc61-a95d-9afe-a365d4947666.jpeg)

そして、連続動作させるコードの記載等は以下の内容に。

![Node-REDでコードを設定2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4c17579b-30f6-88a1-0181-0605963947d5.jpeg)

これで、実際に動かしてみた時の様子はこちらです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">とりあえずブロックプログラムから生成したコードを Node-REDのノードに移植、というやり方のものが動いた！<br><br>まだ色々検証したいところが残ってはいるけど。<a href="https://twitter.com/hashtag/obnizOS?src=hash&amp;ref_src=twsrc%5Etfw">#obnizOS</a> <a href="https://twitter.com/hashtag/M5StickC?src=hash&amp;ref_src=twsrc%5Etfw">#M5StickC</a> <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/LAUaYCMOQ8">pic.twitter.com/LAUaYCMOQ8</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1335608608118120449?ref_src=twsrc%5Etfw">December 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

テキストのプログラムを自分では書かなかったものの、JavaScript のソースの内容が分かったからこそ上記の手順をできた感じもして、もう少し試行錯誤してみたいところです。

## まとめ
今回、Node-RED上で obniz用のノードを使った際、そこに記載するコードを obniz のブロックプログラムから生成してみる、ということをやってみました。

今回、「とりあえずのお試し」という感じでしたが、もっと複雑なブロックプログラムを組んだ場合を試してみたり、上記を分かりやすくできないかなど、試行錯誤してみたいと思います。

そもそも、上記の Node-RED上で指定した内容が合っているのか自体、それも確認したいところです・・・。