北摂ものづくり研究所TOP
電子工作の部屋 
Node-REDの部屋 TOP
各種ノード  WEBから天気情報を取得  yahooファイナンスから株価
Node-REDはIBM社が開発したフローベースの
ビジュアルプログラミング開発ツールで
オープンソース化されて現在に至っている。
Node-REDはNODE.jsが動作する環境であれば
サーバー上でも、デバイス上(PCも含めて)でも動作する。
先駆者により関連するノードがすべて用意されているならば
IOTの処理に必要な全領域のアプリケーションの作成を
ほぼコード入力なしでの実現を可能にしている。

日本では2015年ころからイベントで紹介されており
この頃からワークショップなどセミナーも
少しずつ開催されるようになった。
少し後の2017年ころには関連書籍も出版されるようになった。
書籍の出版(著作者)には日立グループメンバが目につく、
日立、パナソニック、富士通関連の各グループが積極活用しており
これらの企業メンバーが中心になって各種イベントも開催されてきた。
Node-REDユーザーグループジャパン(NUGJ)運営も
日立グループ(関西はパナソニック)が中心で
パナソニックグループでは
WonderLAB大阪でNode-REDを使用したイベントを開催したり
社内研修を開催して活用しているらし。
富士通はイベント開催時の会場提供を行っている。

下図はNode-REDで天気情報を取得するフローの作成例である

画面左側からパレット(部品の倉庫?)
中央が作業領域(画面中央の「フロー1」〜「フロー3」)
デバッグモニタ等で使用するで右側の領域で構成される。

Node-REDを簡単に解説すると
@各種処理に必要な部品(ノードと呼ばれる)を
パレットから作業領域にドラッグ&ドロップで配置
A処理の順番にノードとノードの間を配線し
B各ノードをダブルクリックして選択し
順次、設定を行う。
C最後にデブロイ(コンパイル)すると
プログラミングが完了する。
簡単に手順を言及すると以上となる。
IOT時代に開発された新しい種別の
プログラミング補助ツールである。

なおPCで使用する場合も、Node-REDはローカルサーバ上で動作している。
起動はコマンドプロプトで「Node-RED」⏎と入力して起動させ
ブラウザでURL「http://localhost:1880」を指定して開発環境の表示させる。


一例として天気情報のページから今日と明日の天気を取得する
フローを作成してみる。
参照先のホームページのイメージは以下のとおり。

このページから大阪市の天気情報のみを取得する。

天気情報の取得には情報元のページのURLを
「http request」ノードの設定画面で指定し
後段の「html」ノードで要素を指定してフィルタすると
データは絞り込まれ配列状に取得されるので
得た配列の何番目に天気情報があるかを確認し
「change」ノードで天気情報の格納位置を指定して
天気を取得する。
取得した天気情報のアウトプットは
「raspberrypi」ノードでラズパイのIOポートをたたき
天気に対応したLEDを点灯させたり
液晶に天気を表示させたり、
「switch」ノードで条件分岐し
雨や雪の情報が含まれている場合には
「今日は雨が降ります」というような短文を
「template」ノードで作成して
「メール」ノードやSNS系のノードで情報を送信したりと
応用範囲は様々あると思いますが。
まずはデバッグモニタで表示して確認する。
「debug」ノードは任意の位置に配置するが
最初からうまくいけば「debug」ノードは
最後段でよいが、全く表示しないなど、
うまくいかない場合は切り分けるために
前段にも配置する。
「debug」ノードを複数個配置してもモニターは一つなので
どのノードの出力かわからなくなることもある。
右側のスイッチで有効、無効の切り替えができるので
表示不要な「debug」ノードは無効にしておく。
(ボタンの色が緑が有効、白が無効になる。)
なおデバッグモニターが画面右側に
表示されていない場合は
右上の三本線のアイコンから
表示⇒デバッグモニタで表示される

処理のタイミングの順に
「inject」ノード、「http request」ノード,
「debug」ノードの順に配置し配線する。
「http request」ノードに
URLを設定してデブロイしてモニタを確認する。

次に「html」、「change」ノードを挿入し
「debug」ノードを追加し配線する



各ノードの設定は

「inject」ノード
繰り返しの有無を選択
繰り返し有の場合は周期を設定する
動作のタイミングのみの使用なので
送付データは特に設定不要


「http request」ノード
参照先のURLを設定します。
ここでは大阪市の天気を指定しています


