【RaspberryPi】Node-RedでWebアクセス(クライアント)前半

今回はNode-REDを使ってWebアクセスをしていきます。以前のエントリーではEndpointを作成してWebアクセスに答える サーバー的な機能を作成してみましたが、今回はクライアント側の処理になります。

Node-RED User Group Japanのドキュメントにいいものがありました。前半はこれで初め、後半は異なるWebサービスへのアクセスをさせてみようと思います。

nodered.jp

チュートリアルをやってみる

今回のチュートリアルの内容は

アメリカ地質調査所のウェブサイトから最新7日間での大きな地震のフィードを5分間隔で取得し、 マグニチュード7以上の地震があった場合、"PANIC!"というメッセージを表示するものです。

このチュートリアルでは以下のポイントがあります。

  • インターバルタイマーのトリガー発生
  • HTTPのリクエス
  • CSVデータの処理
  • 条件分岐
  • 次のノードに渡すデータの格納
  • 結果の表示

それぞれのポイント別を見ていこうと思います。

チュートリアルをすすめる前にフローのコピー&ペーストをやってみる

チュートリアルの中には、すでに出来上がったフローが公開されています。 Node-REDで作られたフロー(プログラム)はJSON形式で表現することができるため、そのJSONテキストをFlowEditorにコピーすれば全く同じ状態にすることができます。大きく関係するものではありませんが、この操作をしてみたいと思います。

まずは、FlowEditorを立ち上げて、画面の右上にあるハンバーガーボタンをクリックして【三】→【フロー】→【フローを新規追加】と選択して新規にフローを作成します。

f:id:ueponx:20190910080731p:plain

新規にフローが追加されたことを確認します。

f:id:ueponx:20190910080746p:plain

もちろん、タブで【+】を押しても同様の操作ができます。

f:id:ueponx:20190910080751p:plain

続いて同様に、画面の右上にあるハンバーガーボタンをクリックして【三】→【読み込み】→【クリップボード】を選択します。

f:id:ueponx:20190910080802p:plain

すると以下の【フローをクリップボードから読み込み】というダイアログが出てきます。

f:id:ueponx:20190910080810p:plain

この入力ボックスにフロー(JSON形式のテキスト)をコピーすることになります。

さきほどのチュートリアルに戻ってWebページの中に【ソース】という項目があります。その部分に下の画面のようなJSONファイルがあります。これをコピーします。

f:id:ueponx:20190910072705p:plain

コピーができたらFlowEditorに戻って、クリップボードのペーストを行います。あとは読み込み先を【現在のフロー】に選択して、【読み込み】ボタンをクリックします。

f:id:ueponx:20190910080820p:plain

すると以下のような表示が行われ、ノードの読み込みが行われます。マウス操作でペーストする位置を決める必要があります。

f:id:ueponx:20190910080828p:plain

クリックすると無事に読み込みが行われます。

f:id:ueponx:20190910080849p:plain

あとは、デプロイを押せば実行できる状態になります。わかりやすい…。クリップボード以外にもテキストファイルからの読み込みや、読み込み時に新規フローの作成などもできるので非常に便利に感じました。

改めてチュートリアルをすすめる

さすがにノードのドロップやノードの結合に関する操作は説明は不要かなと思うので飛ばしていきます。

インターバルタイマーのトリガー

インターバルタイマーはinjectノードをつかうことで実現できます。

f:id:ueponx:20190910223655p:plain

ノードの【入力】グループからinjectノードを作業のフローにドロップ後、ノードをダブルクリックすると以下のように表示されます。

f:id:ueponx:20190910223920p:plain

この中から繰り返しのプルダウンメニューから【指定した時間間隔】を選択すると

f:id:ueponx:20190910224117p:plain

時間間隔の入力ボックスが表示されるので、5分間隔を設定していきます。

f:id:ueponx:20190910224332p:plain

時間間隔を5と設定し単位をとして、

f:id:ueponx:20190910224654p:plain

【名前】のフィールドに記述をわかりやすくするために、ノードの機能を【インターバルタイマーによるトリガー】とし画面の上の方にある【完了】ボタンをクリックします。

f:id:ueponx:20190910225525p:plain

これでインターバルタイマーのトリガー設定は完了です。

フローはこんな感じになっていると思います。

f:id:ueponx:20190910225742p:plain

HTTPのリクエス

続いてHTTPのリクエストを送信処理を作成します。この部分が今回チュートリアルのコア部分になります。

ノードの【機能】グループからhttp requestノードを作業のフローにドロップ後、ノードをダブルクリックして設定を行います。

f:id:ueponx:20190910230108p:plain

f:id:ueponx:20190910230430p:plain

設定値はアクセスするメソッド、URLを設定します。【URL】の入力ボックスに

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_week.csv

を入力して、【完了】ボタンをクリックします。

f:id:ueponx:20190911074941p:plain

今回設定したアクセス先は地震データのCSVファイルを取得するものになります。

f:id:ueponx:20190911075514p:plain

フローは以下の様になります。

f:id:ueponx:20190911075653p:plain

CSVデータの処理

【機能】カテゴリーの【csv】ノードをワークスペースに追加します。ここでダウンロードしてきたcsvデータの処理を行います。

