Puppeteer を用いた Web スクレイピング

📆April 02, 2020🔖 PuppeteerJavaScript

スクレイピングについて調査したので、そのまとめ。

スクレイピングとは?

Web ページから情報を自動で取得することをスクレイピングと呼びます。情報を取得したい Web ページと、取得したい情報(要素)を指定することで、Web ページを人間の操作によって開くことなく、情報の取得を行うことができます。

これらの処理をまとめて実装したものを Web スクレイパーと呼び、 JavaScript や Python などのプログラミング言語で作ることができます。 Web スクレイパーは、サーバー上で実行することができ、定期実行が可能であれば、1日に1回、特定の Web ページの特定の情報を取得したりすることができます。

マネーフォワードの口座連携などの一部は、このスクレイピングの技術を使用して行われています。

スクレイピングで情報を取得する方法

スクレイピングする手段は大きく分けて2つあります。

  • Web ページにリクエストを送って、返ってきたレスポンスボディを見る
  • ヘッドレスブラウザを使用して、実際に Web ページを動かして情報を取得する方法
  • 今回は、柔軟性が高く、今後拡張性の高いと思われるヘッドレスブラウザ方式を採用したので、そのパターンについて書いていきたいと思います。

    ヘッドレスブラウザの準備

    今回はヘッドレスブラウザとして Puppetter を使用しました。ある程度のスターが付いていて信頼できるもの、メンテがされているもの、という基準で選定しました。

    $ yarn add puppeteer 

    でスクレイパーのプロジェクト内に Puppeteer を準備します。

    実際にスクレイピングしてみる

    サンプルコードは以下のような感じになります。サンプルコードを index.js というファイル名で保存し、$ node index.js で実行すると、以下のような

    const puppeteer = require('puppeteer');
    const cheerio = require('cheerio');
    
    (async () => {
      console.log('=== 🚀 SCRAPING START ===');
      const browser = await puppeteer.launch({ headless: false });
      const page = await browser.newPage();
      await page.setViewport({ width: 800, height: 600 });
    
      console.log('=== 👀 GETTING SITES OF THE DAY ===');
      await page.goto('https://www.awwwards.com/websites/sites_of_the_day/');
    
      // クリッカブルなカードの最初の要素
      const link1 = await page.$('li[class="col-3 js-collectable"]');
      // console.log(link1);
      await link1.click();
      await page.waitFor(3000); // TODO 修正したい
    
      console.log('URL:', page.url());
    
      let num = await page.$eval('.style-design', el => {
        return el.getAttribute('data-note');
      });
    
      console.log('DESIGN:', num);
    
      num = await page.$eval('.style-usability', el => {
        return el.getAttribute('data-note');
      });
    
      console.log('USABILITY:', num);
    
      num = await page.$eval('.style-creativity', el => {
        return el.getAttribute('data-note');
      });
    
      console.log('CREATIVITY:', num);
    
      num = await page.$eval('.style-content', el => {
        return el.getAttribute('data-note');
      });
    
      console.log('CONTENT:', num);
      
      num = await page.$eval('.style-mobile', el => {
        return el.getAttribute('data-note');
      });
    
      console.log('MOBILE:', num);
    
      num = await page.$eval('.style-developer', el => {
        return el.getAttribute('data-note');
      });
    
      console.log('DEVELOPER:', num);
    
      await page.screenshot({ path: "test.jpg" });
    
      await browser.close();
    })();

    実際に実行してみた結果はこちら。 node index.js で実行することができます。

    まとめ

  • スクレイピングにはリクエスト・レスポンス形式と、ヘッドレスブラウザ使用の2種類の方法がある
  • Puppeteer を使用することで、JavaScript でスクレイパーを作ることができる
  • Node サーバが動く環境でスクレイパーを実行すれば、情報取得を自動化することができる
  • 公式ドキュメント

  • Puppeteer