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

Webアクセスの処理も後半となります。前回はHTTP経由でのCSVファイルのダウンロードを行っていましたが、今回は一般的なWebAPIへアクセスして見ようと思います。

【関連】

【RaspberryPi】Node-REDでWebアクセス(クライアント)前半 - uepon日々の備忘録

WebAPIへのアクセスを行う

今回は比較的アクセスが簡単なwaht3wordsというサービスのAPIを使用してみたいと思います。

what3wrodsの登録をする

what3words.com

waht3wordWikipediaによれば…

what3words(ワットスリーワーズ)は、3メートルの解像度で場所を伝達するためのジオコーディングシステムである。what3wordsでは、地理的座標を3つの単語で符号化する。例えば、自由の女神像の持つ松明の位置は、"toned.melt.ship"の3語で表している。従来のほかの位置エンコードシステムとの違いは、長い文字(たとえば住所)や数字(たとえば経緯度)ではなく、3つの単語で簡単に表される点にある。

ja.wikipedia.org

ってことのようです。簡単に言えば住所などの表記が長くなりがちなので、3つの言葉の組み合わせで表現しましょうというものです。

what3wordsユーザー登録をする

まず、WebAPIを使用するにはAPI-Keyが必要になるので、そのためのユーザー登録を行います。 ユーザ登録するために、こちらのURLにアクセスします。 すると以下のような画面が表示されます。

f:id:ueponx:20190916074920p:plain

画面右上にあるハンバーガーボタンをクリックし、ユーザー登録の作業をすすめます。

登録はFacebookgoogleのアカウントと連携することで行うことができるので、今回はFacebookのユーザIDとのアカウント連携をすすめてみます。 【Facebookで続行】のボタンをクリックします。

f:id:ueponx:20190916092105p:plain

ボタンをクリックすると確認のダイアログが表示されるので【中央にある青いボタン】をクリックします。 アカウント作成の画面に遷移します。

f:id:ueponx:20190916094448p:plain

この中で、氏名などの情報を入力し、プライバシーポリシーの同意のチェックボックスにチェックを入れます。このチェックを入れないと【続行】ボタンがアクティブになりませんので、必ず行ってください。(アクティブになるとボタン化赤く変化します。)

f:id:ueponx:20190916095212p:plain

【続行】ボタンをクリックするとユーザー登録は完了して以下のような画面になります。

f:id:ueponx:20190916095302p:plain

これでユーザー登録は完了です。

API KEYの取得

つづいてAPIのアクセスに必要なAPI-KEYを取得します。ログインが終わったら上の方にあるメニューバーの【Developer】をクリックします。

f:id:ueponx:20190916095606p:plain

すると以下のような画面に遷移します。このページはAPIの説明とGet Startedというチュートリアルがあるのでそれを見ていくことになります。

f:id:ueponx:20190916094816p:plain

画面内のGet Startedの中にある【1.Get your free API key】のリンクをクリックします。

f:id:ueponx:20190916075010p:plain

すると、以下のようなデベロッパーページが表示されます。左側のペインにある【デベロッパAPIキー】をクリックします。

f:id:ueponx:20190916075014p:plain

すると画面右側に【APIキーの作成】が表示されるのでクリックします。

f:id:ueponx:20190916075025p:plain

APIキーの作成に関するライセンス確認のダイアログが表示されるので

f:id:ueponx:20190916075030p:plain

同意のチェックボックスにチェックを入れて、【続行】ボタンをクリックします。

f:id:ueponx:20190916075037p:plain

続いてはAPIキーを発行するアプリの作成を行います。アプリの【名前】と【ディスクリプション】(説明)を入力して【APIキーの作成】ボタンをクリックします。

この例では以下のように設定しています。

  • 名前:ueponAPP
  • ディスクリプション:API test

f:id:ueponx:20190916075044p:plain

すると、デベロッパAPIキーが表示されます。ここで表示されたAPIキーを後程使用するのでメモしておきます。

f:id:ueponx:20190916075050p:plain

