ダッシュボード画面(Web画面)のスクリーンショットの自動取得

1.概要

R-MSMなどで取得したデータを表示したダッシュボードの画面のスクリーンショットを取得する方法を説明します。データを画像として定期的に保存する用途や社内の啓蒙活動やステークフォルダの方々への宣伝のために公開HPなどにダッシュボードの画面を掲示し定期的に更新するというような用途に使用できます。

ダッシュボードの画面のスクリーンショットの取得には、“Puppeteer”を使用します。
Puppeteerは、 Chrome DevTools Protocol上でChrome/Chromiumを制御するためのハイレベルのAPIを提供するNode.jsのライブラリです。PuppeteerとChromiumを使ってWebページのスクレイピングを行うことができます。そのスクレピング機能のうちの画面のスクリーンショットを取得する機能を使用します。

ここでは、“Puppeteer”と“Chromium”を“Ubuntu”にインストールする方法のみ説明します。そして、Ubuntu上のNode-REDから起動して定期的にターゲットのダッシュボード(または、Web画面)のスクリーンショットを取得し、ダッシュボードに表示する方法とftpノードを使って転送する方法を説明します。というのも、Raspberry Piでは、Puppeteerと一緒にインストールされるChromiumがx86系のため、ARMで動作しているRaspberry Piではそのままでは動かず、別途ARM用のHeadlessモードで動作するChromiumをダウンロードしてコンパイル&インストールする必要があり（Raspberry Piでpuppeteerを動かす方法）、現時点でわれわれが動作の確認ができていないためです。

また、Windowsへのインストールと動作確認も説明します。こちらを参照ください。

2.PuppeteerとChromiumのインストール

PuppeteerとChromiumのインストールをUbuntu上に行い、端末画面から実行してWeb画面のスクリーンショットを取得します。
Ubuntuのバージョンは、22.04 LTSで、動作確認しています。

2-1. Node.jsとnpmのインストールの確認

Puppeteerのインストールと動作には、 npmとNode.jsが必要ですが、Node-REDがインストールされていれば、Node.jsとnpmはインストールされています。Node-REDをインストールが未だの場合は、こちらのページ（ Ubuntuへのインストール）を参考にNode-REDをインストールしてください。

$ sudo apt install npm

でnpmとnode.jsをインストールすると、インストールされるnode.jsとnpmのバージョンが古いので、再度アップデートする手間が発生しますので、ご注意ください。

2-2. Puppeteerのインストール

以下のコマンドを使って、Puppeteerをインストールします。少し時間がかかります。画面が止まって動かなくなっても慌てず、終了するまで待ってください。

npm install puppeteer

2-3. Chromiumのインストール

次に、以下のコマンドで、Chromiumをインストールします。

$ sudo apt install chromium-browser

以下に、端末画面の表示を載せます。最後の方に、chromium-browserがインストールされているパスが載っています。

念のために、chromium-browserがインストールされているパスを調べます。

 which chromium-browser

このパスを後ほど使用します。

2-4. 動作確認用javascriptの準備

puppeteerの動作確認のための、javascriptのプログラムを準備します。
ここでは、スクリーンショットを撮るだけの簡単なプログラムを準備します。

