Puppeteer入門 - WEB操作の自動化やスクレイピングが簡単にできる

Puppeteerはプログラム経由でChrome/Chromium、Firefoxを制御するJavaScriptライブラリです。

デフォルトではヘッドレス（UIが表示されない）で実行されますが、可視化することもできます。

本記事では初心者向けにPuppeteerの基礎知識を簡単に解説しています。

Puppeteerとは

Puppeteer（パペティア）はGoogleが開発したChrome DevTools Protocol を介して Chrome や Chromium をヘッドレスモードで制御する高水準APIを提供するJavascriptライブラリです。Puppeteerでは手動で出来るブラウザ操作はだいたい出来ると言われています。

UIが表示されない、ヘッドレスモードで動作するのでプログラムからの操作が可能になり、効率よく自動化、テストなどを実行できます。

Puppeteerのインストール方法

まず、nodejsのインストールをします。（インストール済みの場合はこの操作は不要です。）

以下は現時点での安定版をmacosにインストールする手順です。OSが異なる場合と最新の情報を確認する場合は、公式サイトより確認をお願いします。

# nvmをダウンロードしてインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

# シェルを再起動する代わりに実行する
\. "$HOME/.nvm/nvm.sh"

# Node.jsをダウンロードしてインストール
nvm install 23

# Node.jsのバージョンを確認
node -v # "v23.10.0"が表示される。
nvm current # "v23.10.0"が表示される。

# npmのバージョンを確認
npm -v # "10.9.2"が表示される。

次に、Puppeteerのインストールです。以下コマンドのみで動作するようになります。

# Puppeteerのインストール
npm install puppeteer

本記事ではNode.jsのバージョン「v22.13.0」Puppeteerのバージョン「24.4.0」で動作を確認しています。

Puppeteerを実行する方法

Puppeteerを実行する方法は、ターミナル（Windowsの場合はコマンドプロンプト）から、保存したjsファイルを実行するだけです。

cd /home/{User}/Documents    /* 任意のディレクトリに移動 */

mkdir Dev                    /* 任意のディレクトリを作成 〜 sample1.jsを保存しているとします  */

node sample1.js              /* sample1.jsを実行 */

このほかプログラムを配置する同一ディレクトリにpackage.jsonというファイルを保存します。

{
    "type": "module",
}

Puppeteerでできる簡単な操作

特定のサイトのスクリーンショットを保存

以下の内容をsample1.jsとして保存。

import puppeteer from 'puppeteer';

(async () => {
　// ブラウザ起動と新しいページを開く
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 指定したURLへアクセス
  await page.goto('https://yahoo.co.jp');

  // スクリーンショットをpathに保存
  await page.screenshot({ path: 'screenshot.png' });

  // ブラウザを終了
  await browser.close();
})();

実行結果がこちらです。

https://yahoo.co.jpにアクセス後、scrrenshot.pngを保存しました。

今回は単純なプログラムにしたため、切れてしまっていますがViewportを指定すると切れずに保存することができます。

await page.setViewport({width: 1280, height: 1024});

変更後のプログラム。sample1-2.js

import puppeteer from 'puppeteer';

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

変更後の保存画像。

特定のサイトのスクリーンショットをPDFで保存

以下の内容をsample1-3.jsとして保存。

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://yahoo.co.jp');
  await page.setViewport({width: 1280, height: 1024});
  await page.pdf({ path: 'screenshot.pdf' });
  await browser.close();
})();

実行するとscreenshot.pdfが生成されます。

指定した要素のテキストを取得

以下の内容をsample2.jsとして保存。

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://yahoo.co.jp');
  const title = await page.title();
  console.log(`ページタイトル: ${title}`);
  await browser.close();
})();

実行結果がこちらです。

user@Dev % node sample2.js         /* プログラムを実行 */
ページタイトル: Yahoo! JAPAN        /* 取得テキスト */

指定した要素のテキストを取得2

以下画像の赤枠部分、Yahooのトップ記事一覧を取得します。

以下の内容をsample3.jsとして保存。

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  
  // Yahoo! JAPANのトップページを開く
  await page.goto('https://www.yahoo.co.jp/', { waitUntil: 'domcontentloaded' });

  // ニュースの見出し一覧を取得
  const headlines = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('div[aria-label="主要 ニュース"] ul li a')).map(el => ({
      title: el.innerText.trim(),
      url: el.href
    }));
  });

  console.log(headlines);

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

実行結果がこちらです。

[
  {
    title: '横浜が選抜優勝 19年ぶり4度目\nNEW',
    url: 'https://news.yahoo.co.jp/pickup/6533909'
  },
  {
    title: 'ミャンマー地震 路上で避難生活',
    url: 'https://news.yahoo.co.jp/pickup/6533892'
  },
  {
    title: 'WHO、予算5分の1を削減方針\n511',
    url: 'https://news.yahoo.co.jp/pickup/6533883'
  },
  {
    title: '世界各地のテスラ店前で抗議デモ\n503',
    url: 'https://news.yahoo.co.jp/pickup/6533887'
  },
  {
    title: '浜松4人死傷事故 小4姉の意識回復\nNEW\n368',
    url: 'https://news.yahoo.co.jp/pickup/6533898'
  },
  {
    title: '群馬が躍進 移住希望地1位の理由\n240',
    url: 'https://news.yahoo.co.jp/pickup/6533890'
  },
  {
    title: '突然がん告知 三上洋さんの気付き\nNEW\n24',
    url: 'https://news.yahoo.co.jp/pickup/6533908'
  },
  {
    title: '朗希「シンプルに技術不足かな」\nNEW\n187',
    url: 'https://news.yahoo.co.jp/pickup/6533899'
  }
]

ブラウザ操作を見る

puppeteer.launchにheadless: falseのオプションを指定すると、実際のブラウザ動作を確認することが可能です。

const browser = await puppeteer.launch({ headless: false });

まとめ

Puppeteerはブラウザを自動操作できる便利なツール。テストの自動化やスクレイピングなどに活用してはいかがでしょうか。

まずは簡単なスクリプトから始めていろいろな動作をさせてみましょう。

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング【電子書籍】[ ヴェネチア冒険團 ]

created by Rinker

¥2,772 (2025/04/02 10:48:06時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

Pythonクローリング＆スクレイピング[増補改訂版] -データ収集・解析のための実践開発ガイド-【電子書籍】[ 加藤耕太 ]

created by Rinker

¥3,608 (2025/04/01 22:36:49時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング