北摂ものづくり研究所TOP
電子工作の部屋
Node-REDの部屋 TOP
Node-RED UG Osaka 勉強会 Vol.2
各種ノード
WEBから天気情報を取得
yahooﾌｧｲﾅﾝｽから株価
「Node-RED」を知ったのは2015年上旬のこと
IOT関係のイベントだった。
その時のイメージは
特にIOTを視野に入れた
ソフトウエア作成ツール
WindoowsのようなPCのOS上でも、サーバー上でも、
OSが動く程度のパワーがあればデバイス上でも動作するツール
使い方はノードと呼ばれる電子回路であれば部品を
配置し、ノードの出力端子と別のノードの入力端子を
電子回路を配線するかのごとく接続する。
ノードには設定が必要だが簡単な設定をするだけ。
とても簡単らしい・・・
興味はあったが使用する機会がないまま
２年の歳月が経過した2017年頃から
ワークショップや交流会が開催されるようになり
周囲に使い始める人が徐々に増えてきた。
それでも具体的にどういう使い方が
有効なのかイメージができない存在だった。
日本語の書籍も販売されるようになったが
関する書籍は少なく、とりあえず当時出版されていた
３冊すべて購入して何から試そうかと模索した。
そして、メールサーバー、無料HPサーバを除き
サーバーへの登録は避けたかったので
「つないでつないでプログラミング
Node-REDでつくる初めてのアプリ」
(この書籍は残念ながら現在すでに廃版)
の中で紹介されている
「Node-REDで 天気情報の取得」(P149～)
を試みたのが最初。
なお参照先のHPは当時と構成が変わっているため
書籍にもとづいてそのままフローを構成しても
天気情報は取得できないが考え方は今でも流用できる。
ただし、参照先のページの利用規約に違反する可能性もあるので
注意が必要である。ひょっとこの点を考慮して
廃版としたのかもしれない。
このHPの各ページも含め流用して使用する場合は
くれぐれも自己責任でお願いします。
・PCへのインストール手順
インストール手順
書籍ではP198参照
その他ドキュメント
・起動
①コマンドプロンプトで「node-red」
下図のように
[info] Starting flows
[info] Started flows
の表示が出るまで少し待つ。
各種設定は、「settings file」(赤枠)を探して編集します。
管理フォルダは起動時に表示されます。
「Setting.js」の拡張子を「.txt」に変更すればテキストエディタでも
編集できます。
②Node-REDの表示はブラウザで行います。
ブラウザを起動しURLに「http://localhost:1880」を入力します。
ブラウザによっては「http://」は省略表示されます。
Node-REDの起動時の画面です。
左からパレット(部品の倉庫)
中央が作業エリア
右側は情報(デバッグに使用します)
作業エリアは「＋」で追加できます。
作業領域(図では「フロー1」「フロー2」)の名前は変更できます。
変更する場合はタブをダブルクリックし編集画面に入ります。
編集画面の名前の欄を変更します。
作業領域を削除したい場合は、左上の削除ボタンを使用します。
作業領域が最後の１つとなった場合は削除されません
百聞は一見に如かず
もっとも簡単なフローを試しに描いてみます。
共通グループの「inject」ノードを入力ノードに
同じく出力ノードに「debug」ノードを使用します
各ノードをパレットから作業領域へドラッグ＆ドロップで配置します。
配置するとデフォルトで「inject」ノードは「タイムスタンプ」
「debug」ノードは「msg.payload」と表示されます。
(2021年11月現在)
①次に「inject」ノードの出力端子と
「debug」ノードの入力端子の間を配線
②デブロイします。
「inject」ノードの左側のボタンを押して
デバッグモニタに表示されるか確認してみてください。
デバッグモニタが表示されていない場合は画面右上の
ハンバーガーメニュー(３本線)「機能メニュ」⇒
「表示」⇒「デバッグメッセージ」
を選択して表示させます。
「inject」ノードはデフォルトで
時刻(タイムスタンプ)を出力しますが
任意に変更できます。
出力を文字列に変更すると任意の文字列を
出力するように設定できます。
デブロイした後、動作確認します。
「inject」ノードの左側のスイッチをクリック
変更前後のデバッグモニタの表示を確認します。
変更前はタイムスタンプが変更後は文字列が確認できます。
これで簡単な動作確認ができました。
デバッグモニタは新しい情報を下段へ追加します。
見にくい場合はゴミ箱のボタンで履歴を消去します。
フローの移動は同一作業領域の中であれば
Excelで図形を移動させる感覚で処理できます。
(図ではフロー１及びフロー２の内ではコピーや移動が可能)
しかし、Excelでよく使用する(個人的感想)
ワークシートまるごとコピーの感覚で
作業領域ごとのコピーすることは
Node-redではできません。
またExcelでワークシート上の一部又は全部の図形を選択し
他のワークシートへコピーする感覚で
異なる作業領域間(図ではフロー１とフロー２の間)で
ドラッグ＆ドロップでコピーや移動することはできません。
一旦フローをjson形式にexportした後に、importすることで
フローの複製を行います。
手順は以下になります。
まずコピーするフローの範囲を選択します。※
「Ctrl+c」でコピー
※選択が解除されているように見えても選択はできていることが多いです。
ノードのコピーができていることは上部の表示で確認します。
上図のように「〇〇個のノードをコピーしました」と表示されれば、
クリップボードへコピーできているので次へ進みます。
右上の機能メニューから「書き出し」を選択
ファイルに保存する場合は「ダウンロード」を指定しますが
今回は、すぐに貼り付けるので「書き出し」を選択します。
「書き出し」を選択したのでクリップボードに
「json形式」で書き出されています。
(書き出しができていることを上部の表示で確認します)
次にコピー先の作業エリアに切り替えます
(今回は「フロー1」から「フロー2」へ切り替えます)
そして、機能メニュから今度は「読み込み」を選択
「json形式のフローデータを貼り付け」タブを有効にし
「Ctrl＋v」でクリップボードのフローデータを
貼り付けて「読み込み」を実行します。
適当な位置に配置すればコピーは完了です
ではもう一歩、踏み込んだ動作確認をしてみます。
ネットワークから機能ノードの
「http request」ノードを
使用してWEBから情報を取得してみます。
接続済の配線上(配線が破線の状態時)に
ドロップすると間に挿入できます。
配線をカットして、再度配線するより
効率的に作業ができます。
「http request」ノードをダブルクリックして
ノードを編集します。
「URL」欄に参照するURLを入力します。
今回は天気情報のサイトを入力します。
名前の欄は任意です。
下図はそのままですが、
「天気情報取得」などとするとよいと思います。
「完了」で編集画面を閉じたら
画面右上の「デブロイ」ボタンを押し下げ後に
「inject」ノードの左側のボタンをクリックすると
動作を開始します。
デバッグ表示は下のように表示します。
ただし初期設定では表示文字数が
1000文字に設定されているため
すべて表示されません。
必ずしも必要ないかもしれませんが
何か想定外の現象が発生した場合の切り分けが
行いにくくなる場合があるので
再設定しておいた方が良いと思います。
赤枠のファイル(Setting.js)を探し
テキストエディタで修正します。
「 debugMaxLength: 1000,」の箇所で
デフォルト値＝1000
を適当な値に再設定して保存すればOKです。
もう少しノードを追加したフローの例です
各ノードの出力に「debug」ノードを接続しています。
この場合デバッグモニタの表示は１つなので
すべてのノード出力情報が1つの画面に
混在して表示されます。
場合によってはわかりにくくなります。
ここで「debug」ノードの右側のボタンを
押し下げすると、デバッグラインへの表示を
有効。無効を切り替えることができます。
とりあえず全てのノード出力に対して
「debug」ノードを配置してを接続をおき
確認したいポイントのみ
「debug」ノードのみ有効して使用します。
すべてのノードの入力は1端子です。
「Switch」ノードや「Function」ノードのように
出力端子は複数にできても入力は１つです。
ノードの中で２つ入力(A、B)を使用して
演算(C=A+B)の結果を出力するようなことは
できませんが。
電子回路で言うところのワイヤードORは可能です。
下記の場合、左右のデバッグ表示は同値になります
ただし右図の場合は不要な表示を消したい場合は
配線をカットすることになります。
前述の話と比較すると「debug」ノードの
ボタンの無効、有効で表示、非表示を切り替えるか
不要になったら配線カットするか違いだけです。
では天気情報を取得を説明します。
各種ノード
WEBから天気情報を取得
yahooﾌｧｲﾅﾝｽから株価
Node-REDの部屋 TOP
電子工作の部屋
北摂ものづくり研究所TOP