次のプログラムを”screenshot.js”として保存してください。
先ほど調べたchromium-browserのパスを、executablePath:’/usr/bin/chromium-browser’の部分に記載して下さい。
また、page.goto(‘https://www.google.com/search?q=INDEXNIKKEI’);の部分が取得対称となるWebページのアドレスです。ダッシュボードの場合は、’http://192.168.80.1:1880/ui/’のように記載してください。
sleep(3000);の部分は、3000msの待ち時間の確保です。必要に応じて増減して下さい。
page.screenshot({path: ‘screenshot.png’});の部分が、スクリーンショットの保存ファイル名になります。現状の記述は、実行フォルダにscreenshot.pngというファイル名で保存されます。こちらも必要に応じて変更してください。

const puppeteer = require('puppeteer');

async function run () {
  const browser = await puppeteer.launch({
    headless: 'new',
    executablePath: '/usr/bin/chromium-browser',
    defaultViewport: {width: 1080, height: 1080}
  });
  const page = await browser.newPage();
  await page.goto('https://www.google.com/search?q=INDEXNIKKEI');
  await sleep(3000);

  await page.screenshot({path: 'screenshot.png'});

  browser.close();
}
run();

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

2-5. 動作確認

準備したjavascriptを置いたフォルダに移動して、以下のコマンドを実行します。

node screenshot.js

しばらくすると、プロンプトが返ってきます。

同じフォルダに、screenshot.pngのファイルが出来ています。viewerで見てください。ここでは、以下に示します。

万が一、エラーが出たら、エラーの内容を確認して対応してみてください。

3.Node-REDからのスクリーンショット取得

3-1. フローと動作確認

それでは、Node-REDを使って、自動でWeb画面のスクリーンショットを取得します。フローは以下の様になります。
injectノードもしくはbuttonノードが押されると、execノードで、”node screenshot.js”を実行します。その結果、出来たscreenshot.pngファイルをread fileノードで読込み、base64ノードで変換して、templateノードでダッシュボードに表示します。その下のtemplateノードとnotificationノードは、ダッシュボード画面に「更新が完了しました」というメッセージを表示させるためのものです.

injectノードを、日時指定で繰り返し設定にすると、指定した日時に画面の取得が自動で出来るようになります。
ダッシュボードでボタンを押して、スクリーンショットを取得した画面をその下に載せます。

3-2. フローの説明

フローのjsonファイルは、このページの最後に掲載します。詳細は、そちらを見てもらうとして、ここでは、ポイントを説明します。

①のexecノードのポイントは、コマンドの書き方です。実行するjavascriptのファイルをフルパスで指定してください。
②のcompleteノードは、プロパティでチェックを入れたノードのメッセージ処理完了を受けてフローを開始します。ここでは、screenshotの名称のexecノードを対象にしています。 すなわち、execノードの処理が完了したらフローが開始されます。

③のread fileノードのポイントは、まず、ファイル名をフルパスで記入して下さい。もう一つは、出力形式をバイナリバッファにするというところです。
④のダッシュボードのtemplateノードのポイントは、HTMLコードに以下の記述を入れてください。pngファイルがbase64の形式で、{{msg.payload}}の部分に配置されます。

<div>

    <img src=”data:image/png;base64,{{msg.payload}}”>

</div>

⑤のtemplateノードは、次段のnotificationノードに表示させる文字列を記載します。
⑥のnotificationノードは、ダッシュボードにmsg.payloadで送られてきたメッセージを指定された秒数表示します。layoutで表示する場所を指定します。ここでは、左上にしています。

4.スクリーンショットのftp送信

概要で述べたように、公開HPなどにダッシュボードの画面を掲示し定期的に更新するというような用途に使用するために、取得したスクリーンショットをftpでサーバに送るためのフローを説明します。

4-1. フローと動作確認

puppeteerで取得したスクリーンショットをftpを使って、他のサーバーに送信します。
Node-REDの記述を追加します。Node-REDのフローを以下に示します。上記で説明したフローに一番下の4つのノードを追加しています。
具体的には、ftpを行うかどうかを切り替えるgateノードとその切り替えのためのinjectノード、そして、ftpノードとdebugノードです。

toggle名のinjectノードを押して、gateをopenした後、puppeteerを実行することで、取得したscreenshot.pngをftpで送信します。

4-2.フローの説明 

ここでも、ポイントを説明します。

⑦のinjectノードは、topicをgateノードの“Control Topic”に合わせて、controlにします。payloadは、ここでは“toggle”にします。
toggleにすることで、injectを押すたびに、”close”と“open”が切り替わります。
⑧のgateノードは、Default Statusを“closed”にしています。ふつうは、ftpで送らずに、必要な時のみ送るようにするためです。

⑨のftpノードは、FTP Serverを設定します。鉛筆マークをクリックすると、Serverの設定画面が現れますので、ホスト、ユーザー名、パスワードを入力して下さい。
Operationは、putを選びます。ファイル名には、パス名とファイル名“./screenshot.png”と記入して下さい。
ローカルファイル名は、フルパス名で記入して下さい。

5. WindowsへのPuppeteerのインストールと動作確認

5-1.概要

Microsoftのpuppeteerのページ(Puppeteer overview)を確認すると、以下の様に、Microsoft Edgeをpuppeteer-coreで動かすことができ、そのための手順が記載されています。ここでは、Microsoft Edgeをpuppeteer-coreから動かして、Web画面のスクリーンショットを取得してみます。

■ Micorsoftのページより抜粋

Puppeteerライブラリは、nodeのライブラリです。DevToolsプロトコルを使用して、Microsoft Edgeを含むChromiumベースのブラウザを制御するための高レベルAPIを提供します。
デフォルトでPuppeteerをインストールすると、インストーラは、Microsoft Edgeもその上に構築されているオープンソースのブラウザであるChromiumの最新バージョンをダウンロードします。
Microsoft Edgeがインストールされている場合は、puppeteer-coreを使用することができます。puppeteer-coreは、Microsoft Edgeのような既存のブラウザを起動するPuppeteerの軽量版です。

5-2. puppeteer-coreのインストール

puppeteer-coreを、動かすにはnode.jsが、インストールするにはnpmが必要になります｡こちらのページ(Windowsへのインストール)から、Node-REDをインストールしたPCには、node.jsもnpmをインストールされていますので、問題ありません。インストールがまだの場合は、インストールをお願いします｡
端末画面を開いて以下のコマンドを入力して、puppeteer-coreをインストールします。

npm i puppeteer-core

5-3. puppeteer-coreの実行

MicrosoftのHPに記載されているexample.jsを実行してみます。example.jsは以下の内容になっています。
スクリーンショットのファイル保存先を指定する場合は、フルパスでファイル名の前に記載して下さい。

await page.screenshot({path: ‘c:\\User\\hayak\\source\\example.png’});

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge Dev\\Application\\msedge.exe'
  });
  const page = await browser.newPage();
  await page.goto('https://www.microsoft.com/edge/download/insider');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

