ブロックを積みながら(112) Node-RED、Web上のドキュメントをパースその2

Joseph Halfmoon

前回はhttp requestノードによりWeb上のhtmlドキュメントを取得、そこからテーブル部分を抜き出しました。しかし出力はデバッグノードに垂れ流し。今回は、Dashboard上のtableノードに出力するようにしたいと思います。元のテーブルよりも美麗?な上に、並べ替えもできて便利。ホントか?

※「ブロックを積みながら」投稿順 index はこちら

※動作確認にはRaspberry Pi 3 model B+のRaspberry Pi OS(32bit)上にインストールした以下を使用しています。

    • Node-RED v2.0.5
    • node-red-dashboard 3.2.0
今回実験のフロー

今回のフローは前回フローの末尾を分岐させて、DashboardのTableノード(node-red-node-ui-table)を追加しただけのものです。tableOnWebFlow

ただし、Table用にデータを整形しないとならないので各ノードの設定は前回と異なっています。

各ノードの設定

最上流のInjectノードとhttp requestノードの設定は変更なしです。変更は中央のhtml parseノードからです。

htmlNodeSetting

本当はこのhtmlのパーサ・ノードは高機能です。jQueryとCSSを駆使して要素抽出をできるみたいですが、その方面素人の私の方が対応できてないっす。今回はtableを取り出すときにテキストでなくHTML形式で取り出すように変更しただけです。

というわけで、取り出したテーブルの整形は後段のfunctionノードにまかされました。DashboardのTableノードはJSONオブジェクトを受け付けるので、やっていることは取り出したHTMLテーブルをJSON化している(ここでは文字列処理)だけです。この辺もっとカッコよくできるのだろうけれど、勉強してまた今度ね。

functionNodeSetting

さて、本題のDashboardのTableノードの設定が以下に。オブジェクトに載ってくるプロパティの値毎にカラムの指定をするスタイルです。なお設定が長いので途中までです。tableNodeSetting

実行結果

元データのWebページは以下の本サイトの過去記事です。

MicroPython的午睡(81) STM32F401RE版、使われているタイマを調べる

最初の方にある「テーブル」を取り出してきて処理してます。

Dashboardに表示されたテーブルが以下に。tableOnWebResult

元のテーブルよりも美麗?な上に、並べ替えもできて便利でないかい。

ブロックを積みながら(111) Node-RED、Web上のドキュメントをパースその1 へ戻る

ブロックを積みながら(113) Node-RED、CSSセレクタでHTML要素を抽出 へ進む