複数のデバイスサイズでスクリーンショット取るときに便利なCasperJS
Publish2013/08/18(日)
たまに使っているのですが、ブログでは書いてなかったのと、最近めっきりこういう系の記事書いてないのでちょこっと紹介します。
Facebookでは結構前にさらっとgistのURLをシェアしたりしているので知っている方も多いかもしれませんけど、改めて書いてみます。
サイトを作って確認するときに、僕はResponsive Design Bookmarkletを使ってブックマークレットで確認したりはしているのですが、お客さんとかで使えないとか使うの面倒だからとか画像で確認したいとかそういう要望があるわけです。
で、そういう場合はスクリーンショットを複数枚取ったりして送るという作業が発生するんですけど、これがなにげに面倒な作業です。
できればこういう面倒なことはなくして、自動化したいと思うわけです。
そういう時に便利なのが、CasperJSっていうスクリプトです。
こいつを使うと自分の指定したサイズで複数枚のスクリーンショットを自動で生成してくれるという優れものです。
これがすごく便利ですので、以下に手順を書きます。
あと、今さら言うなっていう感じかもしれませんが、このスクリプトはMacでターミナル使って実行します。
ターミナル使うのは抵抗あるっていう人も多いかもしれませんが、これは本当に簡単で分かりやすいのでとっかかりにちょうどいいんじゃないかと思います。
では前置きはこの辺で手順を。
ちょっと長いので目次
Homebrewを入れる。
このスクリプトを動かすために事前準備としてHomebrewのインストールが必要です。
Macの場合はRubyは初期状態で入っているので、サイトにある説明そのままにターミナルを立ち上げて以下を実行します。
要はコピペでおｋ
ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
インストールはこれで完了です。
これで準備ができました。
Homebrewを既に入れているよっていう人は、念のために新しいバージョンにしましょう。
ターミナルで以下を実行します。
$ brew update
CasperJSの本体をインストール
Homebrewが入ったら、次はCasperJSの本体をインストールしましょう。
再びターミナルを立ち上げて
$ brew install casperjs
これを実行すると、CasperJSが入ります。
ちなみに、慣れている人はどうということないんですけど、知らない人は
$
これを打ってしまう人がいます。(過去の自分)
これは、ここからコマンドを打ってねっていうことなので、入力する必要はありません。
目印的な意味で考えるといいですよ。
意外と詰まるっていう話を何回か聞いたので、書いておきました。
話がそれました。では次はいよいよキャプチャを取っていきましょう。
スクリプトの準備とフォルダの移動
本当は自分で設定ファイルを作ったりした方がいいんですが、親切な先人が作成したファイルを公開してくれているので、感謝を込めて使わせてもらいましょう。(この場を借りて、ありがとうございます！)
capture.js
https://gist.github.com/gaspanik/5609135
screenshots.js
https://gist.github.com/gaspanik/5609099
スクリーンショットを取るフォルダを作成し、その中に作成したjsファイルを置きます。
フォルダの作成とファイルの配置ができたら、次はターミナルで作業用フォルダに移動します。
(今回の例ではデスクトップ上にcapというフォルダを作ったという想定で話を進めます。cap/casper.js、cap/screenshots.jsという感じです。)
以下コマンドで移動してもいいですし、cd と打ってからターミナルにフォルダをドラッグしても大丈夫です。
$ cd cap
これで作業フォルダに移動しているという形になります。
では次はターミナルで以下のように打ちましょう。
キャプチャを取る
今回はexample.comというサイトのスクリーンショットを取る場合です。
casperjs screenshots.js http://example.com/
これを実行すると先ほどの作業用フォルダに指定したサイズのスクリーンショットが自動でとれています。
コマンドで動かした結果が画像という形で確認できるので、すごく実感がありますね。
ちなみに、これまた優しい人が教えてくれましたが、
casperjs ~/Users/ユーザー名/screenshots.js http://example.com
というような形で、screenshot.jsの場所を指定して使う事もできるようです。
使い回す場合にはとても便利です。
といった感じで、かなりお手軽便利にスクリーンショットを取ることができます。
追記：bash登録しとくと超便利！
記事書いたら親切なこもりさんがもっと便利に使う方法を教えてくれました！
screenshots.jsを場所指定で使う場合にコマンドをエイリアスで登録しておいて使う方法です。
まずは、「~/Users/ユーザー名/」にある、「.bash_profile」か「.bash_login」に以下のように追記する形でエイリアスを設定します。
僕の場合はどっちもなかったので新しく作りました。
今回は「~/Users/ユーザ名/Downloads/sc/」にデータを残していく形で説明します。
alias sc="casperjs ~/Users/ユーザ名/Downloads/sc/screenshots.js"
このエイリアスを設定しておくことで、「sc」と入力することで「casperjs ~/Users/ユーザ名/Downloads/sc/screenshots.js」というコマンドを打ったことと同じになるという理屈です。
なので、コマンドでは
sc http://example.com
と打つだけで済みます。
毎回の作業がある場合は作業効率が大幅にアップします！これはアツイ！
あとがき
ちなみに書いてる時点ではきちんと動いているのを確認してますが、色々な事情で動作しなくなっちゃうっていうこともあるかと思います。
そういう場合は覚えてたら追記しますけど、そうできないこともあるかもしれませんので、そのときはごめんなさい。
では、楽しいスクショライフを。