f:id:ueponx:20190911075848p:plain

csvファイルの形式も色々あるので事前にダウンロードしてcsvファイルの内容を確認するのがおすすめです。 ダウンロードしてエディタで開いてみます。(例えばVisual Staudio Codeなど)すると一行目に列名が入っており、文字コードUTF-8、改行コードがLFということがわかります。

f:id:ueponx:20190911080945p:plain

ノードをダブルクリックして設定の変更を行います。

f:id:ueponx:20190911075936p:plain

【1行目に列名を含む】のチェックボックスを有効化します。あとの項目はそのままで良さそうです。設定が終わったら【完了】ボタンをクリックします。

f:id:ueponx:20190911080415p:plain

今回設定した項目は以下の通りになります。

f:id:ueponx:20190911081240p:plain

条件分岐

次の処理はcsvファイルをデータとして取得できたので、データ中のmag(マグニチュード)の値が7以上のものがあるかで条件分岐を行います。

f:id:ueponx:20190911225745p:plain

ワークスペースに【機能】グループの【Switch】ノードを追加します。 ノードをダブルクリックし

f:id:ueponx:20190911230026p:plain

プロパティにmsg.payload.magを入力し、値との比較演算子>=とし、比較値の型を数値にして値を7に設定します。

f:id:ueponx:20190911230337p:plain

設定したら【完了】ボタンをクリックして閉じます。

f:id:ueponx:20190911230728p:plain

ノードの配置状態は以下のようになっています。

f:id:ueponx:20190911231013p:plain

次のノードに渡すデータの格納

続く処理はmagの値が7を超えた場合の処理になります。 ワークスペースに【機能】グループの【change】ノードを追加します。

f:id:ueponx:20190911231125p:plain

【change】ノードはワークスペースにドロップするとset msg.payloadという表記になるので注意です。

f:id:ueponx:20190911231332p:plain

ドロップしたノードをダブルクリックし編集画面が表示されたら、

f:id:ueponx:20190911231532p:plain

対象の値の型を文字列にして、値をPANIC!に設定します。

f:id:ueponx:20190911231649p:plain

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

f:id:ueponx:20190911231844p:plain

この時点でのフローは以下の様になっています。

結果の表示

あとは、画面表示になります。これまで同様に【出力】グループの【debug】ノードを追加します。

f:id:ueponx:20190911232114p:plain

【debug】ノードはワークスペースにドロップするとmsg.payloadという表記になるので注意です。

f:id:ueponx:20190911232412p:plain

今回の【debug】ノードは設定の変更は不要です。 ここまでのフローの状態は以下のようになっています。

f:id:ueponx:20190911232601p:plain

各ノードの接続

あとは、各ノードの端子を接続していくだけです。以下のように接続を行ってください。

f:id:ueponx:20190911232736p:plain

あとは画面上の【デプロイ】ボタンをクリックして

f:id:ueponx:20190911232955p:plain

下記のような表示がでれば動作可能にになります。

f:id:ueponx:20190911233201p:plain

実行してみる

作成したフローの【inject】ノードの左側をクリックして実行を行います。

f:id:ueponx:20190911233402p:plain

以下のように表示がされれば実行成功です。

f:id:ueponx:20190911233616p:plain

とはいえ、マグニチュード7の地震が発生していなければなにも表示されません。(当然ですが…) では、その状態になったら大地震は発生していませんと表示するように変えてみましょう。

先ほどのフローの中にある【switch】ノードをダブルクリックし、比較処理の下の方にある【追加】ボタンをクリックします。

f:id:ueponx:20190911234802p:plain

すると、比較処理が新しく追加されます。

f:id:ueponx:20190911234941p:plain

新しい比較処理の比較演算子のプルダウンメニューから【その他】を選択すると

f:id:ueponx:20190911235048p:plain

以下のようになるので、【完了】ボタンをクリックして設定を閉じます。

f:id:ueponx:20190911235251p:plain

【完了】ボタンをクリックすると、【switch】ノードの出力端子が2つに増えていると思います。

f:id:ueponx:20190911235402p:plain

これでマグニチュードが7未満の場合の処理を追加することができるようになりました。

ここまできたら、【change】ノードと【debug】ノードを追加し、

f:id:ueponx:20190911235744p:plain

新規に追加した【change】ノードをダブルクリックして以下のように編集を行います。

f:id:ueponx:20190911235707p:plain

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

f:id:ueponx:20190911235832p:plain

デプロイが成功したら実行させてみましょう。【デバック】タブに以下のように表示されていれば成功です。

f:id:ueponx:20190911235928p:plain

f:id:ueponx:20190911235958p:plain

特に何をすることもなく、日本語の表示ができているのはうれしいところですね。

おわりに

長くなってしまったので、一旦ここで終了し、後半に進みたいと思います。 次はチュートリアルを離れて、他のWebAPIを使用した値の取得にチャレンジしてみます。

【Node-RED関連エントリー

RaspberryPi2にNode-REDをインストールして使ってみる - uepon日々の備忘録

【RaspberryPi】Node-REDで簡単なWebサービスを作ってみる - uepon日々の備忘録

RaspberryPiにインストールしたNode-REDのFlowEditorにパスワード設定 - uepon日々の備忘録