最初のフローを作る。Node-REDレクチャー2


Node-RED: Lecture 2 – Building your first flows

This lecture will introduce you to the Node-RED visual tool and get you started building your first flow. You’ll learn how to create simple flows, use debug nodes to track messages through the flows and how to use the function node to write simple JavaScript code that tailors the node to your specific needs.

このレクチャーでは、視覚的なNode-REDのツールを使って、最初のフローを組み立てます。シンプルなフローを作成する方法を習得し、debug ノードを使ってフロウの中のメッセージを追跡し、function ノードを使ってシンプルな JavaScript コードを書き自分の希望にあったノードに調整していきます。

To get you started, you’ll be using a free cloud service that provides you with a preconfigured Node-RED setup and a wide range of built-in nodes. Later lectures will explain how to set-up Node-RED for yourself on devices such as a Raspberry PI.

はじめるにあたって、前もって設定され広い範囲のnodeが組み込まれたNode-REDを提供する無料のクラウドサービスを使用していきます。のちのレクチャーではNode-REDをラズパイ等の自分のデバイスにセットアップする方法も紹介します。

At the end of this lecture you’ll be able to create your own simple flows, you’ll know your way around the Node-RED UI and you’ll be familiar with some of the basic built-in nodes that Node-RED offers.

このレクチャーの最後には、シンプルなフローを自分で作成できるようになり、Node-REDのUIや、Node-REDに組み込まれた基本的なノードについて理解できるようになります。

FRED フロント・エンド・フォー・Node-RED

FRED – Front end for Node-RED

FRED is a cloud service that we’ve created that allows you to sign up and use Node-RED without the hassle of downloading and installing on a device such as a PI. It makes it easy to get started with Node-RED by managing an instance of Node-RED for you, keeping the instance up to date with the latest code releases and applying bug fixes or patches. Also included is a set of extra Nodes that are contributed by the community, which add to the standard basic set you get when you install Node-RED yourself. However, FRED is just a wrapper for Node-RED, so anything you write in FRED will work on a Node-RED instance running on a Pi or a Beagleboard.

FRED はクラウドサービスで、私達が開発したものです。これはサインアップするだけですぐにNode-REDを使うことができるもので、ダウンロードしたりラズパイといったデバイスにインストールする手間がありません。なのでNode-REDを簡単に始めることができ、自分のNode-REDインスタンスを管理でき、インスタンスを最新のコードにアップデートし続けてくれ、バグフィックスのパッチも当てられています。またコミュニティーによって開発されたノードも追加されており、これはNode-REDにふくまれるベーシックなものとは別のものです。とはいえFREDはNode-REDのラッパーなので、FREDで書いたものは全て、ラズパイやBeagleboardで走るNode-REDの中でも同様に動きます。

To begin our examples, make sure you have created your own Node-RED instance in the cloud by signing up for a free account at http://fred.sensetecnic.com.

作例をスタートするために、自分のNode-REDインスタンスを、クラウドサービス内で立ち上げてください。サインアップし、フリーアカウントを取得しましょう。

After registering, make sure to activate your account via your email. You will not be able to log in until you validate your account.

登録した後に、Eメールによるアクティベイトが必要です。アカウントを証明するまではログインできません。

Node-REDのUIについて

The Node-RED UI

Once you have logged in to your FRED account, you’ll see the standard Node-RED UI which consists of three main panes, as shown in Fig 2.1

まずFREDにログインすると、一般的なNode-RED UIが立ち上がります。これは3つの中心的なパネルから構成されています。

Screen Shot 2015-10-22 at 4.53.21 PM.png

Figure 2.1 The Node-RED UI  – showing the node palette (left), flow canvas (centre) and output pane (right)

(左)ノードパレット、(中)フロー・キャンバス、(右) アウトプット窓

The main pane is the flow creation workspace in the middle. This is where you drag and drop nodes and connect them with wires. Along the top of the workspace pane is a set of tabs. Each tab opens a previously created workspace and shows any flows created using that workspace.

メインの窓は、フローを作成するためのワークスペースで、中央に配置されています。ここにノードをドラッグ・アンド・ドロップし、そしてワイヤーで結線していきます。ワークスペースの上部には、タブがあります。それぞれのタブは、以前に作成されたワークスペースを示しています。

