CasperJSでサイトのスマホ画面を連続キャプチャする

はじめに

先日、サイトの特定情報をCSVに出力するスクリプトを書きました。
今回はスマホ（に限らずですが）画面のキャプチャを連続でできるようなJavaScriptを書いてみました。
こんな簡単に実装できるなんてCasperJSはすごい

使い道

• スマホ対応しているかどうかざっと画面で確認ができる
• どのようにスマホ対応しているか（レスポンシブかUAでページ変更しているのか）、スクリプトを一部変更することで簡単に確認ができる
• PC画面と比較することで、デバイスによる見せ方の違いがすぐに分かる
• スクリプト上でUAやViewportの変更もできるので、ちょっとした修正で様々なケースに対応できる

ファイル構成

root/─┬─capture.js（実行するスクリプト）
      │
      └─files/─┬─img/xxx.png（自動出力）
               └─src.json（読み込むURLソース）

なお必要なパッケージ、キャプチャしたいページのURLを記述したJSONファイルは前回記事のものと同じです

実行するJavaScriptファイルを作成

capture.js

var json   = require('./files/src.json');  // URLが配列形式で記載されたファイルを読み込む
var casper = require('casper').create();


/* スマホ用の設定を行うかどうか */
/* コマンド時の引数で判断する */
var isSmartPhone = (function() {
    return (casper.cli.get(0) === 'sp') ? true: false;
})();


/** 
 * casperのループ実行
 * @param {array}  json: URLを設定した配列
 * @param {object} self: Casperオブジェクト
 * @param {stings} link: 処理している現在のURL
 */
casper.start().each(json, function(self, link) {

    /* ページタイトルの定義 */
    var title;

    /* スマホ有効時の、UAとviewportの設定 */
    if (isSmartPhone) {
        /* UA, Viewportを変更削除することで様々なケースに対応可能 */
        self.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 ' + '(KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53')
            .viewport(320, 480);
    } else {
        self.viewport(1280, 1000);
    }

    /* 連続実行 */
    self
        /* 指定urlを開く */
        .thenOpen(link, function () {
            /* ページタイトルの取得 */
            title = this.getTitle();
        })

        /* キャプチャ画像の背景を白色に（デフォルトだと透過pngとなる） */
        .thenEvaluate(function() {
            document.body.bgColor = 'white';
        }, 'setBackGround')

        /* キャプチャ（ページタイトル名をファイル名とする） */
        .then(function() {
            this.echo('Capturing... ' + title);
            this.capture('./files/img/' + title + '.png');
        })
    ;

});

casper.run();

実行する

• sp を指定すると、スマホ用に設定したUAやViewportを使うようになります
• 画像の保存先はスマホ用で分けていないので、ファイル名が同じ場合そのままでは上書きされることにご注意ください

$ cd root/
$ casperjs capture.js sp

~Fin~

おわりに

同じようにTablet用の設定を追加すれば、さくっと色々なデバイスでの確認が可能です。
また前回書き忘れましたが、URLにはBasic認証のID/PWを含めることもできるため、制限付きのサイトでも手軽にキャプチャ・データ取得ができるかと思います。http://userName:[e-mail]