Puppeteer Plus Martech MCP

🚀 Puppeteer

PuppeteerはGoogleによって開発されたNode.jsライブラリで、ChromiumとChromeをサポートするブラウザを制御するために使用されます。このライブラリを使用することで、開発者はウェブページのスクレイピング、スクリーンショットやビデオの生成、パフォーマンス分析などのタスクを自動化することができます。

このツールは、AngularJSやReactなどの最新のJavaScriptフロントエンドフレームワークとのインタラクションが必要なアプリケーションのテストに特に適しています。Puppeteerを通じて、開発者はブラウザのDocument Object Model (DOM) と直接やり取りし、提供されているAPIを利用して様々な自動化タスクを実現することができます。

✨ 主な機能

• API デバッグ：Chromeのデバッグプロトコルを介した通信をサポートします。
• DOM 操作：DOM要素の操作機能を提供し、クエリ、クリック、入力などが可能です。
• ページ操作：ナビゲーション、ページのリフレッシュ、タブの閉じるなどの操作を実行できます。
• ファイル操作：ローカルファイルの内容を読み取り、新しいページに注入することができます。
• スクリーンショットと録画：ウェブページのスクリーンショットや録画ビデオを生成できます。

📦 インストール

npm install puppeteer

🚀 クイックスタート

基本プロジェクトの作成

新しいNode.jsプロジェクトを作成します。

mkdir my-puppeteer-project && cd my-puppeteer-project
npm init -y

Puppeteerをインストールします。

npm install puppeteer

最初のスクリプトの作成

index.jsファイルに以下のコードを追加します。

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png', format: 'png' });
  await browser.close();
}

main().catch(console.error);

スクリプトを実行します。

node index.js

高度な機能

Puppeteerは、様々なブラウザタスクを処理するための強力なAPIを提供しています。

ナビゲーションとページ操作

const puppeteer = require('puppeteer');

async function navigateExample() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  console.log(await page.title());
  await page.goBack();
  await page.goForward();
  await browser.close();
}
navigateExample().catch(console.error);

DOM操作

const puppeteer = require('puppeteer');

async function domManipulation() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  // 要素の取得
  const element = await page.$('#element-id');
  console.log(await element.getPropertyValue('textContent'));
  
  // クリックのシミュレート
  await element.click();
  
  // テキストの入力
  const input = await page.$('input[type="text"]');
  await input.type('テスト入力');
  
  await browser.close();
}
domManipulation().catch(console.error);

スクリーンショットと録画

const puppeteer = require('puppeteer');

async function screenshotExample() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  // 全ページのスクリーンショット
  await page.screenshot({ path: 'full-page.png', format: 'png' });
  
  // 可視領域のスクリーンショット
  await page.screenshot({ path: 'visible-area.png', clip: { x: 0, y: 0, width: 1920, height: 1080 } });
  
  // ビデオの録画
  await page.startRecordingVideo({ path: 'video.mp4' });
  await page.waitForNavigation();
  await page.stopRecordingVideo();
  
  await browser.close();
}
screenshotExample().catch(console.error);

💻 使用例

ウェブスクレイピング

const puppeteer = require('puppeteer');

async function webScraping() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 複数のページを巡回
  for (let i = 1; i <= 5; i++) {
    await page.goto(`https://example.com?page=${i}`);
    const content = await page.textContent('.content');
    console.log(`第 ${i} ページの内容: ${content}`);
  }
  
  await browser.close();
}
webScraping().catch(console.error);

自動フォーム送信

const puppeteer = require('puppeteer');

async function formAutomation() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/form');
  
  // フォームの入力
  await page.type('#username', 'テストユーザー');
  await page.type('#password', 'テストパスワード');
  await page.click('button[type="submit"]');
  
  console.log('フォームが正常に送信されました!');
  
  await browser.close();
}
formAutomation().catch(console.error);

📚 ドキュメント

非同期JavaScriptの処理

const puppeteer = require('puppeteer');

async function handleAsyncJs() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/async');
  
  // page.waitForを使用して特定の条件を待つ
  await page.waitFor(() => {
    return document.querySelectorAll('.loaded').length > 0;
  });
  
  console.log('ページの読み込みが完了しました!');
  
  await browser.close();
}
handleAsyncJs().catch(console.error);

モーダルダイアログの処理

const puppeteer = require('puppeteer');

async function handleModals() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/modal');
  
  // ダイアログイベントの監視
  page.on('dialog', dialog => {
    console.log('ダイアログが検出されました:', dialog.message());
    dialog.accept();
  });
  
  await page.click('#open-modal');
  
  await browser.close();
}
handleModals().catch(console.error);

🔧 技術詳細

ベストプラクティス

1. 複数のタブの処理：browser.newPage() を使用して新しいタブを作成し、干渉を避けます。
2. 待機メソッドの使用：非同期操作を実行する前に常に page.waitFor を使用して要素が読み込まれるのを確認します。
3. リソースのクリーンアップ：システムリソースを解放するために、ブラウザインスタンスを閉じることを忘れないでください。

プロジェクトの例

例1: 簡単なウェブページのスクリーンショット

const puppeteer = require('puppeteer');

async function simpleScreenshot() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  await page.screenshot({ path: 'example-site.png' });
  
  await browser.close();
}
simpleScreenshot().catch(console.error);

例2: 自動テーブルデータのスクレイピング

const puppeteer = require('puppeteer');

async function tableScraping() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  for (let i = 1; i <= 3; i++) {
    await page.goto(`https://example.com/table?page=${i}`);
    
    // すべてのテーブル行を取得
    const rows = await page.querySelectorAll('tr');
    
    for (const row of rows) {
      console.log(await row.textContent());
    }
  }
  
  await browser.close();
}
tableScraping().catch(console.error);

まとめ

Puppeteerは、様々なブラウザ自動化タスクに適した強力なツールです。提供される豊富なAPIを通じて、開発者はウェブスクレイピング、フォーム送信、ページ操作などの複雑な機能を簡単に実装することができます。Puppeteerの使い方を習得することで、開発効率が大幅に向上します。

⚠️ 重要提示

実際のアプリケーションでは、関連する法律や規制、およびウェブサイトの利用規約を遵守し、違法または侵入的なウェブクローリング行為を避けてください。