【この情報は使用不可となりました】初心者向けNode-REDハンズオン資料

これはNode-RED UG Tokai vol.2の初心者向け**Node-RED**ハンズオンで使用する資料となります。

<font color="Red">**※2022.06.26 Katacodaのサービスがクローズしましたのでこの内容はすでに使用できません。**</font>
<font color="Red">**2021.07.12 Node-REDのバージョンアップなどの関係で内容を修正しました。**</font>

内容は
1時間限定の**Node-RED**の動作環境を構築したあと、**Node-RED**の簡単なフローを作成・動作確認を行います。
すでに**Node-RED**を使用されている方はこの内容では物足りないと思います。

環境構築に関しては以下のサイトが詳しいです。

**参考**

https://www.1ft-seabass.jp/memo/2019/09/10/katacoda-node-red-playground/

# このワークショップに必要となるもの

* **PC**　…　モダンなブラウザがインストールされたものを用意していただければと思います。（Chromebookでの動作も確認しております）
* **SNSアカウント**　…　GitHub、Linkedin、Twitter、Googleのいずれかのアカウントが必要となります。持っていない場合にはメールアドレスでサービスへ登録していただくことになります。

# このハンズオンでやること（所要時間）
 
- 動作時間1時間限定の**Node-RED**の環境構築 （所要時間15分程度）
- **Node-RED**を使ってみよう（所要時間30分程度）
  - **Node-RED**のフローエディタの画面説明
  - 実行までの流れを確認
  - HTTPサーバを作成してみる
  - HTTPクライアントでWebサービスへアクセスしてみる

# 動作時間**1時間限定**の**Node-RED**の環境構築 （所要時間15分程度）

## **Node-RED**の実行環境

**Node-RED**はいろいろな環境で動作することができます。

* PC（Windows、OSX、Linuxなど）
* 仮想環境（Dockerなど）
* クラウドサービス（IBM Cloud、AWS、GCPなど）
* ワンボードコンピューター（RaspberryPiなど） 

ただし、今回のハンズオン使用する**Node-RED**の動作環境は1時間限定の動作環境になります。
これはPCのローカル環境に構築するのではなく<i><u>**Katacoda**</u></i>というクラウドサービス上で動作するものになります。

## **Katacoda**とは

![22709995.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/917f165d-e4e2-e5cf-516c-300244335400.png)

**Katacoda**は1時間の使い切りの環境でk8sやDockerのようなコンテナ技術やサーバー系テクノロジーを手軽に学べるクラウドサービスになります。
<u><span style="color: #ff0000">何度も言いますが、1時間経つとサーバーが突然消えてしまうので注意は必要です。</span></u>

https://www.katacoda.com/

**Katacoda**ドキュメントにも以下のように記載されています。

>トレーニングコース中、学生は自分専用に作成されたホスト環境を使用します。この環境は、システムの他のユーザーと共有されません。各環境は1時間のセッションに制限されており、ユーザーがページをリロードすると新しい環境が作成されます。これは、有料のトレーニングプラットフォームでカスタマイズできます。詳細については、メールでお問い合わせください。

## **Katacoda**で**Node-RED**環境を構築する

ブラウザを使用して下記のリンクへアクセスを行います。

https://www.katacoda.com/1ft-seabass/scenarios/node-red-playground

すると以下のような画面が表示されます。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/807618d4-872f-b86c-db8f-06a558a8d03b.png)

すでに、**Katacoda**にアクセスし、ログインしていた場合にはこの表示はスキップされるので次の作業を進めてください。
この画面が表示されたら、今回使用するSNSのアカウントまたはメールアドレスを使用して認証を行います。

このドキュメントではGitHubを使用して作業を進めていくことにします。個人ごとに使用するアカウントを使ってログインを行ってください。
クリックするのはこちらのボタンになります。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/8a656969-e5c4-6deb-55be-aac462aba77a.png)


SNSアカウントの認証が完了すると以下のように、**Katacoda**への接続が行われます。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/a00f8484-21e8-00a3-d0ba-199377e005f9.png)

