chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

2018-08-05 最終更新日:2018-08-05

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。

割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるという点では簡単に使えて違う環境の方にも勧めやすいです。デベロッパーツールを立ち上げることから始まります。

ブラウザの縦3つの点アイコン（設定）からその他ツール-デベロッパーツールを開きます。（Option + Command + I [Ctrl + Shift + I ]）

キャプチャ方法

chrome

デベロッパーツールが立ち上がったらCommand + Shift + P（Ctrl + Shift + P）を押すと詳細設定が出てくるのでfullと入力すると Capture full size screenshotというのがが出てくるのでそれを押すとページ全体がキャプチャされます。

javascriptなどで遅延ページロードなどしている場合は全部を読み込ませてからキャプチャするとうまくいきますがスライドショーなどではうまくいかない場合もあります。

画面全体の場合は詳細設定でscと入力すればCapture screenshotとでてくるので選択してやるとダウンロードが始まります。

モバイルキャプチャ方法

chrome

こちらもデベロッパーツールでモバイル設定した状態で右上の設定画面からCapture full size screenshotを選択するとダウンロードが始まります。

部分選択

chrome

特定の場所だけ選択してキャプチャしたい場合もあるかと思います。上記同様にデペロッパーツールからCommand + Shift + C（Ctrl + Shift + C ）で要素検証モード（Select an element in the page to inspect it）の状態にしてからCommand（Ctrl）を押しながらキャプチャしたい範囲をマウスでドラッグして選択します。その範囲がキャプチャされてダウンロードされます。

簡単ですね。不要なエクステンションは減らした方がクロームには良いかもしれません。

参考になれば幸いです。