2018年08月18日 12時30分ネットサービス

Webサイトのクローリングやスクリーンショット撮影が簡単にできるヘッドレスChromeがGCPに登場

Googleのクラウドである「Google Cloud Platform(GCP)」のサービスの1つである「Google App Engine」が2018年6月にJavaScriptの実行環境であるNode.jsに対応し、それに伴ってさまざまなNode.jsアプリがApp Engineで動作するようになりました。その中の一つに「Puppeteer」というものがあり、このPuppeteerを用いるとGUIを描画しないヘッドレスなChromeを簡単に使うことができ、Webサイトのクローリングやスクリーンショットの撮影などが容易に行えるようになります。

Introducing headless Chrome support in Cloud Functions and App Engine | Google Cloud Blog
https://cloud.google.com/blog/products/gcp/introducing-headless-chrome-support-in-cloud-functions-and-app-engine

ヘッドレスChromeでは「Webページのスクリーンショットを撮る」「DOMの構築・レンダリングを行う」「PDFを生成する」「Webサイトのクローラーを実装する」「エンドツーエンドのパフォーマンス・UIテストを行う」など、ウェブブラウザのほぼすべての機能が実行可能です。一方で、ヘッドレスChromeはGUIが描画されないため、動作が軽い代わりにコマンド操作が必要となります。その煩雑な操作を簡単にしてくれるのが「Puppeteer」というライブラリです。

ヘッドレスモード自体は2017年6月にリリースされたGoogle Chrome 59より標準搭載されており、以前からApp EngineでヘッドレスChromeを実行することは不可能ではなかったのですが、複雑な設定が必要となっていました。App EngineがNode.jsに対応したことにより、サーバーレス環境でもPuppeteerが利用できるようになったので、これまでに比べ非常に簡単にヘッドレスChromeを動作されることが可能になったというわけです。

Google公式ドキュメントで、App Engine上でPuppeteerを使ってスクリーンショットを撮影するというチュートリアルが用意されていたので、どれほど簡単に使用できるのか実際に試してみました。

「appengine」というフォルダを任意の場所に作成し、コマンドプロンプトなどのターミナルソフトで作成したフォルダに移動して「npm init -y」とコマンドを入力し、「package.json」を生成します。npmはNode.jsと同時にインストールされるパッケージ管理ツールです。もしインストールしていない場合は先にNode.jsをインストールします。

次に、先ほど生成された「package.json」を開き、6～8行目の「"scripts"」の部分に……

以下のように書き加えます。

そして再びターミナルで

npm install express puppeteer

と入力し、必要なライブラリをインストールします。

package.jsonと同じ場所に「app.js」を作成し、サンプルファイルの中身をコピーして貼り付けます。

これで一通りの準備は完了です。試しにローカルで動かしてみます。ターミナルに

npm start

と入力し、サーバーが立ちあがったら「http://localhost:8080/?url=https://gigazine.net」にアクセスしてみるとサイトのスクリーンショットが生成されるのが確認できます。

後はApp Engineにデプロイするだけです。同じフォルダに「app.yaml」という名前でファイルを作成し、テキストエディタで開いて下記のとおりに記入します。

runtime: nodejs8
instance_class: F4_1G

そして下記のコマンドを実行します。

gcloud app deploy

するとApp Engineにデプロイされ、「https://[プロジェクトID].appspot.com/?url=https://gigazine.net/」などのurlでアクセスできるようになります。なお、gcloudはGoogle Cloud SDKをインストールすると同時にインストールされるツールです。