接続が完了するとクラウドサービス上のOSが起動し、自動的に**Node-RED**環境を構築していきます。
流れていくログを確認すると**Node-RED**に必要となるNode.jsやnpmのインストールなどが行われていることがわかります。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/35843612-ff50-6718-0e3a-54076a5f5fee.png)

終了するとコマンドプロンプトが表示されます。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/982752e0-8a60-975d-5b38-037c1b35e4d8.png)

拡大すると以下のようになっています。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/7a17dcf8-01dc-3ce4-6bdc-4129053ecd98.png)

入力待ち状態になっていれば処理は完了しています。これで**Node-RED**環境は構築完了です。

``Let's input node-red and click ENTER``と表示されていますが、今構築された**Node-RED**の環境にはパスワードがかかっているので、パスワードのメモを先に行っておきます。

画面内の以下の部分にパスワードの文字列が表示されているのでコピーを行っておきます。（パスワード文字列は起動する度に異なる文字列になっています）

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/abf8f27d-2dc6-a3bc-643b-6b7d994372c6.png)

コピーが終わったら、以下の様にコンソールに入力して**Node-RED**を起動します。

```terminal
$ node-red
```

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/f3c6c483-b0c2-a8f4-60b5-e8779d7b5405.png)

コマンドラインでの**Node-RED**実行後に

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/3e9e2d1e-3898-598a-9e7c-5eabdee9ae96.png)

以下の表示が行われていれば**Node-RED**が起動完了しています。

```terminal
[info] Server now running at http://127.0.0.1:1880/
```

ここまでで**Node-RED**の環境構築と起動が完了しました。

---
# **Node-RED**へログインする

続いては**Node-RED**環境へアクセスを行います。

方法は2つあります。

１）画面の左側にある``アクセスしてみよう``の部分にあるURLをクリックする

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4b4d9585-c990-20ac-3dee-54095aaeff8a.png)


２）画面右側のコンソールの上にある``Node-RED Open``のタブをクリックする

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/e1409668-cbd8-148a-eeb9-0156da9453d9.png)


上記いずれの方法でも**Node-RED**のページにアクセスすることができます。アクセスすると認証画面が表示されます。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/8ae38558-1707-26fb-a6ba-50b52ea3a248.png)


ユーザ名とパスワードの入力を求められるので

* ユーザ名：``admin``
* パスワード：``先程メモしておいたパスワード``

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/53ea416b-40ee-7471-c2df-999fd349a3dd.png)

すると、画面が読込中の画面となり…

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/0ada4034-95e1-1b07-7b25-cac5414189d7.png)

**Node-RED**のお馴染みの画面が表示されます。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/527354c1-99c9-b3bd-29f8-efba6af2265d.png)

無事に起動ができました。

# **Node-RED**を使ってみよう（所要時間30分程度）

# Node-REDのフローエディタの画面説明

**Node-RED**の画面の説明を行います。画面は大きく分けて3つの部分から構成されています。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4be22666-e330-efc4-b61a-86c240607f7e.png)


* （左側）パレット
* （真ん中）ワークスペース
* （右側）ノード情報ウィンドウ・デバックウィンドウなど（タブで切り替えができます）

パレットにあるノードをワークスペースに配置し、ノードの端子同士をつなぎ合わせることで処理を作っていくことになります。

# フローの作成・デプロイ・実行までの流れを確認

では、実行までの動作の流れを簡単に行ってみます。今回使用するのは``injectノード``と
``debugノード``となります。これらのノードは``共通カテゴリ``の中にあります。

パレットの中にある``injectノード``と

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/effeea19-6947-d386-84d8-3dfb980d86c5.png)

``debugノード``の場所を確認しておきます。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/bf15073c-2c19-2c55-2cf2-c6340147ef62.png)

そして、それらのノードをマウスを使用してそれぞれドラッグ＆ドロップします。
``injectノード``はドロップすると名称表示がタイムスタンプになりますが、問題ありません。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/c216a9a2-1f33-e244-7f2a-0bba5fb19c87.png)

``debugノード``も同様にドロップします。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/eb37d475-adce-04f8-3ab9-225a5fd8b34a.png)