On the left is the node pane that contains all the built-in nodes that your instance of Node-RED supports. In the example above, you are seeing the FRED node set which contains a large selection that has been added to the basic set that comes with Node-RED. In later lectures you will learn about these nodes and use them to develop new flows. As you can see, nodes are grouped into categories. Opening up a category shows the individual nodes.

左側には、ノードが全て配置されているノード窓があります。上記の例では、Node-REDに最初から組み込まれているものに加えて、FREDノードが追加されているのがわかります。レクチャーを通して、これらのノードを使ってフローを作る方法を学んでいきます。ご覧の通り、ノードはカテゴリー分けされています。カテゴリーをクリックして開くことで、その中に含まれているノードを見えるようにしてみましょう。

On the right-hand side is the output pane that can be toggled between the info and debug tabs. When info is selected, documentation for the selected node is shown there.  When debug is selected, it will display the output of debug nodes, errors and warnings.

右手には、アウトプット窓があります。info と debugタブを切り替えられます。infoタブが選択されているときには、選択されているnodeのドキュメントがそこに表示されます。debug タブが選択されているときには、debug ノードのアウトプットが示され、エラーやワーニングを通知します。

Above these three main panes is the usual toolbar, and on the right-hand side are three widgets, a deploy button, a user info icon and a pulldown menu for admin and control. You’ll look in more detail at the pulldown later in these lectures. The user info icon allows you to return to the FRED front page with links to tutorials, your account information, status and other information as well as to log out of the FRED service.

これら3つのメイン窓の上には、ツールバーがあります。ツールバーの右側には3つのウィジェットがあります。デプロイボタン、ユーザーインフォのアイコンと、adminとコントロールのためのプルダウンメニューです。プルダウンメニューの中身については、このあとのレクチャーで取り上げます。ユーザーインフォアイコンは、FREDのフロントページに戻ることができます。そこにはチュートリアルへのリンクがあったり、自分のアカウントの情報があったり、ステータスや、ログアウトするための画面、その他様々な情報があります。

The Deploy button is used when a flow has been constructed and causes the flow to be deployed onto the Node-RED system and executed. You’ll be introduced to the details of what’s actually happening under the covers in lecture 5 and beyond. For now just treat the Deploy button as the way to get your flow running.

Deployボタンは、フローが完成し、フローをNode-REDシステム上にデプロイし、実行する際に使用します。詳細についてはレクチャー5以降で説明します。今のところはデプロイボタンは、作成したフローを実行するために使用することになります。

 Node-REDのノードとメッセージの概略

A quick tour of Node-RED nodes and messages

As you saw in lecture 1, Node-RED allows you to wire together nodes to create flows which carry out your programming task. Messages pass between nodes, moving from input nodes through processing nodes to output nodes. Let’s take a brief look at nodes, flows and messages.

レクチャー1で見てきたように、Node-REDはノードをつなげ、フローを作り、プログラミングによってタスクを処理します。メッセージはノード間で渡され、Inputノードからプロセシングノードを通り、outputノードに到着します。ノード、フロー、メッセージについてさっと見ていきましょう。

There are three main  types of nodes:

主要な3つのノードがあります。

  1. Input Nodes (e.g. inject) Inputノード(injectノードなど)
  2. Output Nodes (e.g. debug) outputノード(debubノードなど)
  3. Processing Nodes (e.g. function) Processingノード(functionノードなど)

basic-fred-intro-02

Figure 2.2 The main types of nodes: input, output and processing

Input nodes allow you to input data into a Node-RED application or “flow”. They have at least one output endpoint represented by the small grey square only on their right side. You use input nodes to connect data from other services, for example the  Twitter, Google, serial, websockets or tcp nodes, or to manually input data into a flow using the inject node.

Inputノードは、データをNode-REDアプリケーション、つまりフローに入力させることができます。これらは、少なくとも1つ以上のoutputエンドポイントを持ちます。outputエンドポイントは、小さな灰色の四角で表され、右側に配置されています。Inputノードを使うことで、外部サービスのデータと接続することができます。例えばTwitter, Google, Serial, websocket, tcp といったものと接続することができます。ほかにも手動でデータをInputするためにも使うことができます。その場合にはinjectノードを使用します。

Output nodes allow you to send data outside of a Node-RED flow. They have a single input endpoint on their left side. You use output nodes to send data to other services, for example via Twitter, tcp, serial or email nodes, or to use the debug node to output to the debug pane.

