ブラウザは友達！Puppeteerでスクリーンショットを撮ってみよう！その2

Shinya Okazawa

2019.12.19

こんにちは、夏以外は口数の少ないフロントエンドエンジニアのザワです。

前回はPuppeteerを使って、Webサイトのスクリーンショットを撮ってみました。

ブラウザは友達！Puppeteerでスクリーンショットを撮ってみよう！

Shinya Okazawa

2019.11.29

今回は続きになるので、前回をまだご覧になっていない方はまずそちらを見ていただければ理解が深まると思います。

さて、前回作成したスクリーンショットを見ていただくと、サイズが何やら中途半端な印象です。

画像サイズは800×600になっていることが確認できると思います。これはPuppeteerのデフォルトの設定です。今回は、ビューポートのサイズ変更、モバイル端末のエミュレート、フルページにした場合と3つのスクリーンショットを撮ってみたいと思います。

ビューポートのサイズ変更

ビューポートのサイズ変更は、page.setViewport()メソッドにwidth、heightオプションを設定することで実現できます。

幅1366px、高さ768pxを設定してみます。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({
    width: 1366,
    height: 768
  });
  await page.goto('https://liginc.co.jp/');
  await page.screenshot({ path: 'screenshot.png' });

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

そして前回同様、記述した処理をターミナルから実行します。

$ node screenshot.js

作成されたスクリーンショットを見ると、幅1366、高さ768の画像サイズになっていることが確認できると思います。

page.setViewport()メソッドには他にもオプションがあるので、興味のある方は公式ドキュメントを確認してみてください。

モバイル端末のエミュレート

ここまではデスクトップ端末でのスクリーンショットばかりでした。

時代はモバイルですから、スクリーンショットもモバイルを撮っていかないといけませんよね。

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone X'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://liginc.co.jp/');
  await page.screenshot({ path: 'screenshot.png' });

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

page.emulate()に端末の種類を渡すことでその端末のサイズでスクリーンショットを撮ることができます。

作成されたスクリーンショットを確認すると、幅1125px、高さ2436pxのサイズを確認できます。

iPhoneXは、デバイスピクセル比が3なので、3倍に拡大されたスクリーンショットが作成されています。

お便利ですね。

他に設定できる端末のリストはこちらで確認できます。

フルページ

今まではページの先頭のスクリーンショットでしたが、ページ全体を確認したい場合があると思います。もちろん、ページ全体のスクリーンショットも撮れちゃいます。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://liginc.co.jp/');
  await page.screenshot({
    path: 'screenshot.png',
    fullPage: true
  });

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