Fork me on GitHub

WebkitベースのJavaScriptコマンドラインツール「PhantomJS」

Edit on GitHub 編集履歴を見る

PhantomJSはJavaScriptファイルを実行できるQtWebkitベースのコマンドラインツール(ヘッドレスブラウザ)です。
PhantomJSの面白い所はDOMやCanvasなど他のコマンドラインツールで触れにくい部分もネイティブにアクセスできるため、リッチアプリケーションなどのテストツールとして活用できそうです。


phantomjs somescript.js [argument [argument ...]]
という感じでjsファイルを指定し、引数を渡して実行できるようで、phantom.argsで引数を受け取ったりできます。
そのほかにもsleepや表示画面を画像にするrenderなどのAPIが用意されています。
-Interface - phantomjs - API Reference - Project Hosting on Google Code
SourceCodeはgitなどでも用意されていて、ソースからビルドする方法も解説されています。
(Windowsはバイナリがダウンロードできる)
-BuildInstructions - phantomjs - Build Instructions - Project Hosting on Google Code
Jasmineとの連携が用意されていたり、かなり面白いJavaScript開発ツールとなっていそうです。

sampleフォルダにいろいろなサンプルが入っているし、APIもそこまで多くないため扱うのにはあんまり苦戦はしないと思います。
簡単な例(renderで画像にすると日本語が化けてる)

//$ phantomjs.exe screenshot.js http://d.hatena.ne.jp/unageanu/20110123/1295759061
if (phantom.state.length === 0) {
var address = phantom.args[0];
phantom.state = 'ss';
phantom.viewportSize = { width: 480, height: 600 };
phantom.open(address);
} else {
phantom.render('screenshot.png');
phantom.exit();
}

open(URL)というAPIが結構面白くて、ページに入り込んでDOMとかを扱う感じになるため、ものすごく自然にDOM操作を書くことができます。
サンプルのtweet.jsを例に見てみると、最初はphantom.stateは空となっているため、(phantom.state.length === 0);//trueとなり、phantom.stateを設定してから、phantom.openで指定したURLに入ります。指定URLが読み終わると、もう一度上から実行されて今度はphantom.stateに”tweets”が入ってるため、ページ内でdocument.querySelectorAll(‘span.status’);して内容をスクレイピングするような処理をしてphantom.exit();で終了となります。

// Get twitter status from someone
if (phantom.state.length === 0) {
    phantom.state = 'tweets';
    phantom.open('http://mobile.twitter.com/azu_re');
} else {
    var list = document.querySelectorAll('span.status');
    for (var i = 0; i < list.length; ++i) {
        console.log((i + 1) + ': ' + list[i].innerHTML.replace(/<.*?>/g, ''));
    }
    phantom.exit();
}

奇妙な動きっぽいですが、XHRでデータを取得してパースして…みたいな処理を書くより単純に動作を書ける感じがします。またSeleniumのようにクロスブラウザのテストにはWebkitベースなためできませんが、素早くブラウザを使ったチェックが行えると思います。まだ公開されたばかりで荒削りな感じの所はありますが、コマンドラインからJavaScriptを実行してDOMも操作できかなり面白いツールになっています。

phantomjs - Project Hosting on Google Code
http://code.google.com/p/phantomjs/
この記事へ修正リクエストをする
JSer.info Slackに参加する