「html」ノード
「html」ノードの設定には欲しい情報が含まれる部位の
要素を指定します。
そのためにはhtmlタグの階層を解読する必要があります。
デバッグモニタの表示では見にくかったので
対象ページのブラウザのソースを表示させました。
改行されていない場合もあるので
必要に応じて改行したり、インデントを入れます。
主なブラウザではショートカット「Ctrl+u」で表示できるようです。
(Firefox、Edge、Google Chrome共通)
htmlタグは
<〇〇>で始まり、</〇〇>で終わる とういうのが基本です
例えば
htmlは
<html>

</html>
の間
「head」は
<head>

</head>
の間
「body」は
<body>

</body>
の間
フォント指定は
<font color=red>

</font color>

の間
のようになります。
さて、次に階層構造ですが、
独立した要素の階層構造の場合は
組み合わせとなります。
一方、色違いの指定のような、独立しない要素の場合は
組み合わせ表示はできないので、子要素が割込み、
親要素は一旦保留されます。
子要素が終了したところで親要素が復活します。
下の例では最初にフォントカラーが赤に指定していますが
途中で緑が割込み緑が終了したところで
赤が復活します
色とサイズは独立した要素なので
大文字指定の部位は赤の大文字で表示されます。
<font color=red>
 〜赤〜

  <font color=green>
   〜緑〜
  </font color>

 〜赤〜

  <font size=6>
   〜赤&サイズ6〜

  </font size>

 〜赤〜
</font color>

もちろん、例外もあります
例えば、<br>・・・改行
<hr>・・・しきり線・・等
そこは一旦置いておく・・・
要素の階層を踏まえてわかりやすく
表示すると以下のようになる
<section class="today-weather">・・・

  <div>
   <div>

    <img src=xxx alt="雨のち晴" title="雨のち晴" xxx >  

   </div>
  </div>

</section>
天気情報は親要素「section」今日の天気の
の子要素「div」2階層下の
「img」の中に含まれるので
抽出する要素に半角スペースをはさんで
「section div div img」を指定する。


「html」ノードの後段に「debug」ノードのみを有効にして、
デブロイして「html」ノードから出力される値を確認します。

複数のデータが配列状に取得されるのでモニタ内で展開していきます。
まず「{object,object・・・object}」を展開
次に{0_9}を展開しさらに「0」「1」をそれぞれ展開すると
「alt」と「title」の項目で
天気情報が取得できていることを確認できる


したがって「html」ノードの後段の「change」ノードでは
「payload[0].alt」又は「payload[0].title」
と指定すれば今日の天気が
「payload[1].alt」又は「payload[1].title」
と指定すれば明日の天気を取得することができる。


さて、天気情報だけ取得したのでは
どこか他の天気を取得しているかもしれないので
今日の日付けも取得する
タグを読解すると<section>〜</section>の間の
<h3>〜</h3>タグの中にある

「section h3」と指定して取得する


デバッグ表示を展開すると

となるので、後段の「change」ノードには
payload[0]を指定すると今日の日付けが
payload[1]を指定すると明日の日付けが
が取得される。
今日、明日、{友引}、{先負}も含めて取得されるので
もし省きたければ「change」ノードでカットする。

(今日の日付けの設定)

今日の天気と今日の日付けを
表示させるように「debug」ノードを配置し設定すると
デバッグモニタの表示は下図のようになる。
フローの中へのコメントはコメントノードを使用します。

さらに明日の天気、明日の日付けも表示できる
フローを下記に示す。
日付け⇒天気の順位表示させるために
遅延を設定するため「delay」ノードを使用しました。


今日の天気と今日の日付けのみを
表示させるように「debug」ノードを設定すると
デバッグモニタの表示は下図のようになる。
最後にデバッグモニターではなんだかなあ
というのであれば
「dashboad」を使用して表示させます。

ダッシュボードは変化する値の可視化に
各種メーターやグラフがよく使用されますが
今回はテキストの機能を使用します。

「dashboad」ノードはデフォルトでは搭載されていないので
ダウンロードする必要があります。
「パレットの管理」から「ノードの追加」で
キーワードを入力して検索し追加します。


下図は今日の日付と天気、さらに明日の日付と天気を
テキストに表示させた例である。


「dashboard」グループの「text」ノードを使用します。


今日の日付けと今日の天気を今日の天気のグループに
明日の日付けと明日の天気を明日の天気のグループに
なるようにグループを設定します。
最初に今日の天気情報を表示する
「text」ノードの設定(編集)画面へ入り
「新規にui_groupを追加」を選択し、
グループの編集(設定)画面へ入り
グループ名を作成します。
(デフォルトを変更し「今日の天気」と設定します。)