Output ノードはNode-RED flowの外にデータを送ることができます。Inputエンドポイントが左側に一つあります。Outputノードを使ってデータを他のサービスに送ったり、例えばTwitter, Google, Serial, websocket, tcp といったものと接続することができます。他にもデバグノードを使って、Outputをデバグ窓に表示することもできます。

Processing nodes allow you to process data. They have an input endpoint and one or more output endpoints. They allow you to transform the data type (e.g. json, csv, xml) nodes, use the data to trigger a message (e.g. trigger, delay) nodes and to write custom code that uses the data received (e.g. function node).

Processingノードは、データを処理することができます。1つのinputエンドポイントと、1つ以上のOutputエンドポイントを持ちます。例えばデータのタイプを変えるノードや(json,csv,xmlノードなど)、データをトリガーにしてメッセージを送るノードや(trigger,delayノード)、受け取ったデータをもとに自由な処理をかけるノードもあります(functionノード)

Note that some nodes, like the inject and debug messages, have a button that allows you to actuate a node (in the case of the inject node) or to enable and disable a node (in the case of the debug node).

ノードの中には、例えばinjectノードやdebugメッセージノードのように、ボタンを持ち、ノードをacuateさせたり(injectノードのように)、enable もしくはdisableにできるもの(debugノードのように)があります。

Flows consist of multiple nodes wired together, with output tabs linked to input tabs of the next node in the flow. Messages flow along the nodes carrying data from node to node.

flowは複数の接続されたノードからなり、各ノードのアウトプットは次のノードのインプットに接続されます。メッセージは、このノードの中を伝わっていきます。

Node-RED nodes consume input messages and produce output messages. Messages are JavaScript objects that contain at least a “payload” parameter, like this:

Node-REDはInputメッセージを受け、Outputメッセージを作成します。メッセージはJavaScriptオブジェクトで、少なくともpayloadパラメーターを持っている必要があります。次のように。

Listing 2.1 A basic Node-RED message structure

msg = {
payload:”message payload”
};

Nodes consume and produce messages, usually using msg.payload as the main placeholder for the data they consume and produce. However, messages can be extended to contain other parameters. For example, to set the topic of a message and add a new parameter, location, you could create a new msg object as shown in listing 2.2.

ノードはメッセージを受け取り、メッセージを生成します。大抵の場合はmsg.playloadがメッセージのやりとりにおける、メインのプレースホルダーとして用いられます。もちろんmsg.playload以外のメッセージをもたせることもできます。例えば、メッセージのトピックと、ロケーションを、新しい値として設定することもできます。

Listing 2.2 A more complex Node-RED message structure

  1. msg = {
  2.   payload:”message payload”,
  3.   topic:”error”,
  4.   location:”somewhere in space and time”
  5. };

Let’s use this knowledge to create your first flow.

学んだ知識を使って、最初のフローを作っていきましょう。

最初のフローを作ろう「ハローワールド」

Example 2.1 Building your first flow: Hello World

Let’s go ahead and start building your first flow so that you can see how simple it is to use the Node-RED UI to build and deploy a flow.

さあ最初のフローを作ることにしましょう。これを通して、Node-RED UIを使ってビルドとディプロイが簡単にできることが理解できるでしょう。

Let’s start with the easiest flow possible, a node to inject some information into the flow, wired to a debug node to see the output from the flow as a debug message. Once you have that running, you’ll build it up to the full Hello World flow.

さあ、なるべく簡単なフローにしました。injectノードを使って情報をフローに取り込み、debugノードにそれを繋いで、メッセージのアウトプットをデバグメッセージとして確認します。これが動けば、最初のハローワールド・フローを完成させたことになります。

Since this is the first time you’ll be shown how to actually build a flow, let’s start slowly and explain each step with a screen-shot. Once you’ve created your first flow and seen how easy it is, you’ll mostly be shown a single picture of the final flow rather than all the screenshots.

実際のフローを作る手順を説明するのは初めてなので、ゆっくりと各ステップをスクリーンショットを使って説明していきますね。最初のフローが完成した頃には、この作業がとても簡単だとわかることでしょう。

Let’s start with the simplest Node, the comment Node. You’ll find this in the function section of the node palette. Drag and drop a comment node onto the flow workspace as shown in Fig 2.3.

まずはcommentノードです。functionセクションの中にこのノードはあります。ドラッグ&ドロップをして。フローワークスペースに配置しましょう。

Screen Shot 2015-07-31 at 2.03.20 PM.png

 

Figure 2.3: Using a comment node is a great way to add visible comments into flows

 