これで開発の準備ができました。先ほどのDeveloperページのGet Startedに戻ります。

今回は緯度経度から3つのワードでできた住所を調べたいので【Coordinates => 3 word address】の欄にあるリンクをコピーします。

f:id:ueponx:20190916075058p:plain

コピーすると以下のようなリンクアドレスが取得できます。ここで[API-KEY]となっている部分を先ほど生成しておいたAPI-KEYに変更します。

https://api.what3words.com/v3/convert-to-3wa?coordinates=51.521251%2C-0.203586&key=[API-KEY]

このリンクアドレスにブラウザなどからアクセスすると以下のようなJSONデータ返されます。 この中でwordsの値がindex.home.raftとなっているのがわかるかと思います。これが取得された3 word Addressとなります。

f:id:ueponx:20190916075110p:plain

値が英語の単語になっていますが、これはデフォルトが英語になっているので、クエリで言語を設定すれば日本語にすることもできます。

リンクアドレスの末尾に&language=jaに追加すれば大丈夫です。

https://api.what3words.com/v3/convert-to-3wa?coordinates=51.521251%2C-0.203586&key=[API-KEY]&language=ja

改めてこのリンクアドレスにアクセスすると以下のようになります。

f:id:ueponx:20190916081434p:plain

日本語の場合にはていせい・ゆとり・しゅふという3つの単語が帰ってきます。

これでAPIの準備はOKです。

Node-REDからアクセスを行う

今度はNode-REDからこのAPIにアクセスをしてみたいと思います。 まずは新規のフローを作成します【+】のタブをクリックします。

f:id:ueponx:20190916075134p:plain

今回使用するのは以下4つのノードになります。

  • 入力グループの【inject】ノード
  • 機能グループの【http request】ノード
  • 機能グループの【json】ノード
  • 出力グループの【debug】ノード

f:id:ueponx:20190917080229p:plain

これらのノードをワークスペースにドロップし、

f:id:ueponx:20190917080251p:plain

以下のようにノードの端子を接続していきます。

f:id:ueponx:20190917080254p:plain

後は各ノードの設定を行います。

【inject】ノードを編集する

まずは起動トリガーとなるinjectノードをダブルクリックします。

f:id:ueponx:20190917080300p:plain

ノードをドロップすると、自動的にタイムスタンプという表示になるのでそれを名前のプロパティをスタートと変更して【完了】ボタンをクリックします。

f:id:ueponx:20190917080313p:plain

【http request】ノードを編集する

続いてhttp requestノードをダブルクリックします。このノードでWebアクセスをします。

f:id:ueponx:20190917080319p:plain

編集するのはURLのプロパティです。

https://api.what3words.com/v3/convert-to-3wa?coordinates=51.521251%2C-0.203586&key=[API-KEY]

先ほど使用したリンクアドレスに編集します。[API-KEY]の部分は置き換えます。 終わったら【完了】ボタンをクリックします。

f:id:ueponx:20190917080421p:plain

json】ノードを編集する

JSONデータを処理する、jsonノードをダブルクリックします。

f:id:ueponx:20190917080432p:plain

動作のプロパティのプルダウンから【常にJavaScriptオブジェクトに変換】を選びます。ここを修正していないとWebアクセスによって得られたJSONデータが単なるString(文字列)になるので以降データの取得などを行うことを考えるならばオブジェクトに変換させておく方が便利です。

f:id:ueponx:20190917084204p:plain

【debug】ノードを編集する

最後のdebugノードで結果を表示します。debugノードをダブルクリックして

f:id:ueponx:20190917080423p:plain

対象プロパティをmsg.payload.wordsと編集します。前段のJSONから送信されたデータからwordsのキーに入っているデータを取得し、表示を行うことになります。

f:id:ueponx:20190917080439p:plain

デプロイとフローの実行

設定が終了したので上部の【デプロイ】ボタンをクリックして、デプロイ作業を行います。

f:id:ueponx:20190917080426p:plain

以下のようにデプロイが成功しましたと表示されれば成功です。

f:id:ueponx:20190917080428p:plain

