kintoneのグラフを定期的にローカル保存

ヘッドレスブラウザを利用すると、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を発火させるといった使い方もできそうですね。