PhantomJSを使ってみる

PhantomJSはWebkitベースのヘッドレスブラウザで、Webスクレイピングやスクリーンショットを取得したりすることができます。
今回はこのPhantomJSを使って、スクリーンショットを取得してみます。

PhantomJSのインストール

npmを使ってPhantomJSをインストールします。
コマンドプロンプトを起動して、以下を実行します。

npm install -g phantomjs

以下のコマンドを実行して、バージョンが表示されたら準備完了です。

phantomjs --version

今回はnpmでインストールしましたが、公式サイトからダウンロードしてからインストールすることもできます。
　

使い方

作業ディレクトリを作成して、そのディレクトリへ移動します。

cd 作業ディレクトリ

hello.jsというファイルを作成して、以下のように記述します。

hello.js

console.log('Hello, world!');
phantom.exit();

2行目のphantom.exitがないとPhantomJSは終了しないので注意してください、

コマンドプロンプトに戻って、以下を実行します。

phantomjs hello.js

コマンドプロンプトで以下のように表示されました。

Hello, world!

スクリーンショットの取得

スクリーンショットの取得を試してみます。
capture.jsというファイルを作成して、以下のように記述します。

capture.js

var page = require('webpage').create();
page.open('https://cly7796.net/blog/', function(status) {
	console.log("Status: " + status);
	if(status === "success") {
		page.render('capture.png');
	}
	phantom.exit();
});

https://cly7796.net/blog/となっている部分に取得したいページのURLを入れてください。
スクリーンショットのファイル名を変更したい場合、capture.pngの部分を変更します。

コマンドプロンプトで以下を実行します。

phantomjs capture.js

少し待つと、作業ディレクトリ内にcapture.pngというファイルが生成されました。
capture.png
　

スクリーンショット取得のオプション

ブラウザサイズやスクリーンショットのサイズ、拡張子などを設定できます。
capture2.jsというファイルを作成して、以下のように記述します。

capture2.js

var page = require('webpage').create();
// ブラウザサイズを指定
page.viewportSize = { width: 1400, height: 800 };
// スクリーンショットのサイズを指定
page.clipRect = { top: 0, left: 0, width: 1400, height: 950};
page.open('https://cly7796.net/blog/', function(status) {
	console.log("Status: " + status);
	if(status === "success") {
		page.render('capture2.jpg');
	}
	phantom.exit();
});

コマンドプロンプトで以下を実行します。

phantomjs capture2.js

作業ディレクトリ内に、先ほどとサイズや拡張子の異なるファイルが生成されました。
capture2.jpg
　

【参考サイト】

• Quick Start | PhantomJS
• Screen Capture | PhantomJS