複数のデバイスサイズでスクリーンショット取るときに便利なCasperJS|ふにろぐふにろぐ複数のデバイスサイズでスクリーンショット取るときに便利なCasperJSPublish2013/08/18(日)ツイートたまに使っているのですが、ブログでは書いてなかったのと、最近めっきりこういう系の記事書いてないのでちょこっと紹介します。Facebookでは結構前にさらっとgistのURLをシェアしたりしているので知っている方も多いかもしれませんけど、改めて書いてみます。Bookmarkletを使ってブックマークレットで確認したりはしているのですが、お客さんとかで使えないとか使うの面倒だからとか画像で確認したいとかそういう要望があるわけです。いう場合はスクリーンショットを複数枚取ったりして送るという作業が発生するんですけど、これがなにげに面倒な作業です。できればこういう面倒なことはなくして、自動化したいと思うわけです。いう時に便利なのが、CasperJSっていうスクリプトです。こいつを使うと自分の指定したサイズで複数枚のスクリーンショットを自動で生成してくれるという優れものです。これがすごく便利ですので、以下に手順を書きます。あと、今さら言うなっていう感じかもしれませんが、このスクリプトはMacでターミナル使って実行します。ターミナル使うのは抵抗あるっていう人も多いかもしれませんが、これは本当に簡単で分かりやすいのでとっかかりにちょうどいいんじゃないかと思います。前置きはこの辺で手順を。長いので目次Homebrewを入れる&アップデートCasperJSの本体をインストールスクリプトの準備とフォルダの移動キャプチャを取る追記:bash登録しとくと超便利!あとがきHomebrewを入れる。このスクリプトを動かすために事前準備としてHomebrewのインストールが必要です。Macの場合はRubyは初期状態で入っているので、サイトにある説明そのままにターミナルを立ち上げて以下を実行します。https://raw.github.com/mxcl/homebrew/go)"インストールはこれで完了です。これで準備ができました。Homebrewを既に入れているよっていう人は、念のために新しいバージョンにしましょう。ターミナルで以下を実行します。updateCasperJSの本体をインストールHomebrewが入ったら、次はCasperJSの本体をインストールしましょう。casperjsこれを実行すると、CasperJSが入ります。ちなみに、慣れている人はどうということないんですけど、知らない人は$これを打ってしまう人がいます。(過去の自分)これは、ここからコマンドを打ってねっていうことなので、入力する必要はありません。目印的な意味で考えるといいですよ。意外と詰まるっていう話を何回か聞いたので、書いておきました。次はいよいよキャプチャを取っていきましょう。本当は自分で設定ファイルを作ったりした方がいいんですが、親切な先人が作成したファイルを公開してくれているので、感謝を込めて使わせてもらいましょう。(この場を借りて、ありがとうございます!)capture.jshttps://gist.github.com/gaspanik/5609135screenshots.jshttps://gist.github.com/gaspanik/5609099スクリーンショットを取るフォルダを作成し、その中に作成したjsファイルを置きます。フォルダの作成とファイルの配置ができたら、次はターミナルで作業用フォルダに移動します。(今回の例ではデスクトップ上にcapというフォルダを作ったという想定で話を進めます。cap/casper.js、cap/screenshots.jsという感じです。と打ってからターミナルにフォルダをドラッグしても大丈夫です。capこれで作業フォルダに移動しているという形になります。次はターミナルで以下のように打ちましょう。キャプチャを取る今回はexample.comというサイトのスクリーンショットを取る場合です。http://example.com/これを実行すると先ほどの作業用フォルダに指定したサイズのスクリーンショットが自動でとれています。コマンドで動かした結果が画像という形で確認できるので、すごく実感がありますね。http://example.comというような形で、screenshot.jsの場所を指定して使う事もできるようです。使い回す場合にはとても便利です。いった感じで、かなりお手軽便利にスクリーンショットを取ることができます。追記:bash登録しとくと超便利!記事書いたら親切なこもりさんがもっと便利に使う方法を教えてくれました!screenshots.jsを場所指定で使う場合にコマンドをエイリアスで登録しておいて使う方法です。「~/Users/ユーザー名/」にある、「.bash_profile」か「.bash_login」に以下のように追記する形でエイリアスを設定します。僕の場合はどっちもなかったので新しく作りました。今回は「~/Users/ユーザ名/Downloads/sc/」にデータを残していく形で説明します。~/Users/ユーザ名/Downloads/sc/screenshots.js」というコマンドを打ったことと同じになるという理屈です。http://example.comと打つだけで済みます。毎回の作業がある場合は作業効率が大幅にアップします!これはアツイ!あとがきちなみに書いてる時点ではきちんと動いているのを確認してますが、色々な事情で動作しなくなっちゃうっていうこともあるかと思います。いう場合は覚えてたら追記しますけど、そうできないこともあるかもしれませんので、そのときはごめんなさい。楽しいスクショライフを。>複数のデバイスサイズでスクリーンショット取るときに便利なCasperJS記事の著者:ふにすでぐち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サイトの運用に関する情報お問い合わせホームページを成功させたいとお考えの方はお気軽にご相談ください。ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。LINE@でも相談を受け付けています。QRコードから友達登録を行って、メッセージを送ってください。2020-022020-012019-122019-112019-102019-092019-082019-072019-062019-052019-042019-032019-022019-012018-122018-112018-102018-092018-082018-072018-062018-052018-042018-032018-022018-012017-122017-112017-102017-092017-082017-072017-062017-052017-042017-032017-022017-012016-122016-112016-102016-092016-082016-072016-062016-052016-042016-032016-022016-012015-122015-112015-102015-092015-082015-072015-062015-052015-042015-032015-022015-012014-122014-112014-102014-092014-082014-072014-062014-052014-042014-032014-022014-012013-122013-112013-102013-092013-082013-072013-062013-052013-042013-032013-022013-012012-122012-112012-102012-092012-082012-072012-062012-052012-042012-022012-012011-122011-112011-102011-092011-082011-072011-062011-052011-042011-032011-022011-01ホームページ/Webサイトの運用サポートに関するご案内ホームページで成果が上がらない、公開したホームページをどう更新していいのかわからないといったふわっとした質問から、アクセスを増やしたい、検索順位を上げたいなど具体的な希望がある場合でも、親切丁寧に相談にのります。方の場合でも、メールやチャットなどを活用してオンラインで相談することも可能ですし、交通費だけだしていただければお伺いして相談をお聞きすることもしています。「ホームページのことは誰に相談していいかわからない」など、ホームページ/Webサイトの運用にお困りの場合は、お気軽にご連絡ください。