Webページのスクリーンショットを撮るとき、表示中の画面だけでは足りない。でも、ページ全体を撮りたいわけでもない。そんな場面で使えるChrome拡張機能が欲しくて、「HodoSnap」を作りました。
HodoSnapでは、現在表示している画面を撮影する「Screen Shot」に加えて、自分で選んだ範囲を縦方向へ伸ばし、スクロールしながら最大20,000pxまで撮影できる「Select Shot」を使えます。
選択した範囲を、そのまま下まで撮影したかった
ChromeでWebページのスクリーンショットを撮影できる拡張機能は数多くあります。現在表示している画面を撮影するものや、Webページ全体を上から下まで1枚の画像として保存するものなど、すでに便利な機能拡張が公開されています。
ただ、私が欲しかったのはページ全体を撮影する機能ではありませんでした。記事の一部分や一覧の一部分など、自分で選んだ範囲だけを撮影し、その範囲が画面の外まで続いている場合はスクロールしながら1枚の画像として保存したかったのです。
そこで作ったのが、Chrome拡張機能の「HodoSnap」です。HodoSnapには現在表示している画面を撮影する「Screen Shot」と、自分で指定した範囲を撮影する「Select Shot」の2つの撮影方法があります。
HodoSnapの中心機能は「Select Shot」
HodoSnapを作った一番の理由は「Select Shot」です。マウスで撮影したい範囲を指定し、その範囲が現在表示している画面よりも縦に長い場合は、自動的にページをスクロールしながら撮影します。選択できる縦方向の長さは最大20,000pxです。
そのため、ページ全体を保存する必要がない場合でも、記事の途中から途中までを撮影したり、縦に続く一覧の必要な部分だけを残したりできます。一般的な画面内だけの範囲スクリーンショットと、ページ全体を撮影するフルページスクリーンショットの中間のような使い方を想定しています。
撮影する前に範囲を調整できる
Select Shotでは、マウスを離した瞬間に撮影が始まる仕組みにはしていません。最初に大まかな範囲を選択したあと、選択枠を移動したり、上下左右のハンドルを使って範囲を調整したりできます。
範囲スクリーンショットを使っていると、選択を終えたあとに「もう少し右まで入れたかった」「下を少し広げたかった」と感じることがあります。そこでHodoSnapでは、撮影前に選択範囲を確認してから「撮影」ボタンを押す方式にしました。
画面より長い範囲は自動スクロールで撮影
選択範囲が現在の表示領域を超えている場合、撮影を開始するとHodoSnapがページを自動的にスクロールします。複数回に分けて取得した画面をつなぎ、最終的に1枚のPNG画像としてプレビューします。
自動スクロール中は、HodoSnapがページを動かしていることが分かるように、画面右上へ「HodoSnap 撮影中…」と表示します。撮影中にユーザー側でスクロールすると位置がずれる可能性があるため、自動撮影が終わるまでは画面を動かさないようにしてください。
追従ヘッダーや固定表示にも対応
縦に長いスクリーンショットを撮影するときに問題になりやすいのが、スクロールについてくるヘッダーやサイドバーです。単純に画面を何枚も撮影してつなぐだけでは、同じヘッダーが何度も画像へ入り込んだり、本来選択していない固定UIまで撮影されたりすることがあります。
HodoSnapでは、Select Shotで最初から選択範囲に含めた追従ヘッダーは画像へ残し、範囲に含めていない追従ヘッダーが撮影中のスクロールによって後から現れた場合は、完成画像へ勝手に入り込まないようにしています。追従するサイドバーや「ページ上部へ戻る」ボタンなどについても、実際のWebページを使いながら調整してきました。
WebサイトによってHTMLやCSSの構造は異なるため、すべてのページでまったく同じ結果になるとは限りません。ただ、一般的な固定表示を含むページでもできるだけ自然なスクリーンショットになるようにしています。
撮影後はプレビューで確認してから保存
撮影が終わると、画像をすぐにダウンロードするのではなく、HodoSnapのプレビュー画面が開きます。撮影結果を確認してから保存できるため、意図した範囲になっているかを確認してからPNGファイルとしてダウンロードできます。
プレビューの表示倍率は100％、75％、50％、画面に合わせる、から選択できます。また、必要に応じて撮影元ページのURLや撮影日を保存画像の下部へ追加できます。URLと撮影日は初期状態ではOFFにしているため、通常は撮影した画像だけをそのまま保存できます。
Screen Shotでは現在表示している画面を撮影
Select Shotとは別に、現在ブラウザへ表示している範囲だけを撮影する「Screen Shot」も用意しています。こちらはスクロールや範囲指定を行わず、現在の表示内容をそのまま撮影したいときに使います。
保存までの流れはSelect Shotと同じで、撮影後にプレビュー画面を開いてからPNGとして保存します。単純な画面キャプチャと縦長の範囲撮影を、同じ拡張機能から使い分けられるようにしました。
フルページ撮影を入れなかった理由
開発途中では、Webページ全体を上から下まで撮影する機能も試していました。しかし、Chrome Web Storeにはすでにフルページスクリーンショットを得意とする拡張機能が多数あります。
HodoSnapまで同じ方向へ広げるより、自分自身が最初に欲しかった「必要な部分だけを選択し、その範囲をスクロールしながら撮影する」という機能を中心にした方が、HodoSnapを作る意味があると考えました。そのため現在はScreen ShotとSelect Shotの2つに機能を絞っています。
HodoSnapの一番の特徴は、ページ全体ではなく、自分で決めた選択範囲を画面の外まで伸ばして撮影できることです。
HodoSnapはChrome Web Storeで無料公開しています
HodoSnapはChrome Web Storeで無料公開しています。拡張機能内に広告やアフィリエイト機能はなく、撮影画像や撮影元URLを外部サーバーへ送信する機能もありません。
Chromeの仕様上、chrome://から始まるページなど、一部のページでは撮影できません。また、Webサイト側の構造や動的に表示される要素によって、撮影結果が異なる場合があります。
↓↓Chrome Web Storeで無料公開中↓↓
HodoSnapをChrome Web Storeで見る
https://chromewebstore.google.com/detail/hodosnap/glpebnappaeojbcnmdhhlbagpekjgnid
今後も実際に使う中で不具合や改善できる部分が見つかった場合は、必要に応じて修正していく予定です。
コメント