Node-RED でブラウザに 「大石泉すき」

この記事は [「大石泉すき」アドベントカレンダー](https://qiita.com/advent-calendar/2019/ohishi-izumi-suki) 10日目の記事です。
フローベースドプログラミングツール [Node-RED](https://nodered.jp/) で
「大石泉すき」をブラウザで表示したいです。
idol++もしたいと思います。

# やること
なるべくノンコーディングで
ブラウザに「大石泉すき」を表示します。

![020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/9e313f4c-91a0-ed2b-8db7-a8a8a8b0d953.png)
こんな感じです。


[応用編 「大石泉すき」を好きな数表示 (idol++)](#応用編-好きな数だけ大石泉すきを表示-idol)(ページ内リンク)では、好きな回数「大石泉すき」を表示します。
![040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/2ec04c9b-8945-626f-4f58-6611cab026f7.png)


## 使用環境
- OS : Windows 10 Home (1809 ,OS ビルド: 17763.864 )
- [Node.js](https://nodejs.org/ja/):  v12.13.1
- Node-RED:v1.0.3

# 基本編「大石泉すき」を１つ表示
## 仕様
- URL にアクセスして、「大石泉すき」と表示します

## フロー
![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/a11e9894-abb8-dfc2-361d-52546d1a0c06.png)

## 実行と結果
ブラウザで アクセスします。

```
http://localhost:1880/love
```
![020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/9e313f4c-91a0-ed2b-8db7-a8a8a8b0d953.png)

## プログラミング
各ノードを接続後、ノードを適切に設定します。

1. `http in` ノードをダブルクリックし、 URL 欄に **/love** と入力します。
![500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/9dae7430-3d94-c040-7213-4c9d905ce36a.png)


2.  `template` ノードをダブルクリックし、テンプレート 欄に **大石泉すき** と入力します。もともと入力されている "{{payload}}" は削除します。

![510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/3139e2a0-103f-6fde-863c-98f354eb74af.png)

## ソースコード

下記ソースコードを、Node-RED の「三」メニュー 内、 「読み込み」で表示される
「フローをクリップボードから読み込みダイアログ」にコピペすると
お手元の Node-RED で 「大石泉すき」が可能になります。

```
[{"id":"b1ec6763.a56ed8","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"bc1ab3d0.d2682","type":"http in","z":"b1ec6763.a56ed8","name":"","url":"/love","method":"get","upload":false,"swaggerDoc":"","x":100,"y":40,"wires":[["6752026.6da1bfc"]]},{"id":"6752026.6da1bfc","type":"template","z":"b1ec6763.a56ed8","name":"大石泉すき","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"大石泉すき","output":"str","x":490,"y":40,"wires":[["a6c51039.aef8e"]]},{"id":"a6c51039.aef8e","type":"http response","z":"b1ec6763.a56ed8","name":"","statusCode":"","headers":{},"x":650,"y":40,"wires":[]},{"id":"e7ce0c8f.150bb","type":"comment","z":"b1ec6763.a56ed8","name":"ブラウザに返す","info":"","x":700,"y":80,"wires":[]},{"id":"f85e4d72.b284a","type":"comment","z":"b1ec6763.a56ed8","name":"入り口 URL","info":"","x":90,"y":80,"wires":[]}]
```

**ソースコード読み込みメニュー**
![630.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/68b0fa93-f32f-542a-5a0e-775bc0e29adc.png)
**フローをクリップボードから読み込みダイアログ**
![640.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/d8cb47ef-290f-0eac-9342-ecb5ef3f737c.png)


# 環境 のセットアップ
## node.js のインストール
1. [Node.js](https://nodejs.org/ja/) 公式からインストーラをダウンロード
2. インストーラ実行
3. 動作確認

### 公式からインストーラをダウンロード
TOP ページにダウンロードリンクがあるのでクリックしてダウンロードします

### インストーラ実行
**Welcome**
[Next] クリック
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/0cf5af42-be7c-63b8-69aa-65c0dee5485e.png)

**End-User License Agreement**
チェックボックスにチェックして、[Next] クリック
![110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/865af1ed-1af9-3f45-9701-efaeb2fd2277.png)

**Destination Folder**
任意のフォルダを指定して、[Next] クリック
![120.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/7b32728b-05e3-51e6-b5a8-b44240805fdd.png)

**Custom Setup**
基本、そのまま [Next] クリック
![130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/6fc658d7-fcf0-eff8-93f5-79004d601867.png)

**Tools for Native Modules**
チェックせずに、[Next] クリック
![140.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/15a16be8-748d-01c0-c67a-c35b6cfdd2a6.png)

**Ready to install Node.js**
覚悟を決めて [Install] をクリック
![150.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/efa9b889-3518-54c0-624c-42c4ed178844.png)

**Installing Node.js & Completed the Node.js Setup Wizard**
しばらく待って、`Completed` ダイアログが表示されたら [Finish] クリック
![160.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/c903f803-8970-dd3f-fbdf-1b2e42fa6f6d.png)
![170.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/0498d3ac-20d9-237d-a653-0fe427492849.png)

### 動作確認
コマンドプロンプトを立ち上げて `node` コマンドが実行できることを確認します。

```
node -v
```
インストールした node.js のバージョンが表示されれば成功です。
![210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/7d144832-bb53-89dc-1e78-db011942d009.png)


## Node-RED のインストールと実行
### インストール
[公式(npmによってインストールする)](https://nodered.jp/docs/getting-started/local)の手順に従いインストールします。
コマンドプロンプトにて、下記コマンドを入力します。

```
npm install -g --unsafe-perm node-red
```
コンソールがピロピロするので、終わるまで待ちましょう。

### 実行
[公式(Windowsで実行する)](https://nodered.jp/docs/getting-started/windows#windows%E3%81%A7%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)の手順に従い、下記コマンドを入力します。

```
node-red
```
![220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/b7096b34-e454-c64e-335d-27a5239744d3.png)
※このプロンプトはこのままにしておく

#### セキュリティの重要な警告が表示された場合
チェックボックスを適切に設定して [アクセスを許可する]クリック
![230.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/ee180bec-e5c5-82bb-843c-885088efffb5.png)

### Node-RED エディタの表示
[公式(はじめてのフロー)](https://nodered.jp/docs/tutorials/first-flow)の手順に従いブラウザで以下のURLにアクセス

```
http://localhost:1880/
```
フローエディターが表示されます。
![300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/ab4a9df3-4fd3-ac43-7570-53beb11aa2f1.png)

## Node-RED ノード概要
#### http in
URL のパスを定義するノードです。
対応するWEBメソッドの設定も可能です。

![410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/2d0e1194-8bb7-64ee-3cd8-8f7508db11cd.png)

#### http Response
処理の結果をブラウザに返すノードです。

![420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/3f364b31-ab7c-ee16-2279-4b99167e3b0e.png)

#### template
View を整形するノードです。
![430.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/8dfe7a72-2ae6-3f64-735a-6f1e0973a48b.png)

#### change 
変数の代入処理を行うノードです。
![440.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/495c3ab2-2fb7-2431-7498-3a23cc58f8c1.png)

#### switch 
if を制御するノードです。
![450.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/dfd37efd-aacf-37ab-22e2-88e04d33b51f.png)

#### function 
任意の javascript を記述できるノードです。
![460.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/e58235bc-139d-c49f-e31e-add4a81af817.png)

# 応用編 好きな数だけ「大石泉すき」を表示 (idol++)
## 仕様
- URL クエリーパラメータ `izumi`に指定された数、「大石泉すき」と表示します
- `izumi` パラメータが無い場合は、１つだけ「大石泉すき」と表示します

## フロー
![030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/f1f5d40e-282a-9121-2ad2-acd36822e2be.png)

## 実行と結果
ブラウザで アクセスします。
この例では、２０回「大石泉すき」です。

```
http://localhost:1880/love?izumi=20
```
![040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/b38a9007-ccb6-ba97-703c-e0d63f882747.png)


## プログラミング

1. `izumi` クエリパラメータが指定されているかどうかを Switch ノードで判定し、その後のフロー先を切り替えます。
(パラメータが指定されていない場合は[基本編](#基本編大石泉すきを１つ表示)のフローに流れます。)
![710.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/c4e30ab0-e6eb-f698-4345-0e6b6495baae.png)


2. `izumi` クエリパラメータが指定されている場合は、後続のループ処理のための変数を初期化します。
 - **idol**：ループカウンタ
![720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/74daa716-cc9d-aca1-b94c-9ba276b31378.png)
 - **izumi**：ループ終了判定値
![730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/7403f9f5-3519-bd65-7ea9-76f383b3a486.png)
 - **payload**：**大石泉すき** 格納 
![740.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/b670ea10-3980-ef42-67cb-e762c9e34092.png)


3. `idol++` しながら、指定された回数分「大石泉すき」を文字列結合します。
 - `payload` 変数に **大石泉すき** を追加した文字列を、`payload` 変数に代入します。  
![750.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/67b3f08f-70ec-f35d-b4c9-2935128ef10a.png)
 - `idol` 変数をインクリメントする。(みんな大好き idol++)
![760.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/cd9b056c-af8b-4552-526d-fc97c086b434.png)
 - `idol` 変数が、`izumi`変数の値と異なる間、ループして **大石泉すき** を追加し続ける
![770.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/cc8798fb-b26b-c7e2-ca9e-f7b52c69ceab.png)


4. 最後に、ループ内で作成した「大石泉すき」をブラウザに返します。


## ソースコード
```
[{"id":"22a0265c.ef9e3a","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"4bab2f49.7a2d6","type":"http in","z":"22a0265c.ef9e3a","name":"","url":"/love","method":"get","upload":false,"swaggerDoc":"","x":100,"y":60,"wires":[["6304e723.4eec68"]]},{"id":"969b8bff.8ad168","type":"http response","z":"22a0265c.ef9e3a","name":"","statusCode":"","headers":{},"x":650,"y":60,"wires":[]},{"id":"3b9123ce.08425c","type":"template","z":"22a0265c.ef9e3a","name":"大石泉すき","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"大石泉すき","output":"str","x":490,"y":60,"wires":[["969b8bff.8ad168"]]},{"id":"6304e723.4eec68","type":"switch","z":"22a0265c.ef9e3a","name":"Query パラメータ確認","property":"payload.izumi","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":280,"y":60,"wires":[["3b9123ce.08425c"],["22bfa338.e36dec"]]},{"id":"22bfa338.e36dec","type":"change","z":"22a0265c.ef9e3a","name":"","rules":[{"t":"set","p":"idol","pt":"msg","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":250,"y":160,"wires":[["cff06288.b672"]]},{"id":"d1b4cd20.4d9f","type":"function","z":"22a0265c.ef9e3a","name":"idol++","func":"msg.idol++;\nreturn msg;","outputs":1,"noerr":0,"x":490,"y":240,"wires":[["5a07db52.bf9214"]]},{"id":"5a07db52.bf9214","type":"switch","z":"22a0265c.ef9e3a","name":"","property":"idol","propertyType":"msg","rules":[{"t":"neq","v":"izumi","vt":"msg"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":610,"y":240,"wires":[["751cc275.f2e57c"],["b414b5a3.04a728"]]},{"id":"cff06288.b672","type":"change","z":"22a0265c.ef9e3a","name":"","rules":[{"t":"set","p":"izumi","pt":"msg","to":"payload.izumi","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":220,"wires":[["8058862b.de91e8"]]},{"id":"8058862b.de91e8","type":"change","z":"22a0265c.ef9e3a","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":280,"wires":[["751cc275.f2e57c"]]},{"id":"751cc275.f2e57c","type":"template","z":"22a0265c.ef9e3a","name":"大石泉すき 追加","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{payload}}大石泉すき","output":"str","x":500,"y":160,"wires":[["d1b4cd20.4d9f"]]},{"id":"82f12aef.e736e8","type":"comment","z":"22a0265c.ef9e3a","name":"変数の初期化","info":"","x":250,"y":320,"wires":[]},{"id":"e7b9f020.c10ce","type":"comment","z":"22a0265c.ef9e3a","name":"大石泉を溜める","info":"","x":520,"y":320,"wires":[]},{"id":"b414b5a3.04a728","type":"http response","z":"22a0265c.ef9e3a","name":"","statusCode":"","headers":{},"x":770,"y":240,"wires":[]},{"id":"4f255a39.c14724","type":"comment","z":"22a0265c.ef9e3a","name":"入り口 URL","info":"","x":90,"y":100,"wires":[]},{"id":"9dcc56ce.5dbd58","type":"comment","z":"22a0265c.ef9e3a","name":"ブラウザに返す","info":"","x":700,"y":100,"wires":[]},{"id":"c617b42a.378b58","type":"comment","z":"22a0265c.ef9e3a","name":"ブラウザに返す","info":"","x":740,"y":320,"wires":[]}]
```
# 番外編 IBM Cloud で実行
[IBM Cloud](https://cloud.ibm.com/login) では、クラウド環境で実行する Node-RED を簡単に準備することができるので
インターネットにつながるデバイスであれば、どこでも「大石泉すき」を表示できるようになります。

スマホブラウザでも「大石泉すき」！！！
![820.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311258/5aad89cf-08d3-9df5-4bc6-37820e7d5470.png)