【手順解説】JavaSciptで簡単スクレイピング！ – Puppeteerでスクリーンショットを撮影する｜ProgLearn

JavaScriptでWebの情報を取得できる！
Puppeteer = 人形使い
Puppeteerをインストールしよう

JavaScriptでWebの情報を取得できる！

皆様こんにちは。ProgLearn;編集部です。

先日、この記事を書いてる弊社技術メンバーが技術イベントでピッチをしてきました。

『Vue.js/PWA/JavaScript…新&定番なんでもあり』表参道Web勉強会 v5

その中で、スクレイピング、つまりJavaScirptでWebサイトの情報を取得する方法についてご紹介をしてきました。

今回はその時発表した内容の一部をご紹介しようと思います！

Puppeteer = 人形使い

Puppeteer は “パペティア”と発音し、人形使いの意味です。昔パペットマペットなんて芸人さんがいましたね。

Puppeteer は Node.js のライブラリです。なので、インストールする際は npm や yarn を使ってインストールします！

特徴としては、Chroniumというヘッドレスブラウザ、つまり実際に見える画面(GUI) はないものの、ブラウザとしてChromeが情報を収集してくれることです！ Pythonとかで Seleniumを使ったことがあれば、それと全く一緒ですね。

スクレイピングの手法には2つありますが、Puppeteerは後者のブラウザ上に表示されている要素を取得するパターンです。

前者の方法をとるのは Python のライブラリ、 BeautifulSoup4 などです。これについても今度ご紹介しますね！

ブラウザ起動型のスクレイピング手法の特徴としては SPAやAjax通信など、後から読み込まれる要素であっても情報を取得をすることができる点です。

また、情報を取得するだけではなく、スクリーンショットを撮影したり、PDF化したりできます！

Puppeteerをインストールしよう

では、早速Puppeteerをインストールして使ってみましょう！

公式サイトも参考にしつつ、やっていきましょう！

https://github.com/GoogleChrome/puppeteer

前提条件として、 node.js がインストールされている必要があります。

まだインストールしてないかたはここからインストールしておいてくださいね！

npm init

自分が作業をしたいディレクトリの中で npm init をします。項目は全部enterを連打しちゃいましょう。

$ npm init

...

Press ^C at any time to quit.
package name: 
version: (1.0.0)

...

Is this OK? (yes)

package.jsonというファイルができていれば成功です。

$ ls
package.json

puppeteerをインストールする

npm i puppeteerをしちゃいましょう。

$ npm i puppeteer
> node install.js
Downloading Chromium r662092 - 88.3 Mb [====================] 100% 0.0s
+ puppeteer@1.17.0
added 43 packages from 22 contributors and audited 50 packages in 11.51s found 0 vulnerabilities

JavaScriptファイルを作る

今回は、公式のサンプルをそのまま使って search.jsというファイルを作ってみましょう。

// puppeteer のライブラリを使いますよ
const puppeteer = require('puppeteer');

(async () => {
  // puppeteerを起動しますよ
  const browser = await puppeteer.launch();
  // ページを開いてください
  const page = await browser.newPage();
  // ここのページに行ってください
  await page.goto('https://example.com');
  // スクリーンショットを撮ってください
  await page.screenshot({path: 'example.png'});
  // お疲れ様でした(閉じる)
  await browser.close();
})();

コメントと一緒に読んでみると、単純明快ですよね。

async, awaitについては非同期処理と呼ばれるものです。メンバーが以前Qiitaに投稿した記事があるので、合わせてご覧ください！

[JS] 図で理解する同期 / 非同期処理の概念と実際の実装方法 – Promise, Generate, async

では、このファイルを実行してみましょう。node server.jsを実行してみてください。

すると、server.jsと同じディレクトリ内(ファイル内)にスクリーンショットが保存されています！！

ちなみに、Pythonでスクレイピング行いたい方はこちらの入門書がおすすめです。

いかがでしょうか？結構簡単にスクレイピングできちゃいましたね。

以前機械学習で使われる言語の３位がJavaScriptだよ、という話をしましたが、今回のスクレイピングの例をはじめ、機械学習を実行するために必要な環境がだんだん整備されていっているんですね！！

ProgLearn; では JavaScirpt やPHP, Pythonの技術知識についても発信していこうと思います。

「こんな知識知りたい！」「これ、どうなってんの？」

そんな疑問や要望があったらぜひコメントをお寄せください！