HeadlessChromeとPuppeteerを使ってみた - チェ・ゲバムラの日記

環境
AWS EC2（CentOS7）
Puppeteer 1.7.0
node.js v8.11.3

以前から話題のヘッドレスクローム、ライブラリのPuppeteer（パペティアー）を使ってみた。
少し前にヨーロッパで制定されたGDPRの影響をモロに受けて厳しくなりつつある個人情報保護。
例にもれずInstagramは今年の12月6日をもって現行APIで取得できる情報はかなり制限されるそう。
Twitterもいつどうなるかわかったものではない。

SNSを使ったツールを使ったりしているサイトもあるので、どうにかしないといけない。
ということで自分のアカウントを使ってTwitterでログインしてスクショしてみたのでメモしておく。

HeadlessChromeとは

コマンドラインから Google Chrome を操作できる仕組み。

Puppeteerとは

Node.jsからHeadless Chromeを簡単に操作できるようにしたフレームワーク。
GUIを使わずにChromeを起動、操作することが出来る。SPAのようにJavascriptで作られたサイトでも利用可能。

つまり簡単にGoogleChromeを操作出来るフレームワーク。
開発元がchrome devチームの為信頼性も高い。

よく使われる使い方

・スクリーンショットやPDFの生成
・SPAのクロールとpre-renderedコンテンツの生成(SSR)
・Webサイトスクレイプ
・フォームテストの自動化
・最新Chromeを使っての最新のJavaScriptやブラウザ機能のテスト
timeline traceをキャプチャーしてパフォーマンス診断を助ける

利用するための条件

・async/await をサポートしている Node.js v7.6.0 以上をインストール
・GoogleChromeインストール
・CentOSの場合は7以上

インストールから実行まで

node.jsインストール
curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
yum install -y nodejs

node.jsバージョン確認
node -v

依存パッケージ
yum -y install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

GoogleChromeインストール
yum -y install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm

Puppeteer のインストール
npm i --save puppeteer

Puppeteerの権限
chown root:root chrome_sandbox && sudo chmod 4755 chrome_sandbox && export CHROME_DEVEL_SANDBOX="$PWD/chrome_sandbox"

コード

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://google.com/');
  await page.screenshot({path: './sample.png', fullPage: true});
  await browser.close();
})();

スクリプトの実行
node screenshot.js

コード解説
asyncとは
非同期関数を定義する関数宣言のこと。
使う理由は、Promiseより簡潔に非同期処理がかけるから。

awaitとは
async function内でPromiseの結果（resolve、reject）が返されるまで待機する（処理を一時停止する）演算子のこと。

Puppeteer API
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

参考
https://blog.apar.jp/program/9461/