今回はNode-REDを使ってWebアクセスをしていきます。以前のエントリーではEndpointを作成してWebアクセスに答える
サーバー的な機能を作成してみましたが、今回はクライアント側の処理になります。
Node-RED User Group Japanのドキュメントにいいものがありました。前半はこれで初め、後半は異なるWebサービスへのアクセスをさせてみようと思います。
チュートリアルをやってみる
今回のチュートリアルの内容は
アメリカ地質調査所のウェブサイトから最新7日間での大きな地震のフィードを5分間隔で取得し、 マグニチュード7以上の地震があった場合、"PANIC!"というメッセージを表示するものです。
このチュートリアルでは以下のポイントがあります。
それぞれのポイント別を見ていこうと思います。
チュートリアルをすすめる前にフローのコピー＆ペーストをやってみる
チュートリアルの中には、すでに出来上がったフローが公開されています。 Node-REDで作られたフロー（プログラム）はJSON形式で表現することができるため、そのJSONテキストをFlowEditorにコピーすれば全く同じ状態にすることができます。大きく関係するものではありませんが、この操作をしてみたいと思います。
まずは、FlowEditorを立ち上げて、画面の右上にあるハンバーガーボタンをクリックして【三】→【フロー】→【フローを新規追加】と選択して新規にフローを作成します。
新規にフローが追加されたことを確認します。
もちろん、タブで【＋】を押しても同様の操作ができます。
続いて同様に、画面の右上にあるハンバーガーボタンをクリックして【三】→【読み込み】→【クリップボード】を選択します。
すると以下の【フローをクリップボードから読み込み】というダイアログが出てきます。
この入力ボックスにフロー（JSON形式のテキスト）をコピーすることになります。
さきほどのチュートリアルに戻ってWebページの中に【ソース】という項目があります。その部分に下の画面のようなJSONファイルがあります。これをコピーします。
コピーができたらFlowEditorに戻って、クリップボードのペーストを行います。あとは読み込み先を【現在のフロー】に選択して、【読み込み】ボタンをクリックします。
すると以下のような表示が行われ、ノードの読み込みが行われます。マウス操作でペーストする位置を決める必要があります。
クリックすると無事に読み込みが行われます。
あとは、デプロイを押せば実行できる状態になります。わかりやすい…。クリップボード以外にもテキストファイルからの読み込みや、読み込み時に新規フローの作成などもできるので非常に便利に感じました。
改めてチュートリアルをすすめる
さすがにノードのドロップやノードの結合に関する操作は説明は不要かなと思うので飛ばしていきます。
インターバルタイマーのトリガー
インターバルタイマーはinjectノードをつかうことで実現できます。
ノードの【入力】グループからinjectノードを作業のフローにドロップ後、ノードをダブルクリックすると以下のように表示されます。
この中から繰り返しのプルダウンメニューから【指定した時間間隔】を選択すると
時間間隔の入力ボックスが表示されるので、5分間隔を設定していきます。
時間間隔を5と設定し単位を分として、
【名前】のフィールドに記述をわかりやすくするために、ノードの機能を【インターバルタイマーによるトリガー】とし画面の上の方にある【完了】ボタンをクリックします。
これでインターバルタイマーのトリガー設定は完了です。
フローはこんな感じになっていると思います。
HTTPのリクエスト
続いてHTTPのリクエストを送信処理を作成します。この部分が今回チュートリアルのコア部分になります。
ノードの【機能】グループからhttp requestノードを作業のフローにドロップ後、ノードをダブルクリックして設定を行います。
設定値はアクセスするメソッド、URLを設定します。【URL】の入力ボックスに
https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_week.csv
を入力して、【完了】ボタンをクリックします。
今回設定したアクセス先は地震データのCSVファイルを取得するものになります。
フローは以下の様になります。
CSVデータの処理
【機能】カテゴリーの【csv】ノードをワークスペースに追加します。ここでダウンロードしてきたcsvデータの処理を行います。
csvファイルの形式も色々あるので事前にダウンロードしてcsvファイルの内容を確認するのがおすすめです。
ダウンロードしてエディタで開いてみます。（例えばVisual Staudio Codeなど）すると一行目に列名が入っており、文字コードはUTF-8、改行コードがLFということがわかります。
ノードをダブルクリックして設定の変更を行います。
【1行目に列名を含む】のチェックボックスを有効化します。あとの項目はそのままで良さそうです。設定が終わったら【完了】ボタンをクリックします。
今回設定した項目は以下の通りになります。
条件分岐
次の処理はcsvファイルをデータとして取得できたので、データ中のmag（マグニチュード）の値が7以上のものがあるかで条件分岐を行います。
ワークスペースに【機能】グループの【Switch】ノードを追加します。 ノードをダブルクリックし
プロパティにmsg.payload.magを入力し、値との比較演算子を>=とし、比較値の型を数値にして値を7に設定します。
設定したら【完了】ボタンをクリックして閉じます。
ノードの配置状態は以下のようになっています。
次のノードに渡すデータの格納
続く処理はmagの値が7を超えた場合の処理になります。 ワークスペースに【機能】グループの【change】ノードを追加します。
【change】ノードはワークスペースにドロップするとset msg.payloadという表記になるので注意です。
ドロップしたノードをダブルクリックし編集画面が表示されたら、
対象の値の型を文字列にして、値をPANIC!に設定します。
設定が終わったら【完了】ボタンをクリックします。
この時点でのフローは以下の様になっています。
結果の表示
あとは、画面表示になります。これまで同様に【出力】グループの【debug】ノードを追加します。
【debug】ノードはワークスペースにドロップするとmsg.payloadという表記になるので注意です。
今回の【debug】ノードは設定の変更は不要です。 ここまでのフローの状態は以下のようになっています。
各ノードの接続
あとは、各ノードの端子を接続していくだけです。以下のように接続を行ってください。
あとは画面上の【デプロイ】ボタンをクリックして
下記のような表示がでれば動作可能にになります。
実行してみる
作成したフローの【inject】ノードの左側をクリックして実行を行います。
以下のように表示がされれば実行成功です。
とはいえ、マグニチュード7の地震が発生していなければなにも表示されません。（当然ですが…）
では、その状態になったら大地震は発生していませんと表示するように変えてみましょう。
先ほどのフローの中にある【switch】ノードをダブルクリックし、比較処理の下の方にある【追加】ボタンをクリックします。
すると、比較処理が新しく追加されます。
新しい比較処理の比較演算子のプルダウンメニューから【その他】を選択すると
以下のようになるので、【完了】ボタンをクリックして設定を閉じます。
【完了】ボタンをクリックすると、【switch】ノードの出力端子が2つに増えていると思います。
これでマグニチュードが7未満の場合の処理を追加することができるようになりました。
ここまできたら、【change】ノードと【debug】ノードを追加し、
新規に追加した【change】ノードをダブルクリックして以下のように編集を行います。
編集が終わったら【完了】ボタンをクリックし、更に【デプロイ】ボタンをクリックします。
デプロイが成功したら実行させてみましょう。【デバック】タブに以下のように表示されていれば成功です。
特に何をすることもなく、日本語の表示ができているのはうれしいところですね。
おわりに
長くなってしまったので、一旦ここで終了し、後半に進みたいと思います。 次はチュートリアルを離れて、他のWebAPIを使用した値の取得にチャレンジしてみます。
【Node-RED 関連エントリ－】
