MENU

キャッチアップ

技術ネタブログ

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

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

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

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

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

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

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


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

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

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

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

■ Firefox

■ Chrome

■ Safari

■ IE

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


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

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

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

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

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

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


キャッチアップはオープンソースソフトウェアを有効活用した提案を行い、「お客様のコスト削減」や「運営しやすい仕組みづくり」のお手伝いをしております。

キャッチアップへのご質問、お仕事のご相談、お見積のご依頼など
お気軽にお問い合わせください!

contactlink2.gif

2017/08/14

坂口 昌己

CTO補佐

坂口 昌己

PHPとかCakePHPとかで色々作ってます。
今はbaserCMSとかEC-CUBEとかやってます!

書いた記事一覧

新着情報一覧

ページの先頭へ