Once you’ve done that, take a look at the info pane on the right (remember to switch to info if the debug tab is selected). You’ll see a little info on the node, including the node name, a unique ID, and a properties field with a description of the node. For the comment node there’s not much to say; however, more sophisticated nodes have a lot more info.

配置したら、右側にあるinfo窓をみてください。(info窓とdebug窓は切替可能のですので、info窓を選択するのを忘れないでください) するとノードにかんする情報を確認スルことができます。ノードの名前や、ユニークID、説明付きのproperties fieldがあります。commentのノードにはとりわけ説明すべきことはありませんが、より高機能なノードに関しては、より多くの情報を確認することができます。

Double-click on the comment node, and you’ll see a configuration window (Fig 2.4) You can give the comment node a name and add detailed text if you like.

コメントノードをダブルクリックすると設定画面が出ます。コメントノードに名前をつけたり、詳しいテキストを加えることができます。

Screen Shot 2015-07-31 at 12.16.33 PM.png

Figure 2.4 Give the comment a name and add any info you want in the text box

 

Ok, now let’s add the first node that actually does something, an inject node. The inject node is used to generate input into a flow and is one of the first nodes in the node palette under input. If you drag and drop an inject node onto the flow workspace, and then look at the info tab, you’ll see the documentation for the inject node. Note that the name of the node on the workspace changes from inject to timestamp, because the default behaviour for the node is to inject a timestamp – the current time in milliseconds since January 1, 1970.

次は実際に何かをするノードを追加してみましょう。今回はinjectノードです。injectノードは、インプットをフローに加えます。これはインプットカテゴリーにあります。injectノードをドラッグ&ドロップをして配置し、インフォタブを見てみましょう。このノードに関する説明があります。配置するとノードの名前がinjectからtimestampに変わったことにお気づきでしょうか。これはこのノードのデフォルトの挙動が、timestampを挿入する機能になっているからです。この機能は、現在の時間を1970年1月1日から数えた秒数で出力します。

Screen Shot 2015-07-31 at 12.03.59 PM.png

Fig 2.5 The inject node allows you to insert events as messages, defaulting to a timestamp

You’ll also notice that the inject node (now named timestamp) has a blue dot top right and a grey square centre right. The blue dot indicates that the node hasn’t been deployed since it was last changed; the grey square is the output point for the node. This is where you attach ‘wires’ that route output message from the inject node to the next node in the flow.

またinjectノードは(いまのところtimestampという名前が付けられていますが)青いドットが右上についており、灰色の四角が右側中央にあります。青いドットはノードが変更された後に、まだデプロイされていないことを示しています。灰色の四角はノードのOutputポイントです。これをつかってinjectノードのアウトプットメッセージを次のノードに渡すために、このポイントを使って接続していきます。

To get a sense for the inject node and the whole flow deployment process, let’s add a debug node to see what happens, wire them together and then deploy the flow and test it.

injectノードを理解するために、そしてフロー開発全体の理解をするために、デバグノードを追加し、デバグノードを使って何が起きているのか確認してみましょう。それらをつなぎ、デプロイし、フローをテストします。

Start by dragging a debug node from the node palette to the workspace. Again you can look at the info for the node.

debugノードをドラッグ・アンド・ドロップします。

Then you’ll wire the two nodes together. To do that, click on the grey output point for the inject node and, holding the mouse button down, drag towards the debug node. An orange wire appears, which you can then attach to the grey input point on the debug node.

そうしたら次に、2つのノードをつなぎましょう。そのためには、injectノードの灰色のOutputポイントをクリックして、マウスを押しっぱなしにしながら、デバグのノードに向かって進めていきます。オレンジのワイヤーが現れるので、デバグのノードの灰色のInputノードにつなげましょう。

Screen Shot 2015-07-31 at 12.40.55 PM.png

Figure 2.6 Wiring an inject node to a debug node

 

This is the simplest flow possible and will send the current timestamp to the debug node for display in the debug pane. Let’s try it!

これが一番簡単なフローで、これは現在の時間をデバグノードにおくり、デバグ窓にそれを表示するフローです。やってみましょう!

Click the deploy button in the Node-RED window (top right). You’ll see a pop-up saying the flow has been successfully deployed. You will also notice that the blue dots on the nodes disappear, indicating there are no undeployed changes.

Node-REDウィンドウの右上にあるディプロイボタンを押しましょう。するとフローがデプロイに成功したメッセージがポップアップで表示されるはずです。また青いドットが消え、変更が全てデプロイしたことを示します。

