Webサイト丸ごと1ページのスクリーンショットが必要になる機会、
意外と多くあったりするのではないでしょうか。

通常のWebサイトであれば、Chrome拡張「Awesome Screenshot」などで対応できます。
しかし、ヘッダーがposition:fixed;で固定されていたりすると
幾つもヘッダーが表示されてしまい、上手く作成してくれません。

今回はそんな場合の、一番精度の高いツール（現状）をご紹介。

ヘッダー固定されたサイトも綺麗にスクリーンショット！

例えば、弊社のプロジェクションマッピングのサイトは、
ヘッダーが固定されていて、スクロールに追従してくるようになっています。

このサイトのスクリーンショットを「Awesome Screenshot」で作成すると
ヘッダーが幾つも表示されてしまいます。

ピンクの線で囲った部分が全てヘッダーですが、一定間隔で表示されているようです。
スクリーンショットを繋ぎあわせて生成している為でしょうか。

そこで、今回使用するのが、Firefoxのアドオン
「Pearl Crescent Page Saver」です。
Firefoxから上記のサイトへアクセス、ダウンロードしてアドオンを有効化します。
あとは追加されたカメラのアイコンをクリックすれば生成完了です！

Pearl Crescent Page Saverで生成したものがこちらです。

ヘッダーの重複がないものが生成できました！
本当は普段使いのChrome内で完結したいところなのですが、
現状、精度の高いものが見つかっておりません…

Pearl Crescent Page SaverでもJavascriptガリガリ書かれたサイトの場合だと
上手く生成できないものもあるかもしれませんが、今のところ不便はありません。

そう、Firefox開くのが少し不便なのですが…
もし良いツールが見つかったら、また報告します！