複数のデバイスサイズでスクリーンショット取るときに便利なCasperJS

Publish2013/08/18(日)

たまに使っているのですが、ブログでは書いてなかったのと、最近めっきりこういう系の記事書いてないのでちょこっと紹介します。
Facebookでは結構前にさらっとgistのURLをシェアしたりしているので知っている方も多いかもしれませんけど、改めて書いてみます。
サイトを作って確認するときに、僕はResponsive Design Bookmarkletを使ってブックマークレットで確認したりはしているのですが、お客さんとかで使えないとか使うの面倒だからとか画像で確認したいとかそういう要望があるわけです。
で、そういう場合はスクリーンショットを複数枚取ったりして送るという作業が発生するんですけど、これがなにげに面倒な作業です。
できればこういう面倒なことはなくして、自動化したいと思うわけです。
そういう時に便利なのが、CasperJSっていうスクリプトです。
こいつを使うと自分の指定したサイズで複数枚のスクリーンショットを自動で生成してくれるという優れものです。
これがすごく便利ですので、以下に手順を書きます。
あと、今さら言うなっていう感じかもしれませんが、このスクリプトはMacでターミナル使って実行します。
ターミナル使うのは抵抗あるっていう人も多いかもしれませんが、これは本当に簡単で分かりやすいのでとっかかりにちょうどいいんじゃないかと思います。
では前置きはこの辺で手順を。
ちょっと長いので目次

  1. Homebrewを入れる&アップデート
  2. CasperJSの本体をインストール
  3. スクリプトの準備とフォルダの移動
  4. キャプチャを取る
  5. 追記:bash登録しとくと超便利!
  6. あとがき

Homebrewを入れる。

このスクリプトを動かすために事前準備としてHomebrewのインストールが必要です。
Macの場合はRubyは初期状態で入っているので、サイトにある説明そのままにターミナルを立ち上げて以下を実行します。
要はコピペでおk
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
と打つだけで済みます。
毎回の作業がある場合は作業効率が大幅にアップします!これはアツイ!

あとがき

ちなみに書いてる時点ではきちんと動いているのを確認してますが、色々な事情で動作しなくなっちゃうっていうこともあるかと思います。
そういう場合は覚えてたら追記しますけど、そうできないこともあるかもしれませんので、そのときはごめんなさい。
では、楽しいスクショライフを。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期で更新しています。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

ふにろぐとは?

でぐち

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにす株式会社

ふにす株式会社は大阪の高槻にある「Webを起点に会社の成長を応援するパートナー」をモットーに、Webにまつわるいろいろな問題を解決する、サポートをする会社です。
ホームページでお問い合わせを増やしたい、もっとたくさんの人に見てもらいたいなど、ホームページ/Webサイトを活用したい方向けの活動を行っています。
また、ホームページの作成や、外部パートナーとしての運用サポートなど、幅広くWebにまつわる諸々のことをおこなっております。

ブログ内検索

サービス

ふにすWeb相談所

ホームページの運用お得情報

ホームページ/Webサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Webサイトの運用に関する情報

お問い合わせ

ホームページを成功させたいとお考えの方はお気軽にご相談ください。
ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。

  • メールで問い合わせる
  • チャットワークで問い合わせる
  • Facebookで問い合わせる
  • Twitterで問い合わせる

LINE@でも相談を受け付けています。
QRコードから友達登録を行って、メッセージを送ってください。

LINE@

最新記事

カテゴリ別記事一覧

月別記事一覧