Node-REDで1からWebAPIを作るまでの最短チュートリアル


## Node-REDとは

APIやオンラインサービス、デバイスなどの機能を繋げてアプリケーションを作成していくオープンソースのプラットフォーム。ブラウザ上のエディタのマウス操作によって処理フローを作成することができる。

![node-red1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/e4f6b89a-e089-9414-2563-a6db09fa0293.png)

## この記事の対象者

- Node-REDの使い方を1から学びたい人。
- 他のデバイスやシステムからRaspberryPiのGPIOを簡単に制御したい人。
- IoTデバイスの開発を考えている人。

## 今回の学習に必要なもの

- Rapsberry Pi（zero系でも可能）
- OSが入ったmicroSDカード
- ジャンパ線
- LED
- ブレッドボード


## Node-REDのインストール＆起動

1. Node-REDの導入

        $ sudo apt install nodered
        $ update-nodejs-and-nodered 

2. GPIO操作用のPythonライブラリの導入

        sudo apt update && sudo apt install python-rpi.gpio

3. Node-REDの起動

        sudo node-red-start

    ※本来Node-REDはsudoが不要ですが、今回はGPIOの操作に権限が必須のためsudoで起動します。


4. ブラウザで以下のURLを開く

        http://{実機のIPアドレス}:1880

   - Node-RED編集画面

   ![node-red2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/e2763e1a-bb2d-5567-5605-870001bad320.png)



## Node-REDの基本操作確認


### ノード

Node-REDフロー上にある処理を指す。ワイヤーで複数のノードを結合することで連続的な処理を指示できる。


 ![Screen Shot 2022-10-27 at 23.25.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/592f968b-cb09-f2d9-fc73-4e2af3486f97.png)


### 基本的な作成手順

  1. Node-REDをブラウザで開く。
  2. パレットからノードを取り出し、エディタ上に並べる。
  3. ノード同士をワイヤーで繋げる。
  4. デプロイボタンを押す。


## 処理フローの作成

1. 左側のノード一覧の「input」から「inject」を取り出し、フロー上に設置する。

![node-red3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/3e3dc003-66d8-6db9-cabf-b3745989633d.png)



2. 設置した「inject」ノードをダブルクリックし、以下のようにプロパティを変更後Doneを押下する。


  |項目|設定内容|
  |--|--|
  |Payload|String|
  |値|Node_RED TEST|

![node-red4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/330d60bd-abb2-54bb-b6c7-1f5dd7a7caa1.png)


![node-red5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/f00f93ab-ce6a-4b08-0e33-efa0983d2168.png)


3. ノード一覧の「output」から「debug」ノードを取り出し、フロー上に設置する。

![node-red6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/b867cb2f-3f2f-30b4-ccd9-f954e85663d8.png)


4. 設置した２つのノードをLinkノードで接続する。

   ![node-red7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/ab2eb317-f901-f252-9582-64deeec6c164.png)


5. 右上の「Deploy」ボタンを押下し、「Successsfully deployed」が表示されることを確認する。

   ![node-red8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/c0e37d8f-55b0-fb8d-e3c4-5d74e3baefdf.png)


6. 設置した「inject」ノードの左端をクリックすると、デバッグウィンドウに「inject」から送られた値が表示される。

   ※デバッグウィンドウが表示されていない場合はエディタ右端から展開する。

   ![node-red_debug.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/4d86acdd-9eb6-d4fc-b186-567e817afd45.png)


### 解説

- 今回「inject」ノードに設定した値は、文字列型の値としてmsg.Payloadに格納されている。このノードは入力として働くため、変数の値は接続した先のノードへ送られる。

  ![node-red9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/99da1154-01c2-db1d-0809-a9c09a120825.png)


- デフォルトのdebugノードはmsg.Payloadを表示するようになっており、入力から送られた値がデバッグウィンドウに表示される。

  ![node-red11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/c4c62b41-3d74-7302-604e-05d6be6b8e5c.png)


## GPIO制御

### injectノードからLEDを点灯・消灯する。

- 以下のように電子部品を接続しておく。

![kairo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/d92160b2-f5e3-d40b-2b5e-b71271eb5bd4.png)


![kairo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/04f78687-8711-eca4-f424-0c76e65f8ac5.png)


1. ３つのノードを以下のように設置し、デプロイする。

   ![node-red12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/bd4c600a-539a-8e39-6982-960359a2d8aa.png)