Now, before you try the flow, make sure the the debug tab is selected on the right pane. Then click on the left tab on the inject node and look at what appears in the debug pane.

デバグタブをまず開きます。そして

Screen Shot 2015-07-31 at 12.48.44 PM.png

Figure 2.7 Debug output from your first flow – the time when you clicked the inject node.

 

As you can see, the inject node, when clicked, generates a timestamp (number of milliseconds since January 1, 1970), which is converted to a message and sent along the output wire, which is delivered to the debug node as an input message. The debug node’s default behaviour is to show any message it receives, which it does in the debug pane on the right.

インジェクトノードをクリックすると、タイムスタンプが作成され、それがメッセージに変換され、Outputワイヤーを通して送信されます。それはdebugノードに運ばれ、inputメッセージとして入力されます。debugノードのデフォルトの挙動は、受け取ったメッセージを右側のdebug窓に示します。

Congratulations, you created and deployed your first flow!

おめでとうございます。最初のフローを作成し、デプロイできましたね!

Let’s now augment it a little to see what else we can do with this simple flow. Firstly, we’ll edit the inject node to deliver a text message rather than a timestamp. To do that, select the inject node in the flow and double-click it. You’ll see a configuration window like the one in Fig 2.8.

すこし追加の作業をして、このシンプルなフローでどんなことができるのか、より理解してみましょう。まずinjectノードを編集して、テキストメッセージを送るようにしてみましょう。そのためには、インジェクトノードを選択して、ダブルクリックします。すると設定画面が開きます。

Screen Shot 2015-07-31 at 12.54.29 PM.png

Figure 2.8 Editing an inject node to send text instead of a timestamp

 

In the payload field, select string instead of timestamp and then type any string you like into the blank field below the payload field. As is traditional, let’s start with “Hello World – from my first NR flow!”

playload fieldにおいて、stringを選んで、好きな文字列をplayload fieldの空欄に入力しましょう。伝統に則り、ハロー・ワールドと入力することにしましょう。

Once you’ve made the change, click ok to save the changes and take a look at the flow. You’ll see the blue dot has appeared on the inject node (which has also returned to being called inject rather than timestamp) to indicate that you have undeployed changes. Click the deploy button again to resolve that and then go ahead and click the tab on the inject node. If you look at the debug output you’ll see that instead of a timestamp, your text has been delivered as a message to the debug node, which displays it as usual.

この変更をして保存します。すると青いドットがinjectノードにあるのがみえます。これは変更がディプロイされていないことを示しています。では再度deployボタンを押して、ディプロイし、injectノードをクリックしましょう。するとあなたが入力したテキストがメッセージとしてデバグノードに送信され、それがいつも通りdebugノードに表示されます。

Screen Shot 2015-07-31 at 1.01.40 PM.png

Figure 2.9 Sending a text message rather than a timestamp

 

As you can see, it’s very easy to wire up some simple nodes and get data to pass through your flow as messages. At this stage, you’ll probably be wondering a little about the messages that are flowing between nodes. The debug node can be used to examine them in more detail.

ご覧の通り、簡単に、ノードをつないでデータを取得して、フロー中へ渡すことができました。この段階では、フローの中を移動するメッセージの内容について疑問がまだあると思います。デバグノードをつかって、メッセージの詳細を精査することもできます。

All messages in Node-RED have three default properties: the payload, which we are seeing above, a message topic, which is a user-defined string describing what the message is about (its topic, if you will) and an internal identifier. You can actually see this information if you edit the debug node configuration. Let’s do that and look at the output (Fig 2.10)

Node-REDのメッセージは全て、3つのデフォルトのプロパティを持っています。payloadは既にみてきました。message topicはメッセージが何についてのものなのかを、ユーザーが指定できる文字列です。そしてinternal identifierです。これらの情報はdebugノードの設定外面で変更を加えると、確認することができます。↓debugノードの設定画面で、outputをcomplete msg objectに変更する。

Screen Shot 2015-08-06 at 11.15.08 AM.png

 

Figure 2.10: setting the debug node to show the internals of a message

 

Select the debug node, double click and change the node output field to “Complete msg object”. If you then save this, deploy again and click the inject node, you will see in the debug pane a JSON structure that contains 3 fields: a “topic” which is currently blank, a “payload” which contains the string you set in the inject node and an internal ID field “_msgid”. Generally the internal message ID field isn’t used. However, both the topic and payload are used extensively when developing flows. You’ll see more of that later in the lecture series.

