7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Node-REDAdvent Calendar 2021

Day 15

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

Last updated at Posted at 2021-12-14

さくらインターネットの新しいサービスであるHacobuneを触ってみたいと思います。今回はnode-redの環境を構築してIoT用のwebインターフェースのプロトタイプを作ってみます。

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

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

image.png

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

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

環境が構築されているか確認します。
プロジェクト画面でアプリケーションのステータスを確認して稼働中になっていれば、
node-redの環境が立ち上がっていますので、外部公開しているドメインにアクセスします。
image.png
node-redの環境が構築されていますので、ここでIoT用のwebUIインターフェースを作成していきます。
入力した数値をMQTTを送信する簡易的なwebページを作成します。
まずはhtpinノードとテンプレートノードでwebページのトップを作成します。
フォームで入力した値をnode-redで受信してMQTTとして送信する部分を作成します。
image.png
webページのサンプルを示しますので、テンプレートノードに入力して使用してください。

<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ノードに記入して使用してください。

//入力値を変数として抽出する
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のテスト環境を使用してください。
設定が終わったらnode-redをデプロイします。

UI用のトップページにアクセスします。
さくらのhacobuneで設定したドメインにnode-redで設定したパスを追加してアクセスします。
アクセス例 https://example.c1.hacobuneapp.com/test/top
少しかっこ悪いですが入力フォームが表示されます
image.png
今回は受信は行いませんが、MQTTをデバイスで受信することができれば、IoT用のインターフェースとして利用することができると思います。
デバイスからの受信をしたいときにはこちらを参考にしてみてください。

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

参考情報
さくらインターネットのHacobuneでNode-REDの公式イメージを動かしてみる。
さくらインターネットのHacobuneを触ってみる

7
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?