ブラウザでページ全体をキャプチャする

こんにちわ、キャッチアップの坂口です。
今回は、システムの開発、というより、webサイトやシステム開発の手助けになるような内容です。

普段、パソコンの画面の内容を保存しておきたい、誰かに見せたいという時にスクリーンキャプチャ
（画面キャプチャ、画面保存）の機能があるかとおもいます。

Windowsの場合
    画面全体：「PrintScreen」キー
    ウィンドウのみ：「PrintScreen」キー＋altキー
        ※ クリップボードにコピーされるので
         ペイントなどのアプリで貼り付けて保存する

    ファイルに保存：「Win」キー+「PrintScreen」キー
        ※ Windows8以降で使えます
    
    指定した範囲：「Win」キー+「Shift」キー+「S」キー
        ※ Windows 10 Creators Update 以降で使えます

Macの場合
    画面全体：「Command」キー+「3」キー
    ウィンドウのみ or 指定した範囲：「Command」キー+「4」キー

という感じでなかなか便利に使われているんじゃないでしょうか。
（それにしてもWindowsのスクリーンキャプチャは使い勝手が…）

と、前置きが長くなりましたが、ここからが本題。

ブラウザでいろいろなサイトを見ている時に、あ、このサイトの内容をキャプチャしたい！って時は
スクリーンキャプチャの機能で保存すると画面に表示されているところだけしか保存できず、
ちょっと残念です。

縦長のページなんかだとスクロールで隠れているところを表示してはキャプチャを繰り返したりして、
はたまた、画像をくっつけたりしなければならず、とても面倒です。

そこで、ブラウザの便利なアドオンを使うと、ボタン一発でサイト全体をキャプチャできてとても便利です！

■ Firefox

• Pearl Crescent Page Saver screenshot tool
• FireShot

■ Chrome

• FireShot
• Awesome Screenshot

■ Safari

• Awesome Screenshot

■ IE

• SnapCrab for IE

_{※ Awesome Screenshot は最近試すとサイト全体のキャプチャが動作しないようです…。}

メールで文章だけや電話で言葉だけではなかなか説明しても伝わらないこともあると思います。
このサイトのここがおかしい、てときはブラウザでサイト全体をキャプチャして
画像加工ソフトなんかで丸つけて（又はプリントアウトして赤丸書いて）
ここがおかしいんだぞ～って送りつけると、
きっと私みたいなエンジニアな方がささっと解決してくれるとおもいます！

私は普段はMac,でFirefoxをつかっています。
Firefox で Pearl Crescent Page Saver screenshot tool を使うとボタン一発で
サイト全体のキャプチャがファイルへ保存出来ます。

その保存したファイルをMac標準のプレビューで表示、赤丸や文字を入れて
エビデンス作って、baserCMSのredmineチケットに添付したりしています。

参考： http://project.e-catchup.jp/issues/17892

MacのOS標準のプレビュー機能もちょっとした画像加工が簡単にできて便利です。

制作時のテスト結果のエビデンスを残す時にとても役立ちます。
是非是非参考にしてください。

キャッチアップ 公式webサイト
baserCMS 公式webサイト