Androidのメモとか

ポキオの日記です。今日も遅延してない。

Webページのスクリーンショットを撮影するNode-REDノードを作成して公開しました

スポンサードリンク

しました。

ポキオ Node-RED スクリーンショット puppeteer

tl;dr

こちらです。

flows.nodered.org

  • If this node is triggered, this node will take a screenshot of the configured web page in setting screen.
  • This node takes a screenshot as PNG image, and encodes with base64.
  • The base64 string will be returned.

これはどんなノード?

予め設定したWebページのスクリーンショットを撮影して、そのスクリーンショットPNG)をBase64エンコードして次のノードに渡すものです。

たとえば、こんな感じで使います。

ポキオ Node-RED スクリーンショット puppeteer

[{"id":"67c61941.053d58","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"2660a5a5.ba220a","type":"http in","z":"67c61941.053d58","name":"","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":180,"y":140,"wires":[["2fe6f48.ec2f80c"]]},{"id":"2fe6f48.ec2f80c","type":"screenshot","z":"67c61941.053d58","name":"","url":"https://relativelayout.hatenablog.com/","x":300,"y":200,"wires":[["86463a3a.b78058"]]},{"id":"86463a3a.b78058","type":"template","z":"67c61941.053d58","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <body>\n        <img src=\"data:image/png;base64,{{payload}}\">\n    </body>\n</html>","output":"str","x":420,"y":260,"wires":[["769165e4.dc545c"]]},{"id":"769165e4.dc545c","type":"http response","z":"67c61941.053d58","name":"","statusCode":"","headers":{},"x":520,"y":320,"wires":[]}]

スクリーンショットノードで取得できるBase64の文字列を、次のテンプレートノードでHTMLページに埋め込んでいます。

<html><body><img src=\"data:image/png;base64,{{payload}}\"></body></html>

こんな感じで作ったフローにアクセスしてみると・・・

ポキオ Node-RED スクリーンショット puppeteer

スクリーンショットが、ちゃんとページに埋め込まれてますね。

どうやって動いてるの?

ノードの内部では、ヘッドレスChromeをいい感じにこねくり回してくれるPuppeteerを使っています。

https://pptr.dev/

github.com

Node.jsのライブラリで、認証をパスできたり、DOMを操作できたり、Seleniumみたいにいろいろできる神ライブラリです。もりもり使いたい人は、本家ライブラリも合わせてご利用下さいませ。

今後の予定

以下の機能を中心にアップデートを予定しています。

他にも、欲しい機能があればIssuesとかにコメントください。(対応するとは言っていない)

既知の不具合

いくつかの既知の不具合が存在します。

ARMで動かない話

対応しました!

0.0.4以降では、Headlessモードに対応したChromiumを別途インストールし、そのパスをノードの設定画面で指定すれば動作するようになりました。

動きません。

Puppeteerの依存関係にあるChromiumですが、x86用でARMようではなく、Puppeteerもデフォルトでそれを使うようになってます。コンストラクタでARM用のChromiumを指定してあげればいいんですが、現状のノードではその機能は入っていません。

qiita.com

ARMで使えない、ということはRaspberry Piでも使えないということになります・・・。本当にごめんなさい。おいおい対応します。

herokuで動かない話

ちょっと闇が多すぎ・・・。

qiita.com

詳しくは、上記リンクを御覧ください(真顔)

「Androidのメモとか」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

このブログは個人的なメモ書きであったり、考えを書く場所であります。執筆者の所属する団体や企業のコメントや意向とは無関係であります。また、このブログは必ずしも正しいことが書かれているとは限らず、誤字脱字や意図せず誤った情報を載せる場合がありえます。それが原因で読者が不利益を被ったとしても、執筆者はいかなる責任も負いません。ありがとうございます。