Puppeteer フルガイド pt.1

Puppeteer: Web オートメーションのための強力なツール

今日のペースの速い Web 開発環境では、自動化が重要です。そして、そこに Puppeteer が登場します。Google によって開発された Puppeteer は、開発者が JavaScript を使用して Chrome ブラウザを制御できるようにする強力な Node.js ライブラリです。効率を高めるためにヘッドレス モードで Web を操作する場合でも、視覚的なフィードバックを得るためにフルブラウザで Web を操作する場合でも、Puppeteer を使用すると、Web スクレイピングやテストなどのタスクをこれまでより簡単に自動化できます。 Puppeteer を使用すると、かつては手作業が必要でしたが、今ではスクリプトを実行するだけで済みます。

なぜウェブスクレイピングを行うのか?

最近のプロジェクトで、外国為替取引コミュニティのランディング ページを必要としているクライアントと協力しました。彼は、MarketWatch や Yahoo Finance で見られる株価ティッカーに似たものを望んでいましたが、株の代わりに、サイト全体に表示される 1 米ドルのリアルタイムの通貨換算レートを望んでいました。

データを提供できる API はありますが (使用制限や月額料金はかかります)、Puppeteer を使用してカスタム ソリューションを作成する機会があると考えました。事前に時間を投資することで、無料でデータを収集して表示することができ、最終的にクライアントを定期的なコストから節約することができました。

クライアントのウェブサイト: Majesticpips.com

Puppeteer のセットアップが簡単になりました

Web のすべての栄光を得るためにスクレイピングを開始する前に、アプリケーションに puppeteer をインストールする必要があります。

ドキュメントの説明どおり

ステップ1

npm、yarn、pnpm のいずれかを選択してライブラリをインストールします。

• npm 私は人形遣いです

• 糸で人形遣いを追加

• pnpm 人形遣いを追加

これにより、インストール中に互換性のあるバージョンの Chrome がダウンロードされるため、初心者でもすぐに使い始めることが簡単になります。

あなたが経験豊富な開発者で、使用したい特定の chrome/chromium バージョンがある場合。次に、これらのパッケージをインストールします

• npm i puppeteer-core

• 糸で人形遣いコアを追加

• pnpm 追加 puppeteer-core

これが最適です。puppeteer のみをインストールし、Chrome のバージョンはユーザーの判断に任されているため、パッケージは軽量です。

初めてのテスターに​​は、「puppeteer」をインストールすることをお勧めします。これによりセットアップが簡素化され、Chromium の動作バージョンが確保されるため、スクリプトの作成に集中できるようになります。

ステップ2

JS ファイル上で、ノード バージョン 12 以降の ES モジュール システム (ES6 標準) を使用するアプリケーション用に puppeteer をインポートするとします。

「puppeteer」から puppeteer をインポートします。 （推奨）
または
'puppeteer-core' から puppeteer をインポートします;

または、古いバージョンの Node.js とも互換性のある Node.js の commonJs モジュール システムの require 構文を使用することもできます。

const puppeteer = require('puppeteer');
または
const puppeteer = require('puppeteer-core');

ステップ3

Puppeteer をインポートした後、Web スクレイピングを実行するコマンドの記述を開始できます。以下のコードは、使用する必要があるものを示しています。

ライブラリが提供するこれらのメソッドを使用してブラウザを起動します。

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = このメソッドは新しいブラウザ インスタンスを起動します。

browser.newPage() = このメソッドは、ブラウザ インスタンス内に新しいページ (またはタブ) を作成します。

browser.close() = このメソッドはブラウザ インスタンスを閉じます。

puppeteer.launch() では、引数を渡して、好みに応じてブラウザの起動をカスタマイズできます。これについては、パート 2 で詳しく説明します。ただし、デフォルトでは、puppeteer.launch() には、ヘッドレス モードが true に設定されているなど、プリセット値が含まれています。

ステップ4

ブラウザが起動し、Web サーフィンの準備が整ったページができました。データを収集する Web サイトに移動しましょう。

この例では、qoutes ウェブサイトからデータをスクレイピングします。

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

await page.screenshot({ path: 'screenshot.png' }) をミックスに追加しました。これは、すべてが計画どおりに進んでいることを確認するための優れたツールです。このコードが実行されると、スクレイピングしている Web サイトの現在の状態をキャプチャした画像ファイルがプロジェクト ディレクトリに作成されます。ファイル名はお好みに合わせて変更することもできます。

すべてがチェックアウトされている場合は、ステップ 5 に進みます。

ステップ5

スクリプトが形になってきたので、Web ページからデータを抽出する重要な部分に進みましょう。これまでのスクリプトは次のようになります:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

データが正常にスクレイピングされたことを確認するには、CLI でノード「server-file-name」を実行すると、console.log(quotesScraper); を使用してデータがコンソールに表示されます。

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): ここで魔法が起こります。 Evaluate メソッドを使用すると、スクレイピングしているページのコンテキスト内で JavaScript コードを実行できます。あたかもブラウザの開発者コンソールを開いてページ上でコードを直接実行しているようなものです。

const quotes = document.querySelectorAll(".quote");: ここでは、.quote クラスに一致するページ上のすべての要素を選択しています。これにより、引用要素の NodeList が得られます。

const quotesArray = [];: 抽出した引用符を保存するために空の配列を初期化します。

for (const quote of quotes) { ... }: このループは各引用要素を反復します。それぞれについて、引用文と著者を抽出します。

quotesArray.push({ quote: texts, author });: 引用ごとに、引用テキストと著者を含むオブジェクトを作成し、このオブジェクトを quotesArray にプッシュします。

return quotesArray;: 最後に、引用符の配列を返します。これは、Node.js 環境の quotesScraper に保存されます。

このデータ抽出方法は、自動化されたプログラム的な方法で、ユーザーと同じようにページを操作できるため、強力です。

ブラウザを閉じる

await browser.close();: データをスクレイピングした後、ブラウザを閉じてリソースを解放することが重要です。この行により、起動したブラウザ インスタンスが適切にシャットダウンされることが保証されます。

パート 2 に向けて

このスクリプトでは、Puppeteer を使用して Web サイトからデータを正常にスクレイピングしました。しかし、私たちは可能性のほんの表面をなぞっただけです。パート 2 では、動的コンテンツの処理や、Express.JS を使用したスクラップ データの API 機能の作成など、より高度なテクニックを検討します。 Puppeteer の世界をさらに深く掘り下げていきますので、ご期待ください!