debugノードを選択して、ダブルクリックをしてノードのoutputフィールドを”complete msg object”に変更してください。これをセーブしてディプロイして、injectノードをクリックすると、debug窓にJSON構造のデータを確認することができます。これには3つのfiledがあります。topicは現在は空白で、”payload”にはあなたがinjectノードで指定した任意の文字列が、そしてinternal IDフィールド”_msgid”です。基本的にはinternal message IDは使いません。しかし、topicとpayloadはどちらともよく使われます。これらについてはこのシリーズでまた取り上げます。

These fields are extensible, so you can define new message properties, for example, msg.location, which could be used to add the latitude and longitude values for the source of the message. Let’s take a look at that in the next example flow.

これらのfieldは拡張可能です。ですから新しいmessage propatyを設定し、例えばmsg.location等を設定し、位置情報をメッセージに付加することができます。次のサンプルを通して、これをみていきいましょう。

You can find the node-red description of this flow at:

https://github.com/SenseTecnic/nrguideflows/blob/master/lesson2/2-1-firstflow.json

例2.2 天気アラート

Example 2.2 A second flow: weather alerts

In this example, which is similar to the one introduced in lecture 1, you’ll monitor the weather in your hometown and send yourself a tweet when the weather looks like it’s going to be good. You’ll use a built-in weather node – openweathermap – that retrieves the weather from openweathermap.org for the location you set it for. A simple function node will be used to check for ‘clear weather’ and a Twitter node will be used to send yourself a tweet when the weather looks good.

この例は、レクチャー1で紹介したものと同じもので、あなたの街の天気をモニターして、天気が良くなりそうになったら、ツイートをします。ここでは最初から組み込まれている天気用のノードである、openweathermapを使用することができます。これはopenweathermap.orgからあなたが設定したエリアの情報を取得するノードです。そしてシンプルなファンクションノードを使って、快晴かどうかを判断して、Twitterノードを使ってあなたにTweetを送ります。

First you will need to get an API key at OpenWeatherMap. OpenWeatherMap offers a great service that provides detailed weather information for worldwide locations. Visit http://openweathermap.org/appid and follow the instructions as shown in the screenshots below.

まずはOpenWeatherMapでAPI Key を取得しましょう。OpenWeatherMapは詳細な天気情報を提供してくれる、素晴らしいサービスで、世界中の場所に対応しています。http://openweathermap.org/appidにアクセスして、指示にしたがいましょう。

 

 

You will need to sign up for an OpenWeatherAccount as shown below:

まずはサインアップする必要があります。

After signing up you will be redirected to your Home page where you will be able to access or re-generate your API Key. It should look something like this:

サインアップしたあとは、自分の設定ページでAPIキーを作成しましょう。

Now, let’s use that API key to build a weather alerts flow. Drag and drop a weather node from the left pane onto the workspace, as shown in Figure 2.11.

ではこのAPIキーを使って天気アラートを作っていきます。weatherノードをドラッグ・アンド・ドロップしましょう。(訳注:ないけども!!なくない???しょうがないので、macにnode-redをnpmでインストールして、openweatherノードもnpmでインストールしました。さしあたってグローバルにインストールすれば良い模様。)

Figure 2.11. Drag and drop a weather node onto a blank workspace

 

If you select the info pane on the right, you can see a description of the openweathermap node with detailed information on how to configure and use it. Some interesting things to note:

選択して詳細窓を見ると、説明を見ることができます。

  • It has a full JSON structure as its msg.payload, with quite a lot of weather detail, all presented as name:value pairs, e.g. wind speed and tempc
  • JSON構造のmsg.payloadを持ち、これには膨大な天気情報が記されています。全ては名前:値のペアになっていて、名前には例えばwind speedとかtempc等があります。
  • The node defines 3 new message properties, msg.location, msg.time and msg.data. As mentioned above, you are free to add properties to messages, and the openweathermap node has added these new properties to carry extra information associated with the message.
  • ノードは新たに3つのmessage propertyを設定しています。msg.location, msg.time, msg.dataの3つです。既に解説したように、自由にmessageへプロパティを追加することができます。openweathermapノードは、これらの新しいプロパティを追加し、メッセージへさらなる情報を関連付けて運ぶのです。