後はフローの実行になります。スタートと名付けたinjectノードの左側のボタンをクリックすると実行されます。

f:id:ueponx:20190917080441p:plain

デバックタブを表示させると以下のように表示されます。先ほどと同様にindex.home.raftが表示されています。これでWebAPIへのアクセスができました。

f:id:ueponx:20190917080444p:plain

もう少し触ってみる

先ほどはリンクアドレスの言語設定を行っていなかったので、英語の3単語になっていました。 URLを変えるものいいのですが、折角なので日本語も同時にアクセスできるようにしたいと思います。

先ほど作成したフローのhttp requestノード以降をマウスで選択し、コピー&ペーストを行います。あとはスタートのノードの端子と接続を行っておきます。

f:id:ueponx:20190917080446p:plain

つづいて新規に作成したhttp requestノードをダブルクリックしてURLプロパティの末尾に&language=jaを追加して【完了】ボタンをクリックします。

f:id:ueponx:20190918200627p:plain

あとは【デプロイ】ボタンをクリックして、

f:id:ueponx:20190917080457p:plain

フローの実行を行います。

f:id:ueponx:20190917080452p:plain

すると、英語と日本語の2つの結果がデバッグ画面上に表示されます。

f:id:ueponx:20190917080454p:plain


さらにもう少し触ってみる

今はhttp requestノードのURLプロパティにクエリパラメータを入力していますが、長くなると間違える可能性があります。そこでhttp requestノードにクエリパラメータをJSON形式でデータを渡しアクセスURLに反映をさせてみようと思います。

まずはスタートのinjectノードをダブルクリックします。

f:id:ueponx:20190917081734p:plain

ペイロードプロパティのブルダウンからJSONを選択します。

f:id:ueponx:20190917081738p:plain

そして入力ボックスの右側の【…】をクリックします。

f:id:ueponx:20190917081741p:plain

するとJSONエディタが立ち上がります。ここにJSON形式でKeyとValueのセットを記述します。(この時の入力にはURLエンコードをする必要はありません➡うれしい)編集が終わったら【完了】ボタンをクリックします。

f:id:ueponx:20190917081745p:plain

先ほど編集を行ったJSON形式のデータがペイロード部分に格納されます。確認できたら【完了】ボタンをクリックします。

f:id:ueponx:20190917081747p:plain

あとは、http requestノードをダブルクリックし、URLプロパティからクエリパラメータの文字列を削除し、【msg.payloadをクエリパラメータに追加】にチェックを入れて【完了】ボタンをクリックします。

これで先ほどと同様にWebAPIにアクセスができるようになります。

f:id:ueponx:20190918200654p:plain

おわりに

これでNode-REDを使用して一般的なWebAPIへのアクセスができるようになりました。 これで一般的な機器とのHTTPでの連携ができるようになりました。サーバー側もクライアント側もできるようになったので割と広がったかなと思います。

【Node-RED 関連エントリ-】

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

【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 関連エントリ-】

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

【RaspberryPi】インストールしたNode-REDのFlowEditorにパスワード設定

今回もRaspberryPiNode-REDを触っていこうかないう感じですが、最初の熱が冷めるまえにどこまで行けるか、そこが勝負な感じ。

【関連する過去エントリー】

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

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

そんなところなんですが、前回のエントリーをアップしたところ、Facebookで以下のようなコメントをいただきました。

ご参考: Raspberry PiにおけるNode-REDの活用について https://qiita.com/utaani/items/7155c62d6c5e96822afb
ローカルであっても、FlowEditorにはパスワード設定を付けた方がいいです...

ローカルだしいいやって思ってたんですが、やっぱりそれぐらいのセキュリティは必要ですよね。ご尤もです。

教えていただいたURLは非常に有用な情報ばかりなのでNode-REDを使用する方はぜひ見てください。

そのなかで今回のセキュリティに関するのは以下の部分になります。

https://qiita.com/utaani/items/7155c62d6c5e96822afb#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E8%A8%AD%E5%AE%9A