ここまでできたら次はノードにある端子をつないでいきます。
ノードの端にある端子をマウスでクリックしながら操作し、接続するノードの端子につなぎます。
今回は``injectノード``の右の端子を操作して、``debugノード``の端子まで持っていきます。すると実線でノードが接続されます。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/822bbc47-39fb-7346-f51a-128f36e532df.png)

このフローは``injectノード``の左側の端子をクリックすると、現在のタイムスタンプを取得してJSON形式に格納して、後続のノード（今回は``debugノード``）送信します。
``debugノード``はデバッグメッセージ画面に送信されたJSONデータの中で指定したものを表示します。今回はタイムスタンプが表示されるようになっています。

簡単ですが、フローが出来上たので、画面右上の【デプロイ】ボタンをクリックして実行できる状態にします。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/41b234e3-f4ba-7cbb-0e34-2aff6773b3a2.png)

すると、不備がなければ画面上部に「デプロイが成功しました」と表示されます。このようにノードの配置など変更を行った場合には、必ず【デプロイ】ボタンクリックをしてから実行するようにしてください。デプロイが必要な場合には【デプロイ】ボタンが赤くなるのでそれを目安にしても良いと思います。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/c60993aa-d917-7816-bec1-81e3de6ffe21.png)

あとは実行するだけです。実行結果がわかるように画面一番右で【デバッグメッセージ】ボタンをクリックします。

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/bb4840bb-37ad-832c-9598-35ed2013a48d.png)

すると【デバッグメッセージ】のタブがアクティブになります。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/253d4e5b-0806-2fb7-35f9-326d5954f9bf.png)

これで事前準備は完了したので、フローの実行を行います。
作成したフローの``injectノード``の左側のボタンをクリックします。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4fdcfc67-6b37-3336-96d5-b0f567d5cd9e.png)

``inject処理を実行しました。タイムスタンプ``というメッセージが表示され、

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/d30436da-8e56-33ab-2ff0-28d298e69b41.png)

デバッグメッセージにタイムスタンプとなる数値が表示されます。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/447589d1-ea77-bd40-aa61-7c1307e4088c.png)


タイムスタンプがわかりにくい場合は以下のようにするとわかりやすく表示することができます。
``functionノード``を``injectノード``と``debugノード``の間に追加します。``functionノード``は内部にJavaScriptを直接書くことができるノードになります。
<span style="font-size: 80%">（``functionノード``を多用するとコードをあまり書かなくても処理を記述することができるという**Node-RED**の利点が少なくなってしまいますが）</span>

``機能カテゴリ``の中に``functionノード``があるので

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/e1ba870f-5a06-d9c3-77f4-c1d6f1d46c22.png)


それをクリックしながら``injectノード``と``debugノード``の間の実線の上にドロップします。ドロップの直前にはノード間の実線が破線になっているところ確認してください。こうすると、簡単にノード間に新しいノードを挟み込む事ができます。

実線の上にノードが乗ると破線になり

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/b9a70eb0-9f10-3357-c9f1-c652b771c8dd.png)


ドロップするとノード間に新しいノードが配置されます。

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/e65e0748-a92a-7226-15ce-bb07370a4a54.png)

では``functionノード``をダブルクリックしてプロパティ（コード）の変更を行っていきます。ノードをダブルクリックすると以下のようなプロパティ画面が表示されます。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/7000b1b4-d709-a8ff-aa62-16e31220ef35.png)

初期状態から以下のコードに変更を行います。
この処理は``injectノード``から送られてきたタイムスタンプを日付の文字列に変換して後続のノードに送信します。（``msg``というデータを使用して送信しています）

```javascript
// ペイロードから日付オブジェクトを生成
var date = new Date(msg.payload);
// 日付文字列に変換して再度ペイロードをセット
msg.payload = date.toString();
// 次のノードへmsgオブジェクトを返す
return msg;
```



コードの変更を行ったら、上にある【完了】ボタンをクリックして変更を反映します。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/3ed00fe5-2168-7287-e1bb-b607c7339efc.png)


