最終更新日 2024-09-25

URLのキャプチャー

概要

特定のサイトのURLを、画面外の部分も含めてキャプチャしたい場合は、「nodejs」と「puppeteer」を使うのが確実です。

現代のサイトは、URLを表示しただけでは、ページ全体をレンダリングしていない場合が多いです。
これは、最適化のために、ページの一番上から下までを最初から表示するのではなく、「実際に下へとスクロール」した段階、
もしくは「スクロールして近づいてきた」段階で初めてページの下部分の続きをレンダリングするサイトが増えているためです。
かつて流行した「遅延イメージ読み込み」や、Reactなどのフレームワークによる「動的ページ読み込み」などが普及してきたことも、
この傾向に拍車をかけています。

そのため、ページ全体をキャプチャするには、実際の操作をエミュレートする必要があります。

そういったことも含めて「puppeteer」が一番お手軽だと思います。

nodejs に puppeteer

nodejs に puppeteer モジュールを追加します。

npm install -g puppeteer

画面全体をキャプチャーするための スクリプト

capture.js 
// npm install -g puppeteer

const puppeteer = require('puppeteer');

async function captureWebsite(url, filename) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // ウェブサイトを開く
  await page.goto(url);

  // 画面のサイズを取得
  const { width, height } = await page.evaluate(() => {
    return { width: 1920, height: document.body.scrollHeight };
  });

  // 画面全体をキャプチャー
  await page.setViewport({ width, height });
  await page.screenshot({ path: filename });

  await browser.close();
}

// 使用例
captureWebsite('https://秀丸マクロ.net/', 'キャプ_01.png')

コマンドライン引数を取って使うようにする

capture.js 
const puppeteer = require('puppeteer');

async function captureWebsite(url, filename) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // ウェブサイトを開く
  await page.goto(url);

  // 画面のサイズを取得
  const { width, height } = await page.evaluate(() => {
    return { width: 1920, height: document.body.scrollHeight };
  });

  // 画面全体をキャプチャー
  await page.setViewport({ width, height });
  await page.screenshot({ path: filename });

  await browser.close();
}


const args = process.argv;
if (args.length < 4) {
    process.exit() 
}

const capture_url = args[2];
console.log(capture_url);
const capture_filename = args[3];
console.log(capture_filename);

captureWebsite(capture_url, capture_filename)

コマンドラインから使う


node capture.js https://秀丸マクロ.net キャプ_01.png