さくらのHacobuneとnode-redを利用してIoT用のwebUIのプロトタイプ


さくらインターネットの新しいサービスである[Hacobune](https://www.sakura.ad.jp/information/announcements/2021/08/12/1968207782/)を触ってみたいと思います。今回はnode-redの環境を構築してIoT用のwebインターフェースのプロトタイプを作ってみます。

Hacobuneとはさくらのクラウドで使用できるPaaS型クラウドサービスです。使ってみた感じとしてはクラウドで使用できるdockerというイメージでしょうか（あまり詳しくない）。
Hacobuneは2021年12月12日現在βテストの段階ですが、さくらのクラウドのアカウントがあれば、だれでも使用できるようになっているようです。

では早速環境を構築していきます。
さくらのコンソールにログインしてさくらのクラウドの中に入っていきます。
さくらのクラウドのコンソールに入っていくと、Hacobuneが選択できるようになっていますので、入っていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/8f2088a2-4932-afe4-5d34-200124dad2a7.png)

プロジェクトを新規作成して、名前を付けます。
作成したプロジェクトの中でアプリケーションを新規作成します。

ここから、アプリケーション作成の手順になります。
アプリケーション名をつけて、デプロイ方法でDockerを選択します。
Dockerイメージには、nodered/node-red:latestを入力します。
ポートはnode-redのデフォルトである1880を使用します。
外部公開を有効にして、任意のサブドメインとドメインを選択します。
必要であればBasic認証を有効にして、追加ボタンを押してユーザー名とパスワードを入力します。
（セキュリティ的には有効にするほうが無難だと思います）
作成ボタンを押してnode-redの環境を構築します。

環境が構築されているか確認します。
プロジェクト画面でアプリケーションのステータスを確認して稼働中になっていれば、
node-redの環境が立ち上がっていますので、外部公開しているドメインにアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/0622310d-8c5f-fe49-34a7-15734e4b4567.png)
node-redの環境が構築されていますので、ここでIoT用のwebUIインターフェースを作成していきます。
入力した数値をMQTTを送信する簡易的なwebページを作成します。
まずはhtpinノードとテンプレートノードでwebページのトップを作成します。
フォームで入力した値をnode-redで受信してMQTTとして送信する部分を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/46278b8b-265a-435d-4d10-1fb14ca885b6.png)
webページのサンプルを示しますので、テンプレートノードに入力して使用してください。

```html
<html>
  <head>
    <title>
      IoTinterface
    </title>
    <meta charset=utf-8>
  </head>
  <body>
    <h1><strong>コマンドの送信</strong></h1>
    <h3><p>送信する時間を指定します</p></h3>
    <h2>
      <form action="/test/pub" method="POST">
        <input type="number" name="testnumber"  min="0" max="90" style="width:50%;font-size:30px;" >
        <br>
        <input type="submit" id="pub_button" value="決定" style="width:40%;font-size:15px;">
        </div>
        </form>
    </h2>
  </body>
</html>
```
このサンプルには数字の入力フォームを用意していますので、
入力値を取り出して、MQTT用のpayloadを作成します。
functionノードに記入して使用してください。

```javascript
//入力値を変数として抽出する
var str = msg.payload.testnumber

//文字列を数字に変更する
var t_number = Number( str );

//payloadを作成する
msg.payload = {
    t_number
}

return msg;
```

ここまで出来たらhttpからの入力のためのノードを用意します。
http in ノードをフローに配置します。
topページ用のhttpノードの設定は、メソッドをGET、パスを/test/topにします。


下層ページ用のhttpノードは
メソッドをPOST、パスを/test/pubにします。

MQTT送信用のノードを用意します。
受信テスト用のMQTT受信ノードを用意しておいてもいいかもしれません。

MQTT用のブローカーサーバーは用意する必要があります。
用意するのが面倒な人は[mqtt.uko.jp](https://mqtt.uko.jp/)のテスト環境を使用してください。
設定が終わったらnode-redをデプロイします。

UI用のトップページにアクセスします。
さくらのhacobuneで設定したドメインにnode-redで設定したパスを追加してアクセスします。
アクセス例 https://example.c1.hacobuneapp.com/test/top
少しかっこ悪いですが入力フォームが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/9ac3bdee-520f-2ad6-ef49-d929c20787e9.png)
今回は受信は行いませんが、MQTTをデバイスで受信することができれば、IoT用のインターフェースとして利用することができると思います。
デバイスからの受信をしたいときには[こちら](https://qiita.com/shinfrom/items/a03c1055eaa89d270a0e)を参考にしてみてください。

結果
さくらのhacobuneを利用して、IoT用のwebインターフェースのサンプルを作成することができました。
httpsで接続できますので、LINEの開発にも使用できるかと考え接続テストを行いましたが、そのままの状態では接続することができませんでした。
~~何か使用できる方法があるのか調べてみようと思います。~~
hacobuneのbasic認証機能を無効にするとLINEとの通信を行うことができました。
node-redを使用するときにノーガード戦法をとるわけにいかないので、node-red側でユーザー認証を行っておく必要があると思います。

参考情報
[さくらインターネットのHacobuneでNode-REDの公式イメージを動かしてみる。](https://qiita.com/YuukiNishida/items/38f8cc2cf9076da05d5c)
[さくらインターネットのHacobuneを触ってみる](https://qiita.com/Yoshihiro-Hirose/items/7a3107fa3b0bd39603fe)