phantomjsで遊ぶ - 萌えキャラとは何だったのか

うわっ…私のチーム、レベル低すぎ…？ mix3です。リードエンジニアとしてどうにかしろって話ですが、コミュ障の自分には荷が重いです…

PhantomJS: 最小限なheadlessのWebKitベースのJavaScriptツール

だそうです。正直良くわかりませんが、nodeのようにサーバーサイドで書けるイメージ。

$ cat hello.js

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

$ phantomjs hello.js

Hello, world!

とか

$ cat google_capture.js

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

とか

$ cat hello_server.js

var system = require('system');

if (system.args.length !== 2) {
    console.log('Usage: hello_server.js <portnumber>');
    phantom.exit(1);
} else {
    port = system.args[1];
    server = require('webserver').create();

    service = server.listen(port, function (request, response) {
        response.statusCode = 200;
        response.write('<html><body>Hello, World!</body></html>');
        response.close();
    });

    if (!service) {
        console.log('Error: Could not create web server listening on port ' + port);
        phantom.exit();
    }
}

$ phantomjs hello_server.js

$ curl http://localhost:2525

<html><body>Hello, World!</body></html>

などなど。単純なCLIプログラムや、Webページにアクセスしてキャプチャ取ったり、サーバプログラムも書けたりします。

ローカルファイルも扱えるので、例えばあるディレクトリ以下の画像を並べて表示するサーバを立てつつ、それを

page.open('http://localhost:[port]', function () {
    page.render(...);
});

とかするとあら不思議。コマンド一発で複数画像を１枚画像に出来たりします。

なんでこんなもん触ってるかというと

ソーシャルゲームに携わっていて思う事なのですが、イベント中だと特にそうですが時間で文言が変わるということは良くあることです。そしてこういうものは当然リリース前にスケジュールはきっちり決まっていて（もちろん差し込みで仕込み直すこともありますが）がっつりテストすることになります。が、開発段階でも当然自分で目視チェックすることになるのですがこれが非常に面倒くさい。なぜ面倒くさいかというとモジュールの単体テストとは違いローカルプロキシ越しにブラウザで確認したり実機で確認したりすることになり、自動テストになかなか上手く落とし込めないからです。（見た目の部分は特に変更が出易いのでそういう意味でもテストに落としづらいというのはあると思います）他のプロジェクトだと一部定型的な部分はモデルに落とし込んでテスト出来るようにしていたりするようですが、当然限界もあり。

ということで、今のところ画像、文言など見た目の部分をテストに落とし込むのは無理だろうなぁと思っておりますが、そうは言ってもチェックが面倒なことは面倒なのでチェックすること自体はいくらか楽にはしたい。特に時間で文言が切り替わるのを見比べられる状態にしたい。

ということでphantomjsでしこしこ以下のようなスクリプト書いてました

指定ページを時間別にキャプチャしてpngで吐き出すスクリプト
フォルダ以下の*.png画像を横に並べて表示するサーバを立ててそれをキャプチャするスクリプト

参考: PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips

ほぼほぼキャプチャの部分は参考をそのまま使わせてもらっているのですが、参考のままだと画像などがキャプチャされないことがあったので、setTimeoutを使ってキャプチャのタイミングを遅らせるなどの簡単な工夫をしています。

後、サーバがバイナリを出力するときは、ローカルからファイルを読み込む時に 'b' を指定するのとresponse.writeするまえにresponse.setEncoding('binary')しないといけないようなので注意が必要です。

var image = fs.read(file_path, 'b');
response.headers = {
    'Accept-Ranges': 'bytes',
    'Content-Type': 'image/png',
    'Content-Length': image.length
};
response.setEncoding('binary');
response.write(image);

こうすることで横並び画像にして文言チェック出来るようになり捗りそうな気配がしています。（まだ作ったばかりで実際に活用するのはこれから）

ちなみに一枚画像にしてしまうのは社内gyazoにあげてディレクターなど他の方にも見てもらえるようにしたかったからですが、今にして思えば別に一枚画像にする必要はなく、画像一括アップロード出来るフォームと横並びにして表示出来る簡単なサーバアプリを書くだけで良いことに気づいたので、ここは今後やりやすい方にシフトする感じで行きたい。

ということでphantomjs便利なんじゃないかなというお話でした。