ヘッドレスChrome + Puppeteer のインストールと使い方メモ(CentOS)

プログラム
プログラム
スポンサーリンク

ヘッドレスChrome(Headless Chrome)は、コマンドラインから Google Chrome を操作できる仕組みです。WEBアプリの自動テストや、WEBサイトのパフォーマンス監視などに活用することができそうですね。また、ヘッドレスChrome を操作するための Nodeライブラリ Puppeteer(パペティアー)の正式版が最近(2018年1月)リリースされました。そこで今回は、CentOS7 に Google Chrome と Puppeteer をインストールする手順と、使い方を簡単にご紹介いたします。

基本パッケージのインストール

はにめに開発ツールなど、基本的なパッケージをインストールしておきます。

yum -y groupinstall base
yum -y groupinstall development
yum -y groupinstall network-tools

Google Chrome のインストール

Google Chrome の yum リポジトリを追加します。

sudo vi /etc/yum.repos.d/google-chrome.repo

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

Google Chrome をインストールします。(Chrome が依存するライブラリもインストールされます)

sudo yum install google-chrome-stable

日本語フォントをインストールします。

sudo yum install ipa-gothic-fonts ipa-mincho-fonts ipa-pgothic-fonts ipa-pmincho-fonts

Google Chrome が正しく動作するか確認します。

google-chrome --version
Google Chrome 64.0.3282.167 ←バージョンが表示されればOK

ヘッドレスChrome の使い方

ヘッドレスChrome の使い方はじつにシンプルで、google-chrome コマンドに「--headless」オプションを付けてヘッドレスモードで実行するだけです。(現時点ではこれに加えて「--disable-gpu」も指定する必要があります)

例えば、WEBサイトの DOMを取得するには「--dump-dom」フラグを使います(root ユーザーで実行する場合は「--no-sandbox」も付ける必要があります)

google-chrome --headless --disable-gpu --dump-dom http://example.com/

WEBサイトのスクリーンショットを撮るには、「--screenshot」フラグに続けて出力先のファイルパスを指定します。(指定しない場合は、カレントディレクトリに screenshot.png というファイルが出力されます)

google-chrome --headless --disable-gpu --screenshot=/tmp/sample.png https://blog.apar.jp/

「--window-size」フラグを使って、スクリーンショットのサイズを指定することもできます。

google-chrome --headless --disable-gpu --window-size=1280,2560 --screenshot=/tmp/sample.png https://blog.apar.jp/

ページ全体のスクリーンショットを撮りたい場合は、次にインストールする Puppeteer を使うのが便利です。

参考資料
ヘッドレス Chrome ことはじめ | Google Developers
便利なコマンドラインフラグ

Puppeteer のインストール

Puppeteer は、async/await をサポートしている Node.js v7.6.0 以上が必要になりますので、今回は Node.js の公式リポジトリ から Node.js v8 をインストールします。

Node.js v8 のインストール

Node.js v8 用の yum リポジトリ追加

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -

Node.js のインストール

yum install -y nodejs

Node.js のバージョンを確認

node -v
v8.9.4 ←v8ならOK

Puppeteer のインストール

適当なディレクトリを作成して Puppeteer をインストールします。

mkdir puppeteer_app
cd puppeteer_app/
npm i --save puppeteer

【補足】
Puppeteer をインストールすると、最新版の Chromium(Google Chrome のベースになっているWEBブラウザ)もインストールされるので、先ほどインストールした Google Chrome は不要に思われるかもしれませんが、Chromium が依存するライブラリをインストールするため Google Chrome を先にインストールしておく必要があります。(Chromium と Google Chrome が依存するライブラリは、ほぼ同じです)

Puppeteer の使い方

Puppeteer の使い方も簡単で下のような JavaScript を作成して node コマンドで実行するだけです。

下はページ全体のスクリーンショットを撮るためのスクリプトです。(CentOS7.4の場合は一般ユーザーでも「--no-sandbox」フラグが必要でした)

vi screenshot.js

const puppeteer = require('puppeteer');

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

スクリプトの実行

node screenshot.js

おわりに

Puppeteer の API ドキュメント をざっと見ただけでも、Puppeteer で Chrome を操作できることはかなりありそうです。色々試して見たいと思います。

コメント

タイトルとURLをコピーしました