どーも！
たかぽんです！
たまに今見ているページの上から下まで、全て含んだ画像を共有したい時ってありませんか・・・？
僕の場合はWebページを開発していて、そのデザイン感を伝えるためだったんですが...
そんなページ全てを含めた縦長いスクリーンショット を取る方法を解説します！
chromeの拡張機能を使うので、ブラウザはchrome限定になってしまいますが、是非参考にしてみてください！
どうやって撮るの？
では早速撮り方についてですが、二種類あります！
- FireShot
- Chromeの開発者ツール
こういったツールを使ってやって行きます！
ご自身のやりやすい方法でやってみてください！
FireShot
上記の"Chromeに追加"ボタンを押すと...
こういうことされるけどいい？って言うのが出てくるので、"AddExtension"を押します。
すると...
このような新しいページが表示されますが、簡単な説明になっています。
このページは使わないので、閉じてもらって大丈夫です！
では、早速とってみます！
拡張機能が追加されていれば以下の様なアイコンがブラウザの右上辺りにアイコンが出てきます。
この"Capture entire page"をクリックすると...
新しくタブが開き、以下の様な画面が出てきます。
これの画面からダウンロード等ができます。
Save as Imageだとpng形式のデータとして、Save to PDFだと、pdf形式で保存することができるので、それぞれ共有しやすい形で保存しましょう！
例えばsave as imageをすると、上記の様な画面が出てくるので、好きな名前、フォルダに保存しましょう。
すると、こんな形でスクショが撮影できます！
ちなみに、他にもあった
- capture visible part
- capture selection
はそれぞれ今見えている部分、自分で選択した部分を撮影することができます。
selectionの方はクリックした後、自分の好きな範囲を指定すると先ほどの保存できる画面が表示されます。
比較的楽にPDF、PNGで保存ができるのでオススメです！
開発者ツールで撮影
次は開発者ツールから撮影してみます。
Chromeでは開発者向けのツールがあるのですが、そのツールで全体のスクリーンショット を撮影することができます。
[Windows] Ctrl+Shift+I [Mac] Command+Option+Iで開発者ツールと言うものが右画面に出てきます。
次に、引き続き以下のショートカットを入力します。
[Windows] Ctrl+Shift+P [Mac] Command+shift+Pこれを入力すると、以下の様な入力フォームが出てきます。
この入力欄に"full"と入力します。
すると、上記の様になるので、そのままEnterを押すと...
左下にpng形式のスクリーショットが保存された旨の通知がくると思います。
これで完了です！
拡張機能が不要で、右上のアイコンが不必要、比較的方法としては楽といったメリットはありますが、PDFでは撮影できないので注意です！
まとめ
今回は二つの手法でページ全ての要素が入ったWebページのスクリーンショット撮影を行いました！
拡張機能は入れておくといつでもさくっとできますが、普段からたくさんの拡張機能を入れている人は煩雑になってしまいます...
しかしながら、機能性が高いので、pngだけでなく、pdfにできたり、部分的なスクショが撮れたりもします。
逆に開発者ツールを使う場合は開発者向けの簡単な確認ようなので、自由度は高くないですが、拡張機能入れたくない！といったひとがいればこちらで十分でしょう！
是非困ったら使ってみてくださいね！
それでわ！