みなさん、WEBページのキャプチャを取る時どうしてますか？
Alt+PrintScreenなどで画面単位でキャプチャしてもいいですが、縦に長いページだと何回も繰り返さなきゃいけなくて面倒。そこで便利なのがGoogle Chromeの「Google ドライブに保存」という拡張機能です。

用意するもの

ここで紹介する方法は、Google Chromeの拡張機能を使ってページのキャプチャをGoogleドライブに保存するものです。従って、必要なのは以下の二点です。

• Google Chrome
• Gmail (Google) アカウント

「Googleドライブに保存」のインストールと設定

Chromeで以下のページにアクセスします。

Google ドライブに保存 – Chrome ウェブストア

右上の「CHROMEに追加」ボタンをクリック。

「拡張機能を追加」をクリック。

ブラウザ右上に以下のように表示され、Googleドライブアイコンが表示されたら無事に拡張機能のインストールは成功です。

続けて設定に移ります。先ほど追加されたGoogleドライブアイコンを右クリックし、「オプション」をクリック。

Googleアカウントへの接続許可ダイアログが出るので「許可」をクリック。

この画面で、キャプチャした画像の保存先（※）や、キャプチャ実行時の処理内容を指定することができます。特にこだわりがなければこのままでOK。
※ここで指定する保存先はGoogleドライブ上のフォルダです。ローカルPCに直接画像を保存することはできないので注意しましょう。

これで設定完了です！

キャプチャの取得

では実際にキャプチャをとってみましょう。対象となるページを開いて、右上の「Googleドライブ拡張機能のボタン」をクリック。

これだけでページのキャプチャとアップロードが始まります。以下のようなダイアログが表示されたらキャプチャ完了。

ダイアログのファイル名部分のリンクをクリックすると・・・

取得したキャプチャのプレビューが表示されます。右上のダウンロードボタンをクリックすると、手元のPC上にキャプチャ画像を保存できます。

実際のキャプチャ画像はこちら。
※ファイルのサイズ（大きさ、というか高さ）が非常に大きいので、リンク先で確認ください。

取得したキャプチャ画像はGoogleドライブに保存されているので、あとからいつでも表示・ダウンロードできます。

スマホから見た状態のキャプチャもOK

同種のキャプチャツールは無数にあり、自分も実際にいくつか試してみた中でこのツールに落ち着いた最大の理由は「デバイスのシミュレート時のキャプチャも正確に取得できる」こと。例えば、開発者ツールでiPhone5からアクセスした状態にします。

この状態でキャプチャを実行した結果がこちら。
※ファイルのサイズ（大きさ、というか高さ）が非常に大きいので、リンク先で確認ください。

注意点

機能実行時に一瞬ブラウザ内でページがスクロールすることから、おそらく内部で瞬間的に実際に画面をスクロールして画像を取得しているものと思われます。なので、ページ内にスクロール追従型のUIがあったりパララックスを使ったページなどでは、キャプチャした画像が崩れる（追従型の要素がキャプチャ内に何度も表示される）ことになります。まあ、これは仕方ないですね…。

とは言え、ボタン一発でページ全体のキャプチャが取れるのは非常に便利。クライアントの皆様、画面の修正指示など出される際にもぜひともご活用ください（笑）。