5-3-1. Microsoft Edgeの実行パスの確認

ここで気を付けないといけないのが、example.jsの中の”executablePath”です。
各自のPCでMicrosoft Edgeの実行ファイルが保存されているパスを記載する必要があります。
パスを確認するには、Edgeを起動します。urlを入れる欄に、”edge://verion“と入力してリターンします。
「実行可能ファイルのパス：」が出てきます。これが、executablePathです。上記のexample.jsの記述と異なる場合は、修正してください。

5-3-2. example.jsの実行

以下のコマンドを端末で実行します。

node example.js

しばらくすると、実行したフォルダにexample.pngという画像ファイルができます。

ｓ

example.pngの画像

Appendix. Node-REDのフローファイル

上で説明したフローファイルを掲載します。

[{"id":"1a5fc6108e0128e4","type":"tab","label":"screen shot","disabled":false,"info":"","env":[]},{"id":"67572a04ce6fad8f","type":"ui_button","z":"1a5fc6108e0128e4","name":"","group":"eefb3e9e7fe5fcd7","order":1,"width":2,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":90,"y":40,"wires":[["5116cc247d6b80eb"]]},{"id":"ffb85651b45bbfb9","type":"inject","z":"1a5fc6108e0128e4","name":"shot","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":90,"y":100,"wires":[["5116cc247d6b80eb"]]},{"id":"5116cc247d6b80eb","type":"exec","z":"1a5fc6108e0128e4","command":"node /home/hayakawa/Documents/screenshot.js","addpay":"","append":"","useSpawn":"false","timer":"","winHide":false,"oldrc":false,"name":"screenshot","x":250,"y":100,"wires":[["f6c861bb1cf809ec"],["f6c861bb1cf809ec"],["f6c861bb1cf809ec"]]},{"id":"fd26726cf91d803d","type":"complete","z":"1a5fc6108e0128e4","name":"","scope":["5116cc247d6b80eb"],"uncaught":false,"x":170,"y":160,"wires":[["f70ee7441d480c8a","34f6cc7548809eef"]]},{"id":"f70ee7441d480c8a","type":"file in","z":"1a5fc6108e0128e4","name":"read file","filename":"/home/hayakawa/Documents/screenshot.png","filenameType":"str","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":320,"y":160,"wires":[["2a48a7eaf04201b4"]]},{"id":"17c573999f2ba804","type":"ui_template","z":"1a5fc6108e0128e4","group":"eefb3e9e7fe5fcd7","name":"","order":3,"width":"20","height":"20","format":"<div>\n <img src=\"data:image/png;base64,{{msg.payload}}\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":160,"wires":[[]]},{"id":"28e1f6ab62fcfa53","type":"ui_toast","z":"1a5fc6108e0128e4","position":"top left","displayTime":"3","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":590,"y":220,"wires":[]},{"id":"d3e977e217e2e642","type":"template","z":"1a5fc6108e0128e4","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"更新が完了しました。","output":"str","x":420,"y":220,"wires":[["28e1f6ab62fcfa53"]]},{"id":"39e7f66e3ab02791","type":"ftp in","z":"1a5fc6108e0128e4","ftp":"","operation":"put","filename":"./screenshot.png","localFilename":"/home/hayakawa/Documents/screenshot.png","name":"ftp","x":450,"y":280,"wires":[["b0f2326034217af6"]]},{"id":"b0f2326034217af6","type":"debug","z":"1a5fc6108e0128e4","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":640,"y":280,"wires":[]},{"id":"34f6cc7548809eef","type":"gate","z":"1a5fc6108e0128e4","name":"","controlTopic":"control","defaultState":"closed","openCmd":"open","closeCmd":"close","toggleCmd":"toggle","defaultCmd":"default","statusCmd":"status","persist":false,"storeName":"memory","x":330,"y":280,"wires":[["39e7f66e3ab02791"]]},{"id":"cf461025c6059c67","type":"inject","z":"1a5fc6108e0128e4","name":"toggle","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"control","payload":"toggle","payloadType":"str","x":150,"y":280,"wires":[["34f6cc7548809eef"]]},{"id":"f6c861bb1cf809ec","type":"debug","z":"1a5fc6108e0128e4","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":400,"y":100,"wires":[]},{"id":"2a48a7eaf04201b4","type":"base64","z":"1a5fc6108e0128e4","name":"","action":"","property":"payload","x":460,"y":160,"wires":[["17c573999f2ba804","d3e977e217e2e642"]]},{"id":"089adfd55da9cfa2","type":"ui_spacer","z":"1a5fc6108e0128e4","name":"spacer","group":"eefb3e9e7fe5fcd7","order":2,"width":10,"height":1},{"id":"eefb3e9e7fe5fcd7","type":"ui_group","name":"静止画","tab":"e99b4f6f24a941d5","order":1,"disp":true,"width":"20","collapse":false,"className":""},{"id":"e99b4f6f24a941d5","type":"ui_tab","name":"Screen Shot","icon":"dashboard","disabled":false,"hidden":false}]