標準インストールしただけでは、IPアドレスがわかるとだれでもFlow Editorにアクセスできます。前述したようにRaspbianではpiユーザが管理者権限をもちますので、Flow Editorからexecノードを使われてしまうと管理者権限でRaspberry Piの全操作が可能になってしまいます。まったくインターネットからアクセスできないRaspberry Piでも、最低でもログイン画面設定は実施するようにしましょう。

ですよねー。ってことで設定を追加しましょう!

Node-REDのFlowEditorにパスワード設定を行う

参考通りに進めていくと/home/pi/.node-redにあるsettings.jsのファイルにあるadminAuth:の部分を検索してコメントアウト//を外して)、 passwordエントリーの値を編集することになるようです。ここで値になるのはパスワードをハッシュ値をいれることになるので、平文をいれてもダメなようです。

ハッシュ値を出力するにはbcryptjsというパッケージを使用すればよいようです。

www.npmjs.com

settings.jsの内容を確認して、編集する

では、settings.jsがあるか確認してみます。

f:id:ueponx:20190907082014p:plain

ちゃんとありました…当たり前ですが。では該当の部分を編集していきます。最近はRaspberryPiのファイル編集するときにはVisual Studio Code拡張機能である SSH FSを使用しています。

f:id:ueponx:20190907072826p:plain

SSH FSの設定に関してはからあげさんの以下のエントリーが参考になります。

karaage.hatenadiary.jp

では改めて、settings.jsファイルの内容を確認してみます。

f:id:ueponx:20190907072543p:plain

該当部分を拡大するとこの様になっています。下図中のマウスで反転している部分が該当部分です、この部分のコメント状態を外します。

f:id:ueponx:20190907074737p:plain

非コメント化するとこんな感じになります。

f:id:ueponx:20190907074825p:plain

続いてpasswordの値を削除します。(ちなみにusernameの値がadminがなっています。ログインユーザーネームを変更したい場合にはこの部分も変更しましょう)

f:id:ueponx:20190907074923p:plain

この削除した部分に、新しく設定したパスワードのハッシュ値をコピー&ペーストを行っていきます。 ハッシュ値の生成は以下のコマンドで行います。はじめにディレクトリを変更しているのはそのまま2行目の実行を行うとbcryptjsの読み込みが行えないためです。 Node.jsのコマンドの-eスイッチは引数で与えた文字列をそのまま実行する機能になります。以下の例ではhogefugaという文字列のハッシュ値をコンソール上に出力するものになります。

$ cd /usr/lib/node_modules/node-red
$ node -e "console.log(require('bcryptjs').hashSync(process.argv[1], 8));" hogefuga

f:id:ueponx:20190907080224p:plain

参考によると

ハッシュ文字列は実行毎に異なる文字列で、$で始まりスラッシュやドットを含む60文字になりますので、間違いないようコピーペーストします。

とのことなので、あらためてハッシュ値を作成してコピー&ペーストします。

以下のように生成しましょう!

$ cd /usr/lib/node_modules/node-red
$ node -e "console.log(require('bcryptjs').hashSync(process.argv[1], 8));" 【自分で決めたパスワードの平文】

f:id:ueponx:20190907081053p:plain

ペーストするとこんな感じになるので、ファイルを保存します。(画像は見にくくなっていますが、password部分をマスクしています。)

ここまできたら、Node-REDの起動(node-redコマンドやnode-red-startコマンド)または再起動(node-red-restartコマンド)を行います。

f:id:ueponx:20190907081336p:plain

無事に起動しました。ちょっと起動時のメッセージが今までとは違うような… そのあと、WEBブラウザでNode-REDへアクセスを行うと、ログインの画面が表示されます。

f:id:ueponx:20190907081549p:plain

ユーザー名とパスワードを入力すると…

f:id:ueponx:20190907081727p:plain

無事にログインできました!

f:id:ueponx:20190907081743p:plain

おわりに

これで、ローカル環境でもFlowEditorにはパスワード設定をして少しセキュアにすることができました。 実は設定のテキストファイルを触るのが面倒だなと思っていましたが、わかりやすいドキュメントがあって助かりますね。 セキュリティに関してはちゃんとやりましょう!

