PhantomJS + CasperJS で一括キャプチャを撮ってみた

PhantomJS + CasperJS で自動キャプチャを撮ってみたり、BackstopJS でキャプチャ見比べたりしてみたので軽くメモ。

既に運用しているサイトの全ページのキャプチャを撮りたい場合
- インストール
- 使い方
特定のページの変更を確認したい場合
- インストール
- 使い方

既に運用しているサイトの全ページのキャプチャを撮りたい場合

いかに楽をしてキャプチャを撮るか。

サイトの URL 一覧作るのが面倒だなあ。
→ Website Explorer 使うと割と楽（ただし Windows のみ）
キャプチャ手作業で撮るのは面倒だなあ。
→PhantomJS と CasperJS で一括で撮れば楽

インストール

Website Explorer はダウンロードしてそのまま使えるので特筆することなしです。
Website Explorer 今まで知らなかったんですが、結構すごい。

指定したWebサイトの階層構造を調査できるソフト。URLを指定して[開始]ボタンを押すと、そのWebページのリンクを順にたどり、指定したURL以下の階層にあるフォルダ構造を調査することができる。

『Website Explorer – 窓の杜ライブラリ』より引用

PhantomJS + CasperJS を使うには Node.js が必要なので、もし入ってない人は最初に Node.js を入れておいてください。その後、PhantomJS と CasperJS をインストール。

npm install -g phantomjs casperjs

使い方

Website Explorer で対象サイトの URL リストを CSV で書き出す。
1で書き出した CSV を「URL,保存する画像名」に整形する（ここまでは Excel で OK）。
例）list_for_excel.csv
```
https://wp.graphact.com/,01_top
https://wp.graphact.com/archives,02_アーカイブ
```
【CSV 内に日本語を利用している場合のみ】
Excel で保存した CSV は文字コードがシフトJIS、改行コードが CRLF（Windowsの場合）になるので、テキストエディタで保存した CSV を開いて文字コードを UTF-8、改行コードを LF にして別名で保存する。
※文字コードと改行コードを変更した後は Excel でうまく開けなくなってしまうので別名保存して、再編集が楽なようにしておく。
別名で保存したほうの CSV を PhantomJS + CasperJS で利用してキャプチャを撮る。TAM さんの記事が詳しかったのでリンクして、ここでは詳細は省きます。
参考）PhantomJS と CasperJS で複数ページを一括キャプチャする｜ Tips Note by TAM
画像は CSV で指定した画像名で保存されているので、確認。

保存する画像名をページの <title> から引っ張ってくると日本語になるケースが多いけれど、その場合は CSV の文字コードを変えて保存しないと文字化けして上手くキャプチャできないので注意。文字コードと改行コードを変えた後、csvtojson を使って json に書き出して、それを PhantomJS + CasperJS で利用しても良いと思うけれど、1手間増えてしまうので。

便利！！

特定のページの変更を確認したい場合

指定したページのキャプチャを撮って差分を確認。

編集前・編集後にそれぞれキャプチャを手動でやるのは面倒だなあ。
→BackstopJS で一括キャプチャを撮る
目視で確認は大変＆漏れもありそうで心配。
→BackstopJS で機械的に差分をチェックする

BackstopJS の特長は、

複数の viewport のキャプチャを一気に撮ることが可能。
複数ページを対象にすることも可能。
特定のセレクタのみキャプチャを撮ったり、特定のセレクタは対象外にしたりすることもできる。

インストール

Node.js が必要なので、もし入ってない人は最初に Node.js を入れておいてください。その後、gulp、PhantomJS、CasperJS が必要なので入ってない人はこちらもインストール。

npm install -g gulp phantomjs casperjs

BackstopJS を使いたいディレクトリで BackstopJS をインストール。

npm install --save-dev backstopjs

使い方

設定ファイル backstop.json を作成する。位置は node_modules フォルダがある階層。

backstop.json を次のように編集。
例）backstop.json
この例だと、http://wp.graphact.com では body を対象に、https://wp.graphact.com/archives では #content と #secondary を対象に。

{
  "viewports": [
    {
      "name": "sp",
      "width": 320,
      "height": 480
    },
    {
      "name": "pc",
      "width": 1024,
      "height": 768
    }
  ],
  "scenarios": [
    {
      "label": "top",
      "url": "http://wp.graphact.com",
      "hideSelectors": [],
      "removeSelectors": [],
      "selectors": [
        "body"
      ],
      "readyEvent": null,
      "delay": 500
    },
    {
      "label": "archives",
      "url": "https://wp.graphact.com/archives",
      "hideSelectors": [],
      "removeSelectors": [],
      "selectors": [
        "#content",
        "#secondary"
      ],
      "readyEvent": null,
      "delay": 500
    }
  ]
}

編集前にキャプチャを撮っておく。node_modules/backstopjs で次のコマンドを実行。このキャプチャが比較の基準となる。
```
gulp reference
```
編集後に再度キャプチャを撮って、比較して差分があるか確認する。
```
gulp test
```
確認結果は HTML ページとして表示される。

差分があるときは次のように表示され、差分のある箇所が分かりやすい。

レスポンシブなサイトの CSS をリファクタリングした後に、崩れてしまった場所がないか確認したりするのに良いかも。

対象ページが多いと backstop.json に URL 書いていくのが大変かもしれないので、あんまりにページ数多いときは BackstopJS を使わずに PhantomJS + CasperJS でキャプチャを撮って、Kaleidoscope とかで比較するほうが楽かもしれない。こうしたほうがいいよ等あれば是非教えてください。

別々の URL を比較するのなら、wraith も良さそうだったんですが Windows 環境でうまく動かせなかったので、そのうち Mac で試してみようかなと思います。wraith は ImageMagick のインストールが必須になってます。差分撮るのに使ってるのかな？