« Web標準の日々 | トップページ | Data Mining Day »

ブラウザの画面をキャプチャしたい!
FireFox拡張機能 Screen grab!

こんばんは。坂井です。
今日はFirefoxの拡張機能(アドオンといいます)「Screen grab!」をご紹介します。
ブラウザで見たサイトをそのまま画像として保存したいなあって思うことありませんか?
キーボードの「Alt」+「PrintScreen」でもキャプチャできますが、実際にディスプレイ上に表示されている部分しかキャプチャできませんよね。長いページの場合、何回もキャプチャして、切り貼りしなければなりません。
でも、「Screen grab!」を使えば、Firefoxで表示しているサイトのキャプチャ(スクリーンショット)を簡単に撮れます。Screen grab!の優れている点はブラウザの画面に表示しきれていない部分もすべてキャプチャしてくれるところ。また、選択した部分だけキャプチャすることもできますよ。パワーポイントやワードにキャプチャした画像を読み込んで、プリントしたり、御社のサイトの更新・修正の指示出しにもご利用いただけます。

  1. インストール方法
  2. 設定できることと設定方法
  3. キャプチャしてみよう!

1.インストール方法
-1.FireFoxで「Screen grab!」のサイトを開きます。
 https://addons.mozilla.org/en-US/firefox/addon/1146
 英語にひるまず、「インストール」をクリック!

01screengrab_install01_1  
-2.インストールしていい?って聞いてくるので、
02screengrab_install02_3
いいよ!ってことで、「インストール」をクリック!
03screengrab_install03_1
-3.FireFoxを一度閉じてもう一度開く(再起動する)と、あら!「Screen grab!」のアイコンが下のバーに現れました。
04screengrab_install04_2
これでインストール完了!

2.設定できること+設定方法

  • キャプチャする画像の形式をPNGかJPGか選べます。
  • ファイル名にタイムスタンプをつけるかどうか選べます。

-1.FireFoxのメニューの「ツール」から「アドオン」を選択してクリックします。
05screengrab_addon_1
-2.「Screen grab!」を選択して、クリック!
06screengrab_addon02_1
-3.「設定」をクリックすると
07screengrab_addon03_1

-4.設定画面が開きます。
08screengrab_addon04_1
一番上のPreferred page capture methodは「Gecko Canvas」で。
2番目のInclude time stamp in filenameはファイル名に時間もつけるか選べます。
チェックがついたままの場合ファイル名は「サイトタイトル_時間.jpgまたはpng」となります。
私はサイトタイトルだけで十分、というか、サイトタイトルの後に何桁もの数字が並んで、結局時間がよく分からないので、このチェックははずしてます。
3番目のImage formatは画像をPNGかJPEGかどちらで保存するのか選ぶことができます。私はJPEGにしてますが、画像を加工するソフトなどによってお好きなほうを。
最後に「OK」をクリックしたら、設定完了です。

3.キャプチャしてみよう! 

11screengrab_ff
mbs staff note(あら、デザインを変えたんでした。これは旧デザインですな)をFireFoxで開いたところ。ページの一部分だけ表示されています。
-1.下のバーの「Screen grab!」のアイコンをクリックします。
09screengrab_btn_1
-2.「Save...(保存する)」を選択すると、3つの選択肢が表示されます。
「Complete Page...」を選んで、クリック!
10screengrab_btn02_2
-4.保存場所のフォルダを選択して、ファイル名を変更したい場合はお好きなファイル名をつけて、「保存」をクリック!
12screengrab_hozon_1
-5.これで、選択したフォルダの中にPNGまたはJPEG画像が保存されます。
お好きな画像エディタで開いたり、ワードに読み込んでみると、ブラウザに標示しきれなかった下のほうまで、すべてが1枚の画像としてキャプチャされています。
ただし、Flashだけはキャプチャされません。フルFlashだったらあきらめて、「Alt」+「PrintScreen」です。
どなたか、Flashもキャプチャできる方法をご存知の方がいたら、教えてほしいな。
どっかのサービスで、URLを送ると様々なブラウザで見た場合のキャプチャをとってくれるサービスがあったけれど、お高くって・・・。ちょっと確認って感じで気軽には使えませんでした。
13mbs_staff_note_all_1
ちなみに、サイトの一部分だけを選択しておいて、「Save」から「Select...」を選んで保存すると、選択した部分だけがキャプチャされます。
14mbs_staff_noteselect_1
「Save」から「Visible potion...」を選択すると、ブラウザウィンドウに表示されている部分のみ保存されます。
15mbs_staff_notevisible_1

« Web標準の日々 | トップページ | Data Mining Day »

Web事業部のつぶやき」カテゴリの記事

パソコン・インターネット」カテゴリの記事

コメント

これはいいですね。
PCのキャプチャーってたまに
きかなくなることあるし。。。
余分なとこもついてこなくていいね。

私のCSSViewerは今だ英語で出てきて困ります。

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/109644/7189067

この記事へのトラックバック一覧です: ブラウザの画面をキャプチャしたい!
FireFox拡張機能 Screen grab!
:

« Web標準の日々 | トップページ | Data Mining Day »

最近のトラックバック

2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
無料ブログはココログ