あんまり、内容がなかった…次こそは。

【Node-RED 関連エントリ-】

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

【RaspberryPi】Node-REDで簡単なWebサービスを作ってみる

前回のエントリーに続けて、新しく簡単なWebサービスを作ってみたいと思います。

【関連】 uepon.hatenadiary.com

新しいフローの作成

新しいフローを作成する場合には画面上の【+】のタブをクリックします。

f:id:ueponx:20190903000945p:plain

すると新規のフローが作成されます。(【フロー2】のタブが新規似作成されました)

f:id:ueponx:20190903001050p:plain

必要となるノードの配置

新しいフローの作成ができたら画面左のノードの【入力】グループから【http】を選択して

f:id:ueponx:20190903001334p:plain

ワークスペースにドロップを行います。これでHTTPプロトコルでのアクセス待ちの機能が追加されました。 この時点ではあくまでアクセスを受け付けるだけなのでレスポンス応答は返せません。

f:id:ueponx:20190903001737p:plain

次に画面左のノードの【機能】グループから【template】を選択して

f:id:ueponx:20190903084306p:plain

ワークスペースにドロップを行います。このノードで受信したデータの変換などを行うことになります。

f:id:ueponx:20190903084715p:plain

最後は画面左のノードの【出力】グループから【http response】を選択して

f:id:ueponx:20190903084322p:plain

ワークスペースにドロップを行います。このノードはドロップすると【http】という表示に変わってしまうので少し注意が必要です。このノードの機能によってHTTPプロトコルのレスポンス応答を返すことができます。

f:id:ueponx:20190903084948p:plain

これで必要なノードがワークスペースに格納されました。 続いて、各ノード間を結んでいきます。 ノードの端子をマウスでドラッグ&ドロップして結びます。

f:id:ueponx:20190903085331p:plain

すべてのノードが連結するようにします。結ばれていないノードは一連の処理として実行されませんので処理を行うノードは必ず結ばれるようにします。

f:id:ueponx:20190903085335p:plain

これですべてのノードが結ばれました。

各ノードの処理の詳細を編集する

これからは各ノードの詳細を編集していきます。

f:id:ueponx:20190904075413p:plain

まずは【http】ノード(入力側)をダブルクリックします。

f:id:ueponx:20190904080151p:plain

すると【http in ノードを編集】というタブが開きます。

f:id:ueponx:20190904075751p:plain

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

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

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

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

f:id:ueponx:20190904075757p:plain

入力が終わったら【完了】ボタンをクリックします。クリックすると編集タブが閉じます。

f:id:ueponx:20190904075807p:plain

続いて【template】ノードをダブルクリックします。

f:id:ueponx:20190904080242p:plain

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

f:id:ueponx:20190904080355p:plain

テンプレートの内容を以下の様に編集します。

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

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

f:id:ueponx:20190904080701p:plain

編集が終わったら【完了】ボタンをクリックして、タブを閉じられワークスペース画面に戻ります。

f:id:ueponx:20190904082317p:plain

画面の右上にある【デプロイ】ボタンをクリックします。

f:id:ueponx:20190904081054p:plain

クリックすると以下のような表示が行われます。

f:id:ueponx:20190904081328p:plain

実行のテスト

以下のURLをWebブラウザで開いてみます。 HTTPのポートである80番ポートではなく、Node-REDで使用している1880ポートを指定している点に注意です。

http://raspberrypi.local:1880/helloworld/node-red

f:id:ueponx:20190904081527p:plain

最後の値はパラメータになっているので変更すると結果も変わります。

http://raspberrypi.local:1880/helloworld/タロー

f:id:ueponx:20190904082605p:plain

これで簡単なWebサーバーっぽいものを作成することができました。 実際に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);

終わりに

少し短くなりましたが、今回はここまでにします。ポートの変更などに関しては課題はありますが割とうまく行ったかなと思います。 次回はPOSTメソッドを使用したアクセスなどをやってみつつ、そろそろLチカにもチャレンジしてみたいと思います。