あとは先程と同様に画面右上にある【デプロイ】ボタンをクリックします。

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4e08d484-f5c1-f370-64c4-33cb4e998e04.png)

デプロイが正常に完了したら、

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/7e782f7a-4333-6d8c-72b2-8635371f6b07.png)

先程と同様に実行してみます。

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/5141fbfb-bee9-deef-792a-36315bd06a34.png)

すると以下のような表示が出力されました。以前に比べるとわかりやすい日付になっているのがわかるかと思います。<span style="font-size: 80%">この時刻は現在時刻のUTCなので日本時間になっていませんので注意が必要です。</span>

![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/3288a751-ce6a-19bc-71c7-6e6d50f97301.png)


日本時間とは9時間の差があるのでその分を加えれば日本時間と同じ時刻になります。先程の``functionノード``のコードのプロパティを以下の様に変更すれば日本時間になります。

```javascript
// ペイロードから日付オブジェクトを生成
var date = new Date(msg.payload);
// 日付文字列に変換して再度ペイロードをセット
msg.payload = new Date((date.getTime() + (9 * 60 * 60 * 1000))).toLocaleString("ja-JP");
// 次のノードへmsgオブジェクトを返す
return msg;
```

変更を行ったら【完了】ボタンをクリックして実行を行ってください。

![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/0f2f51d1-00e1-b9df-fc0a-bf8e4d07dbb7.png)

すると以下のような表示がデバッグメッセージエリアに表示されます。

![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/6c9138d4-65e0-be67-5883-f8543089965d.png)


ちゃんと9時間加えられた値が時刻として表示されています。

ちなみに、実際には**Node-RED**を起動する前にOS側のタイムゾーンを変更することで、先程のコードでも日本時間を表示させることができます。
時間があるときに試してみてください。

![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/209f71ff-d4c5-d3f6-aa9a-c5f434d9aa78.png)

![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/f75ab0b5-388e-6252-f088-d1bc18960425.png)


**参考**
[https://qiita.com/koara-local/items/32b004c0bf80fd70777c:title]

これで**Node-RED**でのフロー作成と実行に関して一通り行いました。使用するノードによる違いがあるものの基本的にはこのような操作で処理を作成していくことになります。

# フローを保存する

**Katacoda**で作成したフローは1時間限定で終了してしまうので、作成したフローは保存しておきましょう。
先程のフローを保存してみます。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/3f54ee4c-1fea-0703-03da-5d0bbda7cc44.png)

保存するフローをマウスで選択します。選択肢ない場合にはアクティブになっているワークスペースのすべてのフローが対象になります。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/5f99834d-b933-4f6f-59b8-66ccd62f4e04.png)

選択した場合にはノードの枠が、オレンジ色の枠で囲まれます。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/1f5b5ffa-8ff1-8622-41d5-72a2135fb685.png)


あとは、右上にある【三】（ハンバーガーメニュー）をクリックして、【書き出し】を選択します。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/95c30553-c7db-0b2b-7afc-5779474f0ed8.png)


【フローをクリップボードへ書き出し】のダイアログが表示されます。書き出すフローが表示されます。

![05-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/0aac1520-a8d3-7b33-b26c-a5ea5966dae2.png)

ここで、画面上部の【JSON】タブをクリックするとダイアログ内のクリップボードに、保存を行う内容が表示されます。形式はJSON形式になっています。

![05-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4f227dd4-e0dd-c48d-1b73-fa11db4fd2b0.png)

ここで、ダウンロードボタンをクリックするとファイルに保存されます（ファイルダイアログが表示されます）。また、【書き出し】ボタンをクリックするとクリップボードにコピーされます。以下の画面ではクリップボードに書き出されたときの画面が表示されています。このデータを保管しておけば、1時間限定の環境でも環境を作り直して、作業の続行を行うことができます。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4170902f-7ac9-214b-6be9-c51fdd426840.png)


---

保存したフローをワークスペースにロードする場合は、右上にある【三】（ハンバーガーメニュー）をクリックして、【読み込み】を選択します。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/16a2523a-20c8-ccf3-882d-13a77bca80af.png)


