Firefox拡張：Screengrab!でWebページをキャプチャする
Screengrab!をインストールするには、こちらのFirefox Add-onsのページで「インストール」をクリックすればよい。ちなみに日本語化されたバージョンも入手可能だが、英語表示のオリジナル版でも操作方法がシンプルなので不都合はないだろう。なお、旧バージョンはJavaが必須だったが、現在のScreengrab!はJavaがインストールされていなくても利用することができる。
Screengrab!をインストールしてFirefoxを再起動すると、ページのコンテクスト・メニューに「ScreenGrab!」というサブメニューが表示されるようになる。また、ステータスバーに追加されるScreengrab!アイコンのクリックでも、同じメニューが表示される。このサブメニュー内の構成は以下のようになっている。
-
Save…
- Complete Page/Frame…
- Visible portion…
- Selection…
-
Copy…
- Complete Page/Frame…
- Visible portion…
- Selection…
ご覧のように、「Save…」と「Copy…」の中にはまったく同じ項目が配置されており、「Save…」の項目を選んだ場合はキャプチャした画像がファイルに保存され、「Copy…」の場合は画像がクリップボードにコピーされる。ただし、Windows XPでは問題なかったものの、Linux（Ubuntu 7.10）では「Copy…」がうまく機能しなかった（コピーした画像がGIMPやGNU Paintなどにペーストできない）。
ファイルに保存する場合はPNG形式が使われるが、JPEG形式にすることもできる。それには、アドオン・マネージャからScreengrab!の設定画面を開き、「Image Format」で「JPEG」をチェックする。もっとも、設定画面には画質の調整パラメータなどは用意されておらず、またScreengrab!は圧縮率を優先させているようなので、画質劣化が気になる方はPNG形式で保存してから好みの画像エディタでフォーマットを変換したほうがいいかもしれない。
メニュー最下層の3つの項目は、それぞれ次のように機能する。
- Complete Page/Frame…：ページ全体もしくはフォーカスされているフレーム全体をキャプチャする
- Visible portion…：ブラウザのウィンドウに表示されている部分をキャプチャする
- Selection…：このコマンドの実行後、マウスドラッグで指定した部分のみをキャプチャする
ちなみに、「Selection…」コマンドを利用する際は、JavaScriptが有効になっている必要がある。また、「Selection…」コマンドで選択できるのはブラウザウィンドウに表示されている範囲だけだ。公式サイトのFAQのページには、今後のバージョンで範囲指定の際にページをスクロールできるようにしたいという記述があるものの、現状ではページ全体をキャプチャしたあとで必要な部分をクリッピングするという方法で対処するしかない。
指定ウィンドウ幅でのキャプチャ
Web開発では、ブラウザのウィンドウ幅を変更しても意図したとおりにページが表示されるかどうかというテストが行われる。Screengrab!に指定幅でページをキャプチャする機能はないが、Web Developer拡張と組み合わせれば、そうした作業が楽に行えるようになる。
Web Developerは非常に多機能な拡張だが、ウィンドウサイズを変更するには、この拡張のインストールで追加されたツールバーから「Resize」→「Resize Window…」を選択し、表示されたダイアログで希望のウィンドウサイズを入力する。このとき「Resize the viewport」をチェックしておくと、ページの表示領域が指定した大きさになるようにウィンドウがリサイズされる。いちいち数値を入力するのが面倒なら、「Resize」→「Edit Resize Dimensions…」で、よく使うウィンドウサイズをプリセットしておくこともできる。Web Developerでウィンドウをリサイズしたら、Screengrab!でページをキャプチャすればよい。
まとめ
Webページをキャプチャするときは、ブラウザのウィンドウ枠を含めたいこともあるし、表示テストのためにさまざまなブラウザでキャプチャを行いたいこともある。Screengrab!はこれらの要求に応えられるわけではないので、他のツールと併用することになるだろう。しかし、ページ全体を簡単にキャプチャできるという一点だけでも、Screengrab!を利用する価値は十分にある。