【Node-RED 関連エントリ-】

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

RaspberryPi2にNode-REDをインストールして使ってみる

(注意)今更RaspberryPi2を使うネタです。

7月ぐらいから仕事が微妙に忙しく体力的にも割とハードな感じだったので全くなにもできてませんでした。とはいえそろそろ何かやらないとという感じで再始動します。 (現在は営業的な業務の管理職なのでデイタイムには全くなにもできない状況…)

リハビリを兼ねて、少し前に教えてもらったNode-REDRaspberryPiにインストールして、少し使ってみたいと思います。

とはいえ、家にある開発に使用しているRaspberryPi3を使うのは環境が変わってしまう可能性があるので、家に転がっていたRaspberryPi2を使用して見ようと思います。 2も3も多分作業的には変わらないかなと思います。さすがにZeroだと違うとは思いますが…


RaspberryPi2にNode-REDをインストールしてみる

家に余っていたRaspberryPi2を使うのですが、いつも通りRaspbianをダウンロードしてもうまくいきません。WiFiのUSBドングルのドライバの対応がうまく行っていないのだと思います。

最近のRaspbianイメージはBusterベースなのですが、RaspberryPi2BではWiFiのUSBドングルのドライバがうまく認識できないので少し古いイメージを使用します。 今回使用したイメージは一つ古い2019-04-08-raspbian-stretch.img(2019/08現在)です。

基本、以下のサイトを見ながらインストールをしていくことになります。

nodered.org

あとで気がついたのですが、日本語訳もありました…涙

nodered.jp

インストールとその後の設定

先程Raspbianのイメージのインストールを行い、ネットワークの設定を行った後からの設定になります。

インストール後のRaspbianのバージョンは以下のようになっていると思います。

$ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 9.9 (stretch)
Release:        9.9
Codename:       stretch

f:id:ueponx:20190817203416p:plain

インストール後にaptコマンドを使用してパッケージ関連のアップデートを行っておきます。

$ sudo apt update
$ sudo apt upgrade

Node-REDのインストールコマンドは以下となります。

