Chromeで縦長ページのスクリーンショットを撮る方法(拡張機能不要)
画面内に見えている範囲のスクリーンショットを撮る方法は過去記事で紹介※してきましたが、ブラウザで表示しきれない範囲も含めてスクリーンショットを撮りたいときってありませんか?
今回はChromeに拡張機能を入れなくても縦長ページのスクリーンショットは撮れるよー、というお話。
Web上の請求書が縦長過ぎる
ペーパーレス化が叫ばれて久しい昨今、Web上で各種サービスの利用明細を確認できるのが当たり前になりました。
ネット通販での注文履歴はもちろんのこと、インターネット回線の利用明細などもWeb上で確認でき、仕事で使っている場合はこれらを印刷して税務署へ提出するケースも多いかと思います。
しかし、紙の利用明細とは異なり、印刷することなんてカケラも考慮していないページもよく見かけます。
例えばこんなのとか…。
なんの嫌がらせだよ…。せっかくペーパーレス化で請求ハガキが来なくなったのにWeb明細を印刷するって本末転倒でしょ、と言われればそのとおり。
でも、意外と税理士さんのIT化が進んでおらず、デジタル書類があるのに印刷して書類一式を渡す、というケースもよく聞きます。うちも以前はそうでしたし、税理士さんが扱うデータはデリケートなので、セキュリティ上の理由でメール送信を嫌がるケースもまたあります。
それに、なにも悪いことしてなくても税務調査って一定期間ごとにやってくるし、そのときに「この経費の明細はどこですか? 印刷してください」みたいに頼まれるわけですよ。
ペーパーレス化とはいったいなんだったのか。
まぁともかくですね。画面内に収まりきらない明細ページのスクリーンショットをどうにか撮らないといけません。以前は画面に収まる部分だけ切り取って保存したりしていたのですが、そういう加工があると、何か隠したい理由があって加工しているのかと勘ぐられる場合もあるんですね。いやいや、単に紙を無駄にしたくないだけなんだけど………まったく面倒くさいったらないです。
Chromeの標準機能にページ全体のスクリーンショットを撮る機能があった
標準機能といってもデベロッパーツールという機能ではあるのですが、わざわざ拡張機能をインストールしなくてもページ全体をキャプチャする方法がありました。
手順
- デベロッパーツールを起動
Ctrl+Shift+Iでも良いし、メニューからでもOKです。
- 画面が二分割(左にWebページ、右にデベロッパーツール)されるため、左のメニューから[Capture full size screenshot]をクリック
手順、だなんて大げさに書くと面倒くさそうですが、実際はCtrl+Shift+Iを押してメニューから[Capture full size screenshot]を選ぶだけなので、使っていれば自然と覚えてしまうと思います。
スマホページが表示されてしまう場合
Chromeのデベロッパーツールはデフォルトだと(たぶん)左右に画面が分割されるため、左側のWebページがスマホやタブレット用に切り替わる場合があると思います。
これはいわゆるレスポンシブデザインのページというヤツで、うちのブログもそうなのですが、ブラウザの横幅によってPC用の表示、タブレット用の表示、スマホ用の表示、と切り替わるように作られています。
なので、左右分割で画面を小さくされてしまうとPC用とは違った表示になってしまうわけです。
これを解決するのは実に簡単で、
右のデベロッパーツールのメニューから[Dock side]を選んで、別ウィンドウや、画面下部にデベロッパーツール自体を移動するだけ。
すると、このようにWebページの表示幅が広がるため、あらためて[Capture full size screenshot]を選べば下のようにPC表示でページ全体のスクリーンショットが撮れます。
簡単ですね。
逆にあえてスマホ用のページを確認したい場合などはWebページの上にある[Responsive]プルダウンを[iPhone]に変更したり、[Desktop]プルダウンを[Mobile]に変更すると表示が変わります。
ぼくのようなWeb系のプログラマーはこのデベロッパーツールを使ってデザインの確認をしたりするわけです。
大昔はドコモから提供されているiモードHTMLシミュレータなどを使ってデザインや動作確認をしたものですが、昨今はほとんどChromeブラウザだけで確認が済んでしまうので楽になったものです。
デベロッパーツールとか怖くて起動したくない場合
別にデベロッパーツールを起動したからといって何も怖いことなどないのですが、表示される情報が増えすぎて面倒だと感じることはあるかも知れません。そういった場合はおとなしく、ページ全体のスクリーンショットを撮る拡張機能を追加するのが良いでしょう。
例えばFireShotとか。これはぼくもけっこう長いこと使っていた拡張機能で、PDFに出来るところがお気に入りです。
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfcegまとめ
- ブラウザで縦長ページのスクリーンショットを撮りたいケースがけっこうある
- Chromeの場合はデベロッパーツールから[Capture full size screenshot]でページ全体のスクリーンショットが撮れる
- それが面倒な場合は拡張機能のFireShotあたりがおすすめ
といったところでしょうか。
スクリーンショットとは直接関係ないのだけれど、もうマイナンバーが運用開始されたし、法人番号とかもあるわけだから、請求書も領収書も全部デジタル化して、勝手に税務署がデータ吸い上げてくれないかなぁ…不正とかする気ないからさぁ…って、決算が近づくたびに思います。
法人の決算も確定申告も書類…書類…印刷…印刷…めんどうくさいんじゃあ!ヽ(`Д´)ノ