次に今日の日付けを表示する「text」ノードの
編集画面へ入り作成した「group」(今日の天気)
を指定します。


明日の天気と明日の日付けも同様に
明日の天気の「group」を作成し設定します。

設定すると下図のようになります。

図は明日の天気のノードの名前を設定していない状態です。
「天気」、「日付け」としてください。



次に天気に応じてメールを送るフローを作成してみます。
朝定時にメールを送る前提とし、当日の天気のみを使用します。
メール送信は「email」ノードを使用します
「dashboard」ノードと同じく
パレットの管理から追加が必要です。

これまでのフローで明日の天気や日時の取得は
不要となるので削除します。
前述のフローから必要な部位をを選択し
コピーしてフローの書き出し⇒
読み込み込んで使用しています。
練習してみてください。

「inject」ノードの設定を毎日定刻の設定にしますが
「http request」「html」「change」ノードは特に変更しません。
今日の天気を取得した「change」ノードの後段に
「switch」ノードを配置します。
「switch」ノードで天気による条件分岐を行います。
さらに、その後段に「template」ノードを配置し
天気に対応したメッセージを作成します。
「template」のすべての出力を「debug」に
必要に応じて「email」に接続します。
各ノードにはわかりやすい名前を付けます。
配線が見やすくなるように配置します


「switch」ノードの設定

雨や雪が降る場合の条件設定として
「雨」、「雪」を「含む」(contains)
条件をそれぞれ設定します。
1日中晴の日が続くと菜園なら水やりが心配です。
夏ならば熱中症の可能性もあります。
「switch」の出力の2つを
(「晴れ」と「晴」の場合)
「晴れ」又は「晴」で完全一致(==)として
後段のテンプレートノードに
接続しています。
HPにより「晴れ」又は「晴」となることを想定
「晴れ」「晴」は完全一致なので
「晴れ時々曇り」だと何も表示されません。
曇も同様です。どのような条件でも
デバッグラインに表示させたい場合は
「switch」ノードに出力を追加し
抽出条件は「その他」を選択します。
この出力を「template」経由で
「Debug」ノードに接続します。
「template」ノードには「その他の天気です。」
「今日の天気は〇〇です。」等出力するように設定します。

「template」の設定(雨、雪を含む場合の後段)

「template」ノードでは天気に応じて
対応したメーセージが生成されるように
「今日は○○が降る可能性があります。」とか
「今日は○○が降るかもしれません。」等
となるように
「今日は{{payload}}が降る可能性があります。」
「今日は{{payload}}が降るかもしれません。」
というような感じで設定します。

「デブロイ」⇒「inject」クリック
天気に対応したコメントがデバッグモニタに
表示されれば成功です。

さて、実際の天気の変化を待っていると
全パターンの天気に対してテストを完了するのに
偶然任せで非常に時間がかかってしまいます。
「switch」ノードの前段に
「inject」ノードを挿入して加速試験します。

試験していただくと「雨のち曇り」「雨時々曇り」などを入力すると
「今日は雨時々曇りが降るかもしれません」などという
メッセージになってしまうことに気づけると思います。
最初から気付く方も多いかもしれませんがお付き合いください・・・

そこで「switch」ノードと「template」ノードの間に
「change」ノードを挿入して対処します。

「change」ノードで「雨」を含む場合は文字列を「雨」に、
同様に「雪」を含む場合も「雪」に変更してから
「template」ノードへ送ります

「change」ノードの設定は代入で、対象の値を文字列とし
値に「雨」と設定すると雨に変更できます。
同様に雪を含む場合も
後段の「change」ノードで雪に変更します
そして電子回路の「wired or」の感覚で
「template」ノードに接続しましす。
これで思うようなメッセージになります。


デバッグモニタにうまく表示できれば
「email」ノードを設定すれば完成です
天気に応じたメールを発信できそうです。



さてラズパイに「Node-RED」をインストールできます。
(VerによりRaspbianには標準でNode-REDがインストール)
ラズパイで天気を取得するとどう活用できるでしょう。
GPIOを制御し天気に対応した表示を
行うガジェットが比較的簡単に
作成できそうです。


各種ノード  WEBから天気情報を取得  yahooファイナンスから株価
Node-REDの部屋 TOP



 電子工作の部屋
 北摂ものづくり研究所TOP