Let’s configure the node and look at the actual data structure it generates after it has queried your local weather. Start by double-clicking on the node and fill out the form with your location. Type your city and country in the fields. Add the API key you obtained from http://openweathermap.org/appid and click on “Ok” as shown in Fig. 2.12.

 

 

Figure 2.12. Set your city and country in the configuration form, use the API key you obtained in the step above.

 

Then drag and drop a debug node and wire it to the openweathermap node. Click on “Deploy” to see that the payload object from the openweathermap node in the debug pane.

ディプロイしてplayloadオブジェクトの中身をデバグ窓でみてみましょう。

Listing 2.3 The message payload for the openweathermap node is a JSON structure describing weather conditions, temperature, wind, cloud cover and sunrise times.

このなかには色々な情報がJSON形式で含まれていることがわかります。

  1. {
  2.   “weather”: “Clear”,
  3.   “detail”: “sky is clear”,
  4.   “tempk”: 295.104,
  5.   “tempc”: 21.903999999999996,
  6.   “humidity”: 53,
  7.   “maxtemp”: 295.104,
  8.   “mintemp”: 295.104,
  9.   “windspeed”: 2.22,
  10.   “winddirection”: 273.007,
  11.   “location”: “Vancouver”,
  12.   “sunrise”: 1432038196,
  13.   “sunset”: 1432094081,
  14.   “clouds”: 8,
  15.   “description”: “Vancouver weather(49.25,-123.12) is Clear (sky is clear).”
  16. }

As you can see, the node delivers quite a lot of information about your local weather, all as the usual name:value pairs. For this example, you want to use the “weather” field which you’re going to test to see if it’s reported as “Clear”. If it’s “Clear” you’ll then send a tweet.

ご覧の通り、nodeはかなり大量のローカル天気情報を運搬し、それぞれの情報は一般的なname:value のペアで管理されています。例えば、その中からweatherフィールドに含まれる情報を使って、それが「clear 快晴」かどうかを判断するテストに使うことができます。もし快晴であればツイートするような機能を作ってみましょう。

To program that logic, you’ll use a function node. You saw one of these in lecture 1, but without the details. Let’s see how they are used by dragging one onto the flow workspace and double clicking it to open up the node editor.

このロジックをプログラミングするためにはfunctionノードを使うことができます。これは既にレクチャー1でみたものですが、詳細についてはまだ説明していませんでした。あらためてどのように使うのかみていきましょう。まずドラッグ・アンド・ドロップでワークスペースに配置し、ダブルクリックをして設定画面を開きましょう。

Figure 2.13. Add a function node and wire it to the openweathermap node.

Now double-click on the function node and type/copy this (Note if you use copy/paste – make sure you paste as plain text, wordpress sometimes inserts odd characters)

次の文字列をコピペしてください。

Listing 2.4 Function node “If Clear Weather”

  1. if (msg.payload.weather === “Clear”) {
  2.     msg.payload = “Clear skies ahead today!”
  3.     return msg;
  4. }
  5. return null;

Figure 2.14. Edit the function node adding the JavaScript shown in listing 2.4

Looking at Listing 2.4, you can see that this will parse the incoming message payload for the weather parameter and compare it to the string “Clear” (line 1). If it is equal, it will rewrite the message payload with your own string “Clear skies ahead today!” (line 2). Otherwise it will return a null message (line 5). This last bit is important because in Node-RED nodes ignore null messages.

このプログラムは、入力されたmessageのpayloadをパースして、weatherパラメータを取得し、これを文字列”Clear”と比較しています。これが等しければ、messageのpayloadを書き直して、“Clear skies ahead today!”とします。そうでなければ、nullメッセージを返します。この最後の短い行は大切で、なぜならNode-REDはnullメッセージを無視するからです。

You can do all sorts of things now, for example wire this message to an email node, or a pushbullet node. For this tutorial we will use the Twitter output node. Drag  a Twitter node onto the workspace, double-click and and fill out your Twitter account credentials as shown in Fig 2.15.

さあここまでくれば、どんなこともできますよ。例えば、メッセージをEmailノードにつなげたり、pushbulletノードにつなげたりできます。このチュートリアルでは、Twitter Outputノードを使うことにします。Twitterノードをドラッグして、設定画面からTwitterアカウントの情報を入力しましょう。

Figure 2.15. Set your Twitter account credentials into the node configuration

Once you’ve set up these credentials, Node-RED stores them and you can reuse them when you create another Twitter node in future flows.

