プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

ヘッダー固定したWebページ全体のスクリーンショットが撮れるツール!

2014.09.29 月曜日 05:04:44

iSGu85T8TXS9zXJ20iBU__MG_9585_02

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

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

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

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

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

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

pm_site-1

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

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

スクリーンショット 2014-09-29 4.55.00

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

pm_site_2

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

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

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

Category:Chrome拡張 , Tools , その他ツール     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project