Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
7

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.

@ueponx(ueponx)

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

Last updated at Posted at 2020-09-10

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

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

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

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

参考

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

  • 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のローカル環境に構築するのではなくKatacodaというクラウドサービス上で動作するものになります。

Katacodaとは

22709995.png

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

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

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

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

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

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

1.png

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

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

2.png

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

3.png

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

4.png

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

5.png

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

6.png

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

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

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

7.png

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

$ node-red

8.png

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

9.png

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

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

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

Node-REDへログインする

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

方法は2つあります。

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

1.png

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

2.png

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

3.png

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

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

4.png

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

5.png

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

6.png

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

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

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

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

01.png

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

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

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

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

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

02.png

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

03.png

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

04.png

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

05.png

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

06.png

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

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

07.png

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

08.png

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

09.png

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

10.png

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

11.png

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

12.png

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

13.png

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

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

14.png

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

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

15.png

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

16.png

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

17.png

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

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

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

18.png

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

19.png

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

20.png

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

21.png

すると以下のような表示が出力されました。以前に比べるとわかりやすい日付になっているのがわかるかと思います。この時刻は現在時刻のUTCなので日本時間になっていませんので注意が必要です。

22.png

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

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

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

23.png

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

24.png

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

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

25.png

26.png

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

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

フローを保存する

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

01.png

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

02.png

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

03.png

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

04.png

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

05-1.png

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

05-2.png

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

06.png

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

07.png

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

08.png

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

09.png

すると読み込みが行われ

10.png

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

11.png

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

HTTPサーバを作成してみる

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

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

01.png

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

02.png

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

03.png

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

04.png

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

05.png

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

06.png

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

07.png

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

08.png

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

09.png

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

10.png

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

11.png

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

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

※nameの前に必ず:（コロン）を入れます。これでパラメータとして認識されます。

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

12.png

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

13.png

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

14.png

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

  • 【初期状態】 This is the payload: {{payload}} !

↓

  • 【変更後】 HelloWorld {{req.params.name}} !

15.png

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

16.png

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

17.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

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

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

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です。

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

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

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

APIのリクエスト形式

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

JSONデータのキー内容

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

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

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

01.png

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

02.png

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

  • injectノード
  • http-requestノード
  • debugノード

の3つになります。

injectノード
03.png

http-requestノード
04.png

debugノード
05.png

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

06.png

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

07.png

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

  • URL
  • 出力形式

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

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

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

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

08.png

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

09.png

ここで編集する項目は

  • 対象

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

参考

10.png

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

msg.payload.(stateName & city & street)

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

11.png

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

12.png

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

13.png

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

14.png

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

おわりに

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

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

12
7
0

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
Sign upLogin
12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?