Puppeteer を使った Web スクレイピング: ウェブサイトの変更を検知し、スクリーンショットを取得する

Puppeteer を使ったウェブスクレイピング：ウェブサイトの変更を検知してスクリーンショットを撮る

Aloísio Vítor

Image Processing Expert

27-Sep-2024

ウェブスクレイピングは、ウェブサイトの変更を監視してデータ収集を自動化するのに不可欠なツールになっています。このブログ記事では、PuppeteerというNode.jsライブラリを使用して、ウェブスクレイピング、ウェブサイトの変更の検出、およびこれらの変更のスクリーンショットを取得する方法について説明します。

Puppeteerとは？

Puppeteerは、DevToolsプロトコルを介してヘッドレスChromeまたはChromiumを制御するための高レベルAPIを提供するNode.jsライブラリです。ウェブスクレイピング、自動テスト、さらにはウェブページのスクリーンショットやPDFの生成に使用できます。

事前準備

始める前に、以下がインストールされていることを確認してください。

Node.js
NPM（Node.jsに付属）

ターミナルで次のコマンドを実行してPuppeteerをインストールできます。

bash Copy

npm install puppeteer

Puppeteerを使用した基本的なウェブスクレイピング

まずは、ウェブサイトにアクセスしてテキストコンテンツを抽出する基本的なウェブスクレーパーを作成しましょう。

javascript Copy

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // ウェブサイトに移動
    await page.goto('https://example.com');

    // テキストコンテンツを抽出
    const content = await page.evaluate(() => {
        return document.querySelector('h1').innerText;
    });

    console.log('ページコンテンツ:', content);

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

このスクリプトは、ヘッドレスブラウザを開き、example.comに移動し、<h1>要素からテキストを抽出します。URLをスクレイピングするウェブサイトに置き換え、セレクトを対象の要素に合わせて調整できます。

Puppeteerを使用したスクリーンショットの取得

Puppeteerを使用すると、ウェブページのスクリーンショットを簡単に取得できます。ページ全体のスクリーンショットまたはページの特定の領域をキャプチャできます。

ページ全体のスクリーンショットを取得する方法は次のとおりです。

javascript Copy

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // ウェブサイトに移動
    await page.goto('https://example.com');

    // ページ全体のスクリーンショットを取得
    await page.screenshot({ path: 'screenshot.png', fullPage: true });

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

このスクリプトは、ページ全体のスクリーンショットをscreenshot.pngとして保存します。pathを変更して、異なるファイル名または場所を指定できます。

ウェブサイトの変更の検出

ウェブサイトの変更を監視することは、ウェブスクレイピングで便利な機能です。これを実現するには、ウェブサイトのコンテンツを繰り返しチェックし、以前に保存したバージョンと比較します。

テキストの変更を検出して、コンテンツが変更された場合にスクリーンショットを取得する例を次に示します。

javascript Copy

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // ウェブサイトに移動
    await page.goto('https://example.com');

    // テキストコンテンツを抽出
    const currentContent = await page.evaluate(() => {
        return document.querySelector('h1').innerText;
    });

    const previousContentPath = 'previous-content.txt';
    let previousContent = '';

    // 前のコンテンツが存在するか確認
    if (fs.existsSync(previousContentPath)) {
        previousContent = fs.readFileSync(previousContentPath, 'utf8');
    }

    // 現在のコンテンツと前のコンテンツを比較
    if (currentContent !== previousContent) {
        console.log('コンテンツが変更されました!');

        // 新しいコンテンツを保存
        fs.writeFileSync(previousContentPath, currentContent);

        // 変更のスクリーンショットを取得
        await page.screenshot({ path: `screenshot-${Date.now()}.png`, fullPage: true });
        console.log('スクリーンショットが保存されました!');
    } else {
        console.log('変更は検出されませんでした。');
    }

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

この例では：

スクリプトは<h1>要素のコンテンツを抽出します。
現在のコンテンツを以前に保存したバージョン(previous-content.txt)と比較します。
変更が検出されると、スクリーンショットを取得してファイル名にタイムスタンプを付加して保存します。これにより、各スクリーンショットがユニークになります。
新しいコンテンツは、将来の比較のためにprevious-content.txtに保存されます。

スクリプトの定期的な実行のスケジュール設定

node-cronパッケージを使用して、Node.jsでこのスクリプトを一定の間隔で実行するようにスケジュール設定できます。

まず、node-cronをインストールします。

bash Copy

npm install node-cron

次に、スクリプトを変更して、設定された間隔（例：5分ごと）で実行します。

javascript Copy

const puppeteer = require('puppeteer');
const fs = require('fs');
const cron = require('node-cron');

cron.schedule('*/5 * * * *', async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto('https://example.com');

    const currentContent = await page.evaluate(() => {
        return document.querySelector('h1').innerText;
    });

    const previousContentPath = 'previous-content.txt';
    let previousContent = '';

    if (fs.existsSync(previousContentPath)) {
        previousContent = fs.readFileSync(previousContentPath, 'utf8');
    }

    if (currentContent !== previousContent) {
        console.log('コンテンツが変更されました!');
        fs.writeFileSync(previousContentPath, currentContent);
        await page.screenshot({ path: `screenshot-${Date.now()}.png`, fullPage: true });
        console.log('スクリーンショットが保存されました!');
    } else {
        console.log('変更は検出されませんでした。');
    }

    await browser.close();
});

このスクリプトは、5分ごと(*/5 * * * *)に実行され、ウェブサイトの変更をチェックします。変更が検出されると、スクリーンショットを取得して更新をログに記録します。

ボーナスコード

CapSolverでトップのキャプチャソリューションのボーナスコードを獲得しましょう：scrape。コードを引き換えると、リチャージごとに5％のボーナスが追加で付与されます。無制限です。

まとめ

Puppeteerは、ウェブスクレイピングとブラウザタスクの自動化に強力なツールです。この記事では、Puppeteerを使用して基本的なウェブスクレイピング、ウェブサイトの変更の検出、およびこれらの変更のスクリーンショットを取得する方法を説明しました。これらのテクニックを使用すると、ウェブサイトを監視し、更新を自動的に追跡できます。ウェブサイトのスクレイピングポリシーを確認して、利用規約に違反しないようにしてください。

Copy

コンプライアンス免責事項：このブログで提供される情報は、情報提供のみを目的としています。CapSolverは、すべての適用される法律および規制の遵守に努めています。CapSolverネットワークの不法、詐欺、または悪用の目的での使用は厳格に禁止され、調査されます。私たちのキャプチャ解決ソリューションは、公共データのクローリング中にキャプチャの問題を解決する際に100%のコンプライアンスを確保しながら、ユーザーエクスペリエンスを向上させます。私たちは、サービスの責任ある使用を奨励します。詳細については、サービス利用規約およびプライバシーポリシーをご覧ください。