Webサイトのスクリーンショットを自動で保存してみました

はじめに

いろいろな Web サイトのデザインや機能の変更が気になります。

ただ，いろんな Web サイトを定期的に訪れてウォッチするのは面倒くさいし，ページ構成を覚えておかないと， あれ？こんな機能あったっけ？と機能が追加されたのか，はたまたウォッチ漏れだったのかよくわからなくなってしまいます。

そこで，自動でいろいろな Web サイトのスクリーンショットを撮影できたらいいな！と思い試してみました。

やってみた

使ったもの

プログラム

Puppeteer のサンプルコードに，スクリーンショットを撮るプログラムがあります。今回はこちらをベースに，複数の Web サイトのスクリーンショットを撮れるようにしてみました。

'use strict';

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');

const urls = [
  'http://www.yahoo.co.jp',
  'https://www.rakuten.co.jp/'
];

(async() => {

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(devices['iPhone 6']);
  let fname = null;
  for(let url of urls){
    console.log(url);
    fname = url.replace(/\//g, '_').replace(/:/g,'');
    await page.goto(url);
    await page.screenshot({path: `${fname}.png`, fullPage: true});
  }
  await browser.close();

})();

作ったプログラムをなくしてしまうことが多いので，GitHubに上げました。

github.com

動かしてみました

$ git clone https://github.com/9bo9bo/pageCapture
$ cd pageCapture
$ npm install 
$ node index.js

f:id:u9bo:20171203211346p:plain

おわりに

複数の Web サイトのスクリーンショットを取得するプログラムをつくってみました。cron などに登録しておけば，特に意識しなくともスクリーンショットが蓄積されていって素敵です。

今後のタスクとして，取得したスクリーンショット同士の画像差分を取って，サイトの変更点を示せるようにすることが挙げられそうです。