【フローをクリップボードへ読み込み】のダイアログが表示されます。クリップボードにデータが有る場合にはペーストを行い、ファイルからロードする場合には【読み込みするファイルを選んでください】ボタンをクリックして、ファイル選択を行ってください。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/06e2edab-0341-1332-4737-65f9e7894334.png)


フローのJSONデータがロードされたら、【読み込み】ボタンをクリックします。（ワークスペースごと保存を行っていた場合には新規ワークスペースが生成されます）

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/b0eafc60-6508-4159-79d1-48d70c1ffb0f.png)


すると読み込みが行われ

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/d5038c97-cc63-e43d-3c92-a94bf4277e2d.png)

フローがワークスペースに表示されます。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/3d1d8262-bb8d-3185-7de3-6bb7656c381f.png)

こうやってこまめに保存を行えば1時間限定の実行環境でも安心して作業を行うことができます。

# HTTPサーバを作成してみる

続いて、Webサーバーを構築してみようと思います。

その前に先程作成したフローはそのままにしておこうと思うので、画面中の【フローの追加】ボタンをクリックしてワークスペースに新規ワークスペースを追加します。すると新しいタブが作成されます。（図でいうところのフロー2が追加されています。）

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/f0570d94-a7e2-2b40-e5db-30f529faa98c.png)

では、Webサーバを作成してみましょう。**Node-RED**ならWebサーバーの構築も容易です。ノード一つでエンドポイントを作成できます。
パレットの中にあるネットワークカテゴリーから``http inノード``を使用します。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/86644ce8-8af0-2f48-6df0-3512f597daea.png)


``http inノード``を見つけたら、ワークスペースにドラッグ＆ドロップして配置を行います。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/5240f5a2-3b56-53be-22ef-6f5a3ebdea96.png)


続いては、アクセス後に返すデータを作成する``templateノード``を機能カテゴリーから探し出し

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4d85464b-6e8b-1f98-ea91-5cd801f3064d.png)


ワークスペースにドラッグ＆ドロップします。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/15317553-d18c-c963-8023-c460ce679b7d.png)

あとは作成されたデータをクライアント側へ送信することになるので、ネットワークカテゴリーから``http responseノード``を探して

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/8a517fe5-b12e-ec4d-4a03-ef81f40553d5.png)


ワークスペースにドラッグ＆ドロップします。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/743e1262-d987-f73f-7468-bde982403e52.png)


これで使用するノードはすべて揃って画面は以下の様になっていると思います。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/235e1751-a063-45ac-f9e0-b4b5eb0267d1.png)


あとは、配置した各ノードの端子をマウスで接続していきます。

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/b88f2826-35bd-1d1d-ed84-70b9ab4ca908.png)

残る処理はノードのプロパティ編集していくことになります。
まずは、``http inノード``（表示はhttpになっていますが）をダブルクリックすると【http in ノードを編集】画面が表示されます。この画面でプロパティを編集していきます。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/49f37da9-5ad3-eafc-2b39-a35d3edd58b0.png)

編集行う項目は【メソッド】と【URL】になります。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/d82ae109-0da0-b44a-663e-4232b9d8c83b.png)


入力ボックスには以下のように入力をします。

* 【メソッド】：GET
* 【URL】：/helloworld/:name

<span style="color: #ff0000"><u>※nameの前に必ず:（コロン）を入れます。これでパラメータとして認識されます。</u></span>

入力が終わったら、【完了】ボタンをクリックします。

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/523876d6-e167-ad5f-53ce-6f5bf39b2796.png)


``http inノード``の表示が入力した値に合わせて変わっています。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/6c702ba1-d4e8-3df8-aa93-3bf1cc1351f1.png)


続いては``templateノード``をダブルクリックすると、【template ノードを編集】というタブが開きます。 編集行う項目は【テンプレート】になります。

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/8f44b567-4851-f6fe-52aa-d2c8d43990ac.png)

テンプレートの内容を以下の様に編集して、完了ボタンをクリックします。

* <span style="color: #00cc00">【初期状態】</span> This is the payload: {{payload}} !