$ bash <(curl -sL https://raw.githubusercontent.com/node-red/raspbian-deb-package/master/resources/update-nodejs-and-nodered)

このコマンドを実行すると過去にNode-REDがインストールされていた場合でもアンイストール後に最新版のインストールを行ってくれます。 その際、Node.jsのバージョンがLTSバージョンに変わるので古いバージョンのNode.js使用していた場合には注意が必要かもしれません。

f:id:ueponx:20190817204154p:plain

質問されますが、内容を確認して問題なければyキーを押下します。

f:id:ueponx:20190817204441p:plain

インストールは時間が結構結構かかるので、その間は別の作業をするのがおすすめです。 以下のような表示になればインストール終了です。

f:id:ueponx:20190817205522p:plain

インストール後のNode.jsバージョンの確認

Node-REDと同時にインストールされたNode.jsのバージョンも確認しておきましょう。

$ node -v
v10.16.3
$ npm -v
6.10.3

Node.jsはうまくインストールできているようです。

Node-REDの起動

コマンドラインでNode-REDを開始する場合にはnode-redコマンドを起動します。

$ node-red

f:id:ueponx:20190817210423p:plain

実行すると起動したコンソールが奪われてしまうので、RaspberryPiの起動時にサービスとしてスタートさせるのがおすすめかもしれません。 といっても、Node-REDWebブラウザで使用するので操作するのでそのままでいいかもしれませんが。

サービスとしてスタートさせる場合には以下のように

$ sudo systemctl enable nodered.service

サービスを停止するのであれば以下のコマンドを実行します。

$ sudo systemctl disable nodered.service

エディタへのアクセス

Node-Redが無事に起動したら、Webブラウザから以下のアドレスでアクセスをします。

http://<ip-address>:1880

http://<hostname>:1880

IPアドレスでもホストネームでも問題ありません。 Raspbianがデフォルト状態でmDNSが使用できるようであれば以下のようなアクセスも可能です。

http://raspberrypi.local:1880

f:id:ueponx:20190817213240p:plain

RaspbianのX経由のブラウザでアクセスする場合は、

http://localhost:1880

とします。

f:id:ueponx:20190817214932p:plain

これで無事に作業を始めることができるようになりました。 以降はPCからのWEBブラウザ経由で操作をしてみようと思います。

Hello World

では、最初にHello Worldを動かしてみます。

まずは左側のノード一覧の【入力】グループの中から【inject】ノードを

f:id:ueponx:20190901162645p:plain

ワークスペースにドロップします。するとドロップされたノードは【タイムスタンプ】という表示に変わります。

f:id:ueponx:20190901162653p:plain

続いては、左側のノード一覧の【出力】グループの中から【debug】ノードを

f:id:ueponx:20190901162701p:plain

ワークスペースにドロップします。ドロップされたノードは【msg.payload】という表示に変わります。

f:id:ueponx:20190901162711p:plain

上記のような表示になっていればOKです。ノードをワークスペースに配置したら、ノード間の端子をマウスでドラッグしてつなぎます

f:id:ueponx:20190901170727p:plain

f:id:ueponx:20190901170847p:plain

この操作が基本的な操作になります。

ではとりあえずここまでで一旦実行してみます。画面の左上にある【デプロイ】ボタンをクリックします。【デプロイ】ボタンはワークスペースに変更があると赤く表示が変わります。変更が反映されないときなどは確認をしておきましょう。(変更がないときにはグレーダウンしています)

f:id:ueponx:20190901171249p:plain

【デプロイ】ボタンをクリックすると、結果が表示されます。エラーがなければ以下のようなに表示されます。

f:id:ueponx:20190901171552p:plain

デプロイが成功したら、画面左にある【デバック(虫のアイコン)】ボタンを押します。

f:id:ueponx:20190901172050p:plain

すると右側のタブがデバック表示に変更します。

f:id:ueponx:20190901172433p:plain

これで準備ができました。ここまできたら【inject(タイムスタンプ)】ノードの左側のボタンをクリックしてみます。

f:id:ueponx:20190901172749p:plain

クリックするとデバックタブに実行結果が表示されます。

f:id:ueponx:20190901174320p:plain

デバックに表示されているのはタイムスタンプのNumber型での表示なのでよくわからない数値になっています。とりあえず今回はHelloWorldという文字列を表示させたいので編集していきます。

ワークスペースの【inject(タイムスタンプ)】ノードのダブルクリックします。

f:id:ueponx:20190901174527p:plain

するとワークスペースにノード編集画面が表示されます。

f:id:ueponx:20190901174848p:plain

その中に【ペイロード】の値を【日時】から【文字列】に変更します。

f:id:ueponx:20190901175208p:plain

変更後に入力ボックスに

f:id:ueponx:20190901175458p:plain

HelloWorldを入力します。終わったらノード編集の【完了】ボタンを押します。

f:id:ueponx:20190901175811p:plain

ボタンを押すと以下のような画面になります。【inject(タイムスタンプ)】ノードが【inject(HelloWorld)】ノードに変わっています。

f:id:ueponx:20190901180335p:plain

変更が確認できたら右上の【デプロイ】ボタンをクリックします。

f:id:ueponx:20190901181705p:plain

デプロイが成功したら【inject(HelloWorld)】ノードの左側のボタンをクリックしてみます。

f:id:ueponx:20190901182013p:plain

ようやく念願のHelloWorldが表示されました。

f:id:ueponx:20190901182704p:plain

おわりに

今回は長くなってきたのでここまでとなります。

割とノンコーディングでもできるっていうのはいいですね。とはいえ、始めるにはある程度、事前知識が必要になるので、準備も必要なんだろうなと感じました。

今後はWebサービスをやってみたりArduinoとの連携やRaspberryPiのGPIOの使用をやってみたいと思います。

【Node-RED 関連エントリ-】

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

uepon.hatenadiary.com

/* -----codeの行番号----- */