ヘッドレスブラウザを利用すると、WEBページ上のJavaScriptによって描画された要素のスクリーンショットなどを自動で取得できます。 今回は、Node.jsのパッケージのPuppeteerとNode Cronを使って、kintoneのグラフを定期的にローカル保存する例を紹介します。
サンプル
グラフのスクリーンショットを定期的に保存します。 kintone上では、その週の売上のグラフを表示します。 ヘッドレスブラウザによって、毎週土曜の23時59分にグラフのスクリーンショットを保存します。
・2019年9月19日(木)現在のkintoneの画面
・2019年9月14日(土)に取得したスクリーンショット
・2019年9月7日(土)に取得したスクリーンショット
コード
Puppeteer、Node Cron、dayjsを利用しています。 npm等を用いてインストールしてください。
・sample.js
const puppeteer = require('puppeteer')
const cron = require('node-cron')
const dayjs = require('dayjs')
const url = 'https://****.cybozu.com/k/****/report?report=****' //目的のページのURL
const basicUser = '****' //Basic認証のユーザー名(設定していない場合はfalse)
const basicPassword = '****' //Basic認証のユーザー名(設定していない場合はfalse)
const user = '****' //kintoneのログインユーザー名
const password = '****' //kintoneのログインパスワード
const selector = '#report-view-gaia svg' //グラフのDOM要素のセレクタ
cron.schedule('59 23 * * 6', async () => { //実行スケジュール設定
//kintoneログイン・目的のページへの遷移
const browser = await puppeteer.launch() //ヘッドレスブラウザ起動
const page = await browser.newPage()
if(basicUser && basicPassword){ //Basic認証(設定している場合)
await page.setExtraHTTPHeaders({
Authorization: `Basic ${new Buffer.from(`${basicUser}:${basicPassword}`).toString('base64')}`
})
}
await page.goto(url) //ログインページへ遷移
await page.type('input[name="username"]', user) //kintoneのユーザー名入力
await page.type('input[name="password"]', password) //kintoneのログインパスワード入力
await page.evaluate(() => { //ログインボタンクリック
document.getElementsByClassName('login-button')[0].click()
})
await page.waitForNavigation({waitUntil: "domcontentloaded"}) //目的のページへの遷移を待機
//スクリーンショット保存
const fileName = dayjs().format('YYYY-MM-DD') + '.png' //ファイル名
await page.waitFor(selector) //グラフのDOM要素の読み込み待機
await new Promise(resolve => setTimeout(resolve, 1000)) //グラフのアニメーション待機
const clip = await page.evaluate(selector => { //グラフのDOM要素の領域取得
const {width, height, top: y, left: x} = document.querySelector(selector).getBoundingClientRect()
return {width, height, x, y}
}, selector)
await page.screenshot({clip, path: fileName}) //スクリーンショット保存
console.log('Saved ' + fileName)
await browser.close()
})
実行
シェルを用いて、sample.jsがあるディレクトリで下記を実行します。 コマンドを中断したり、シェルを閉じたりした場合は、定期実行が中断されます。
※ここでは触れませんが、バックグラウンドジョブとして実行すれば中断を回避できます。
$ node sample.js
今回はわかりやすいようにグラフのスクリーンショットを目的にしましたが、アプリのページに定期的にログインしてJavaScriptを発火させるといった使い方もできそうですね。
0件のコメント