↓

* <span style="color: #ff0000">【変更後】</span> HelloWorld {{req.params.name}} !

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/65f5a082-f649-c1e2-1338-309d1711e42e.png)


これで編集は完了しました。あとは【デプロイ】ボタンをクリックして

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/f029afd4-13aa-3dc5-2a17-a5d18bb250d2.png)

クリック後に、「デプロイが成功しました」という表示が行われます。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/9f99be89-2563-8aab-dee1-a6f4a1afe875.png)


## 実行のテスト

あとは、このhttpサーバにアクセスを行っていきます。接続するためのURLは、**Katacoda**で作成したサーバのURLを使って行きます。

例えば、今回構築した**Node-RED**のURLが以下のようだった場合には、``#flow``より前の部分を取り出し。

**フローエディタのURL**
```
https://2886795300-1880-elsy06.environments.katacoda.com/#flow/3f5be572.b3572a
```

**接続先のサーバのURL**
```
https://2886795300-1880-elsy06.environments.katacoda.com/
```

このサーバのURLの末尾に``helloworld/Node-RED``を入れたものがテスト用のURLになります。
**Node-RED**の部分は任意に入力可能なパラメーターとなります。変更すると表示結果も変わります。

このURLにアクセスすると実行テストが行えます。

```
https://2886795300-1880-elsy06.environments.katacoda.com/helloworld/Node-RED
```

アクセスすると以下のような画面が表示されます。

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/4d6837f2-447b-ab87-1a9c-40b7fd40db03.png)

これで**Node-RED**を使ったWebサーバーを作成することができました。 実際に``Node.js``で同じコードを書こうとすると以下のようなコードになるかなと思います。（httpなので厳密にいうと違いますが…）

**同様処理を行うNode.jsのコード**

```javascript
var http = require('http');

// Webサーバーの作成
var server = http.createServer();

// イベントハンドラを登録する
server.on('request',function(req,res) {
    res.writeHead(200,{'Content-Type': 'text/plain'});
    if(req.method === 'GET') {
        // console.log("Method = ", req.method);
        // console.log("URL = ", req.url);
        var words = req.url.split('/');
        if(words[1] == 'helloworld'){
            res.write('HelloWorld ' + words[2]);
            res.end();
        }
    }
})

// イベントの待機
server.listen(1880);
```

**Node-RED**を使用すると、このぐらいの作業で同じ事が実現できます。

# HTTPクライアントでWebサービスへアクセスしてみる

先程は**Node-RED**を使ってWEBサーバを作成しましたが、今度はNode-REDをHTTPアクセスを行うクライアント側にしたいと思います。今回の例ではWEB APIからのアクセスを行ってみます。

今回使用するWEB APIは郵便番号から住所情報を検索、および住所情報から郵便番号を検索を行えるREST APIです。

http://project.iw3.org/zip_search_x0401/

WEBサービスで用いるREST APIでは認証が必要となることが多いのですが、今回使用するAPIは認証を必要としていない簡単なものとなります。一般には認証などのキーを埋め込むなどの処理がありますのでそれぞれのAPIのドキュメントをご確認ください。

※無料で公開されていますが大量のアクセスを行わないようにご注意ください。

では、APIのドキュメントを確認してみます。郵便番号から住所を求める場合には以下のようにリクエストを出すように記述されています。

**APIのリクエスト形式**

```text
//リクエスト書式
http://api.thni.net/jzip/X0401/JSON/郵便番号上3桁の数値/郵便番号下4桁の数値.js
	
//例 http://api.thni.net/jzip/X0401/JSON/064/0941.js
```

**JSONデータのキー内容**

```text
// "state" サンプルページの都道府県選択利用の場合のoption value			
// "stateName" 都道府県名
// "city" 市・区・群名
// "street" : 町・村名
```

リクエストに関するレスポンスはJSON形式のデータで返してもらうようにしています。
では、**Node-RED**でこの処理を行うフローを作ってみます。

今回のテストに使用する住所は名古屋市役所のものを使おうと思います。

