こんにちは、みなさんは今閲覧しているページ全体のキャプチャ画像を取得したい場合は、どのような方法で取得されていますでしょうか？
Chromeの拡張機能を利用したり、何か別のソフトをインストールして取得されている方がほとんどだと思います。
しかし、『ページ全体のキャプチャ画像を取得するなら』ということを前提にすると拡張機能やソフトを利用せず、Chromeのデベロッパーツールを使用するだけで充分です！
今回はその方法をご紹介してみたいと思いますので、ご参考ください。
ページ全体のキャプチャ画像の取得方法は？
閲覧しているページ全体のキャプチャ画像を取得する方法として、上記でも記載したとおり、拡張機能やソフトを利用している方が多いと思います。
実際に僕も、以前ご紹介したChrome拡張機能の「Awesome Screenshot」を利用していました。
以前ご紹介した「Awesome Screenshot」の記事はこちら
しかし、「Awesome Screenshot」を利用した場合、長いページだったりレスポンシブサイトの場合、拡張機能のバグなのかどうかは不明ですが、取得したキャプチャ画像に余計な横のスクロールバーが表示されてしまう場合があります。
これって結構不便というかイライラさせる要因だったのですが、『ページ全体のキャプチャ画像を取得』という名目に限って言えば、もう「Awesome Screenshot」は不要です！
というのも、Chromeのデベロッパーツールで、綺麗にページ全体のキャプチャ画像を取得できるからです。
Chromeでページ全体のキャプチャを取得する方法
それでは早速、Chromeのデベロッパーツールを利用して、ページ全体のキャプチャ画像を取得する操作手順をご紹介します。
大きく分けて２つショートカットと１つの操作で簡単に取得することが可能です。
Chromeで取得したいページを開く
まずは、Chromeブラウザからキャプチャ画像を取得したいページを開きます。
続いて、Windowsであれば『Ctrl+Shift+I』」Macであれば『command+option+I』のショートカットキーを入力し、デベロッパーツールを開きます。
詳細機能を呼び出し「full」と入力
次に、Windowsの場合は『Ctrl+Shift+P』、Macなら『command+shift+P』のショートカットキーを入力し、デベロッパーツールの詳細機能を呼び出します。
続いて表示される入力項目に、「full」と入力するとフルスクリーンの機能が表示されるのでそのまま「Enter」ボタンを押します。
すると、数秒間でページ全体の画像を保存することができます。
スマホ版の全体キャプチャ画像を取得したい場合
今回ご紹介している方法では、スマホ版のページ全体のキャプチャ画像は、以下の手順と操作で取得することができます。
Windowsの場合
- 『Ctrl+Shift+I』
- 『Ctrl+Shift+M』
- 任意のデバイスを選択→ページを更新
- 『Ctrl+Shift+P』
- 『fullと入力しEnter』
Macの場合
- 『command+option+I』
- 『command+shift+M』
- 任意のデバイスを選択→ページを更新
- 『command+shift+P』
- 『fullと入力しreturn』
3の任意のデバイスを選択してから更新という作業では、デベロッパーツールを開いた状態から、モバイルマークをクリックし、任意のデバイスを選択した状態でページ更新をします。
その後の操作は、パソコン版の手順と同じように、「full」と入力し、Enterボタンをクリックすると、指定のデバイスの状態のキャプチャ画像として保存することができます。
画像遅延を実装しているページはご注意
今回ご紹介している、Chromeのデベロッパーツールを使用してページ全体のキャプチャ画像を取得する方法の場合、１つだけ注意点があります。
それは、取得する対象ページがスクロールされるたびに画像や写真が表示されるといった、スクロールエフェクトがかけられてるページの場合です。
スクロールエフェクトがかけれているページの場合、スクロールするたびに写真や画像を読み込んでいくため、ページを単に開いた状態から取得しても、途中で写真が読み込み中の表示となってしまう場合があります。
今回ご紹介したデベロッパーツールを利用する場合、一旦ページ全体の表示がされるように、ページ最後までスクロールしてから操作を実行するようにしましょう。
まとめ
いかがでしたでしょうか？
今回は、特別な拡張機能やソフトを必要とせず、ページ全体のキャプチャ画像を取得する方法をご紹介しました。
Chromeのデベロッパーツールを利用することになるため、Chromeブラウザを利用している場合にはもれなく利用することができます。
ショートカットキーの操作さえ慣れてしまえば、拡張機能を利用するよりも早くスムーズにページキャプチャ画像を取得することができると思いますので、ぜひ一度お試しください！
最後までお読みいただき、ありがとうございました。