- injectノード

  |項目|設定内容|
  |--|--|
  |Payload|Boolean|
  |値|Trueまたはfalse|

![node-red13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/82414ac3-6131-c379-eb3f-aa3c6dff315f.png)


- RPI-GPIO（output）ノード

  |項目|設定内容|
  |--|--|
  |Pin|GPIO04 - 7|
  |Type|Digital output|

![node-red14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/7d4a19bc-35ce-e0b8-f25c-60c05ead1cb1.png)




2. 「true」側のinjectノードをクリックすると、GPIOに接続されたLEDが点灯されることを確認する。

    

### GPIOから入力を検知する

- 以下のように電子部品を接続しておく。

  ![kairo3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/39bcdcd2-0b87-528d-0f54-ff270a5e0ed0.png)


1. ２つのノードを以下のように設置し、デプロイする。


![node-red15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/e47a84b1-8569-8e9a-2d8a-eb71875e14d1.png)



- RPI-GPIO（input）ノード

  |項目|設定内容|
  |--|--|
  |Pin|GPIO08 - 14|
  |Register|pulldown|



![node-red16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/419463ca-3840-cb89-4f37-878176e37f2f.png)


2. スイッチを押下しGPIOのピンに入力すると、デバッグウィンドウに値が表示されることを確認する。

    

   ![node-red17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/fb3d9e1c-d569-98df-c177-408744ec3c08.png)


## WebAPI化

WebAPIからNode-REDを呼び出し、メッセージを返す処理を作ります。

1. ノードを以下のように設置し、デプロイする。

   ![node-red18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/f9689dd7-39b1-196f-84c1-610f6ed006dd.png)


- httpノード

  ![node-red19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/562010d9-a503-01c7-cd22-a513bb7053ef.png)


  | 項目   | 設定内容 |
  | ------ | -------- |
  | Method | GET      |
  | URL    | /test    |



- functionノード

  ![node-red20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/63330f17-4fef-7fee-dd64-4ae48e923b44.png)


コード

```function
msg.payload = "テスト";
return msg;
```



- http responseノード

  設定不要（デフォルトでmsg.payloadを返すようになっているため）。



2. ブラウザで以下のURLを開く。

   ```
    http://{実機のIPアドレス}:1880/test
   ```

functionノードで設定した「テスト」が表示されたら成功。


   ![browser1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/b96ac060-ddc9-5ead-9f66-42819ee3c253.png)



### （応用編）WebAPIでLEDを制御する

1. ノードを以下のように設置し、デプロイする。

![node-red21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/adde2353-4ce0-7214-a765-1949adbdba8e.png)


- httpノード

  | 項目   | 設定内容  |
  | ------ | --------- |
  | Method | GET       |
  | URL    | /onと/off |

- functionノード

ONメッセージ

```function
msg.payload = "ON"
return msg;
```

OFFメッセージ

```function
msg.payload = "OFF"
return msg;
```



true返却

```function
msg.payload = true
return msg;
```

false返却

```function
msg.payload = false
return msg;
```



- RPI-GPIO（output）ノード

  | 項目 | 設定内容       |
  | ---- | -------------- |
  | Pin  | GPIO04 - 7     |
  | Type | Digital output |

- http responseノード

  設定不要



2. ブラウザで以下のURLを開く。

   - ONのパターン

   ```
    http://{実機のIPアドレス}:1880/on
   ```

   「ON」が表示され、LEDが点灯する。

   ![node-red22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/ada1d35b-4598-1e7a-3cc0-8c060a3b01ae.png)


   - OFFのパターン

   ```
    http://{実機のIPアドレス}:1880/off
   ```

   「OFF」が表示され、LEDが消灯する。

   ![node-red23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/8b261992-96ae-13e1-7f14-804507bb8a28.png)


   

## （参考）Node-REDの追加ノード

- node-red-contrib-alexa-home-skill

  Alexaと連携が可能になるノード。

  [Alexaスマートホームスキル『Node-RED』を使ってみた]: https://chasuke.com/alexa_nodered1/

  ![node-red24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/24fac659-a2f8-710e-0e7e-bf983e2d5f0c.png)


- node-red-contrib-slack

  slackと連携が可能になるノード。

  [node-redにSlackをつなげてみる]: https://qiita.com/KURO-BLACK/items/0cb3fac16c26876e5d00

  ![node-red25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27488/f55ac31c-a2d3-ed73-4ee5-b91e2f90b879.png)