http://www.city.nagoya.jp/kurashi/category/19-11-5-0-0-0-0-0-0-0.html

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/2fb21fce-7301-88cd-699c-6160cc044ab7.png)


まずは使用するワークスペースを新規に作成します。
ワークスペースの右上にある【プラス】ボタンをクリックしてフローの追加を行います。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/14174205-2ae2-26ef-c27b-ae7a86262b04.png)


続いて使用するノードをパレットの中から探しておきます。使用するのは

* ``injectノード``
* ``http-requestノード``
* ``debugノード``

の3つになります。

``injectノード``
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/d248aa3a-baa8-0fcd-bf8c-68a2a597136d.png)


``http-requestノード``
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/46067702-7db4-8e88-da3d-e108522414f4.png)


``debugノード``
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/854bc437-6449-0814-49f5-79b310ffbe53.png)


上記のノードをワークスペースにドラッグ＆ドロップして端子をつなぎます。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/9389d994-9fe4-8c48-ddbd-5dd355bc4b0a.png)


接続まで完了したら、ノードのプロパティを編集していきます。
まずは、http-requestノードをダブルクリックして、プロパティを開きます。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/a731c21b-dfe8-aecd-41b8-5f305d452eb9.png)

今回は以下2つを編集します。

* URL
* 出力形式

URLフィールドはAPIのアクセスを行うので当然編集するのはわかりますが、出力形式はそのままにしていると文字列として扱われます。``JSON文字列``と``JSONオブジェクト``では後続のデータ処理の容易さが雲泥の差になるので、必ず``JSONオブジェクト``に変更しておきましょう。

URLフィールドはAPIのドキュメントを見ながら入力します。今回知りたいのは郵便番号``460-8508``の住所になりますので以下の様に入力します。

```text
http://api.thni.net/jzip/X0401/JSON/460/8508.js
```

編集が終わったら【完了】ボタンをクリックします。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/8d6ad475-42be-7f1b-f4d8-483d6910dd76.png)


続いては、``debugノード``のプロパティを変更します。``debugノード``をダブルクリックしてプロパティを開きます。

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/18f82b2e-294d-af70-2bd3-f3079f831dfe.png)


ここで編集する項目は

* 対象

となります。対象のプルダウンメニューから``JSONata式``を選択します。
[JSONata](https://github.com/jsonata-js/jsonata) （じぇーそねーたーと読むようです）は、JSON データ構造を照会および変換するための式言語です。これを使用しないと、``templateノード``や``functionノード``を使用するところを``debugノード``だけで簡単にデータの編集をすることができるようになります。

**参考**

http://docs.jsonata.org/overview.html

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/bec34ac9-df78-3e2c-64b8-c555e3ba1185.png)


対象のフィールドの変更が終わったら、入力ボックスを以下の様に入力していきます。``msg.payload``の``JSONオブジェクト``にある、``stateName``、``city``、``street``の値が住所になるので、これらの値を結合してデバックとして出力するという内容になります。JSONataの式を使うと以下のように冗長性が省かれた形で表現できるのがいいですね。

```text
msg.payload.(stateName & city & street)
```

編集が終わったら、【完了】ボタンをクリックします。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/0901376e-2f2c-215d-40e9-270ad0a11e84.png)


あとは【デプロイ】ボタンをクリックして実行可能な状態にします。
デプロイが成功すれば、あとは動作のチェックになります。

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/8dfb6483-ad74-0c36-6ad7-143354786810.png)

``injectノード``の左側にあるボタンをクリックして実行します。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/6f2ea392-2316-89aa-ab03-3584ee64e209.png)


するとデバックウインドウに住所が表示されました。

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13188/e8b42197-4849-edb5-e2cf-c93494410615.png)

これでREST APIへのアクセスができるようになりました。

# おわりに

今回のハンズオンで基本的な**Node-RED**の使い方を抑える事ができました。
また、時間限定ではありますが、**Katacoda**を使うことで簡単に**Node-RED**環境の構築もできました。

**Node-RED**にはまだまだ多くのノードと拡張ノードが存在します。色々と調べてみると面白いと思いますのでぜひ使ってみてください。