一度認証してしまえば、それは記録され、あとで使いまわすことができます。

Once you’ve wired up the flow, you can hit the deploy button and then watch your Twitter account to see the new tweet every time the weather is reported as clear.

ではワイヤーでつないで、ディプロイしましょう。

Click on “Deploy”:

Figure 2.16. The full weather flow sending tweets if the weather report mentions clear skies.

Other useful UI features

One of the most useful features of the Node-RED UI is the ability to copy and paste nodes and even full flows using the standard cut’n’paste clipboard. Node-RED flows are simply coded as JSON strings and can be exported from a workspace, and imported into a workspace using the Node-RED pulldown menu in the top right of the Node-RED window.

Node-RED UIの中で一番便利な機能は、ノードをコピペする機能で、一般的なコピペコマンドで実行することができます。これを用いて、フロー全体をコピペすることもできます。Node-REDフローは、シンプルなJSON文字列でできているので、ワークスペースにあるフローを書き出したり、ワークスペースへ読み込んだりすることができます。Node-REDのプルダウンメニューから実行します。

Rather than building the flows in this example, or in fact anywhere in this lecture series, by hand yourself, you can simply copy them from our website and paste them into a workspace. After that all you need to do is configure them correctly, e.g. with credentials, and deploy them.

自分で全てを作る代わりに、私達のサイトからコピペーをして、いくつかの設定項目を理解し、変更するだけで、じつはすんでしまいます。

Let’s quickly show you how to do that.

どのようにやるのか、みていきましょう。

Click on the link for this example which is at the end of the example below and look for the JSON code. Copy it to the clipboard using the usual CTL C or copy item in the edit menu.

このサンプル解説の一番下にあるリンクから、このサンプルのJSONコードを取得して、一般的なコントロール+Cコマンドなどでコピーしてください。

Using the pulldown menu in the top right of the Node-RED window, select Import->Clipboard as shown in Fig 2.17

つぎに、Node-REDの右上にあるプルダウンメニューから、Import→クリップボードを選択します。

Screen Shot 2015-08-15 at 12.55.58 PM.png

Figure 2.17 Selecting the Import from Clipboard menu item in Node-RED

 

You will see a popup with an input field (Fig 2.18). Paste your clipboard into the input window and click OK.

するとインプットフィールドがポップアップで表示されますので、今コピーしてきた情報をペーストし、OKをおしましょう。

Screen Shot 2015-08-15 at 12.56.27 PM.png

Figure 2.18 Pasting a flow into the import window of Node-RED

 

The new flow will appear in the current workspace and can be moved to a location and dropped. Once it’s in place, you can configure it as you would a flow you created yourself and deploy it.

すると、新しいフローがワークスペースに登場するはずです。一度読み込んでしまえば、あとは自分が好きなように修正をして、ディプロイをして使うことができます。

You can find the node-red description of this flow at:

https://github.com/SenseTecnic/nrguideflows/blob/master/lesson2/2-2_weatheralerts.json

Summary

In this lecture you have created your first flows and seen how to wire together a set of basic nodes to achieve quite complex tasks. We’ve skipped over a few of the underlying details in order to get you going quickly, and we’ll return to those in lectures 3 and 4. However, so far you’ve seen how to use the Node-RED visual flow builder, the basic classes of input, output and processing nodes. You were given a brief overview of messages and how to use the function node to write your own JavaScript code to do simple processing on messages within a flow. In the next lecture, you’ll take a more in-depth look at the programming model of Node-RED and get a better understanding of the main programming elements and nodes and how to craft more complex flows using a variety of nodes.

このレクチャーでは、最初のフローを作る方法を紹介しました。その中で基本的なノードをワイヤーでつないで、複雑なタスクを実行する方法がわかってもらえたと思います。まずは概念を理解してもらうために、いくつか複雑なことは飛ばしましたが、これについてはレクチャー3か4で扱います。とはいえ、Node-REDの視覚的なエディタ、input、output、functionノードの使い方がわかったはずです。またメッセージがどんなものなのかもわかり、functionノードを使って自分でJavaScriptを書いて、シンプルにノードフローを流れるメッセージを処理する方法も学習しました。次のレクチャーでは、より踏み込んでNode-REDのプログラミングモデルを学習していきます。それによって主要なプログラミングに用いる要素の一層の理解と、より多様性のあるノードを使って複雑なフローを構築する方法についても学んでいくことになります。

Leave a Reply

Your email address will not be published. Required fields are marked *