「松原ガレッジ」のブログ

大阪府松原市にあるウェブ開発・HP制作をするところ。管理人が思ったことや困ったこと、課題についてまとめていきます。

Puppeteerを使って、ブラウザ(ヘッドレスChrome)を操作する(in Docker コンテナ)

puppeteer 記事アイキャッチ

どうも〜
コワーキングスペース松原ガレッジの管理人(五島)です。

ウェブページにアクセスして色々確認する必要性ができたので、自動化しましたという話です。

Puppeteerというツールを利用して、ブラウザ(ヘッドレスChrome)を操作しました。

結論から知りたい!!というせっかちな方
安心してください、履いてますよ
ではなくGitHubにソースを公開しました。

色々なサイトで載ってる方法を試したのですが、
Chrome の進化が早いからか最初のセットアップで上手くいかないケースが多かったのでDockerfileを少し編集しています。

動作環境

念の為注意

上記の方法におけるウェブページの回遊は用法用量や対象のサービスの規約を守って利用してください。
例えば、特定のサービスに短時間にたくさんのアクセスを行えば、それはサービスに対する攻撃とみなされる可能性が高いです。
この記事を参考にして行ったとしても、関連して生じたあらゆる損害等は、理由の如何に関わらず一切責任を負いません。
自己責任でお願いいたしますm( )m

Puppeteer とは? 実際に動かしながら試してみる

Puppeteer は人に変わってプログラムでChromeを制御してくれるツールです。

例えばこのようなプログラムでは、ページにアクセスしてスクリーンショットを撮ることができます。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    executablePath: '/usr/bin/google-chrome-stable',
    args: ['--no-sandbox']
  });

  // ↓後の例ではここの中身だけ変更していきます
  const baseUrl = 'https://example.com';

  const page = await browser.newPage();
  await page.goto(baseUrl, {waitUntil: "networkidle2"});
  await page.screenshot({path: './dist/example.png'});
  // ↑

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

実際に取得したスクリーンショットはこちら
example.comのスクショ

他にもページ内の要素に対してクリックできたりします。
クリックして他のページへ遷移してみましょう。
( プログラム内 https://poly-kaigo.com は弊社が運営するサービスです)。

  // 前の処理があります
  const baseUrl = 'https://poly-kaigo.com';

  const page = await browser.newPage();
  await page.goto(baseUrl, {waitUntil: "networkidle2"});  // トップページへ
  await page.screenshot({path: './dist/example1.png', fullPage: true});

  page.click('article.article-item.post-671.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-manga > div.head > a')  // リンクを指定してクリック
  await page.waitForNavigation({timeout: 50000, waitUntil: "networkidle2"});
  await page.screenshot({path: './dist/example2.png', fullPage: true});
  // 後の処理があります

こちらがトップページ

こちらがリンクをクリックしたページ

とこんな風に人間に変わって色々操作してくれます。
他にもどんな操作ができるのか気になった方はぜひPuppeteerで確認してみてください。

定期的にウェブページのスクリーンショットを取りにいったり、内容を確認したりする必要がある方はぜひやってみてくださいね〜(^^)

まとめ

今回はPuppeteerを利用してウェブページへアクセスする方法を書きました。
これからも少しずつ技術記事をアップしていくので、覗いていただけるとありがたいです!!

松原ガレッジでは、PCの使い方からHP制作、ウェブシステムの開発までまるっと請け負っています。
「こうゆういいアイデアがあるんだけど、作ってくれないかな〜、できるのかな〜」
「この仕事、自動化できないかな〜」 という方は一度遊びに来てみてください(^^)

何かしらのお力添えはできると思います!