Murayama blog.

プログラミング教育なブログ

PhantomJS入門 スクリーンキャプチャを撮るまで

PhantomJSとは

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

http://phantomjs.org/

PhantomJSはJavaScript APIで動くヘッドレスWebKitです。
PhantomJSはDOMハンドリング、CSSセレクタCanvasSVGなどネイティブにサポートしており、高速に動作します。

ものすごく簡単にいうと、ターミナルで動く画面をもたないブラウザですね。

主な利用シーンは以下のとおりです。

  • Webテスト
  • ページオートメーション
  • スクリーンキャプチャ
  • ネットワークモニタリング

インストール

Macの人は

brew install phantomjs


それ以外の人はバイナリをダウンロードできます。環境変数PATHを設定すれば動作します。
http://phantomjs.org/download.html

Hello World

テキストエディタを開いて次のようにコーディングします。hello.jsというファイル名で保存します。

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

ターミナルで次のように実行します。

phantomjs hello.js
Hello, world!

1行目のコードはターミナルへの出力です。
2行目のコードはphantom.exit()は処理の終了を意味します。このコードを呼ばないと処理は終了しません。

Page Loading

Web Pageオブジェクトによって、ロード、解析、レンダリングすることが可能です。

次のコードは、Googleホームページをロードして、画像ファイル(google.png)として出力します。

var page = require('webpage').create();
page.open('http://google.com', function () {
    window.setTimeout(function () {
        page.render('google.png');
        phantom.exit();
    }, 200);
});

上記のコードをcapture.jsというファイル名で保存します。
ターミナルから実行します。

phantomjs capture.js

すると、次のようなgoogle.pngファイルが生成されます。


次のコードloadspeed.jsは、URLのロードかかった時間を計測します。

var page = require('webpage').create(),
    system = require('system'),
    t, address;

if (system.args.length === 1) {
    console.log('Usage: loadspeed.js <some URL>');
    phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('FAIL to load the address');
    } else {
        t = Date.now() - t;
        console.log('Loading time ' + t + ' msec');
    }
    phantom.exit();
});

実行すると次のようになります。

phantomjs loadspeed.js http://www.google.com
Loading http://www.google.com Loading time 719 msec

元ネタ

https://github.com/ariya/phantomjs/wiki/Quick-Start
本家のサイトのQuick-Startを参考にしました。
一部、内容が古いのか、私の環境が古いのか、そのままでは動きませんでした。
#スクリーンキャプチャ撮るときにsetTimeoutがいるところなど

次回

PhantomJSを使って、何か作ってみます。