Chromeを使ってWebページを1ページに収めて画面キャプチャーを撮る方法

こんにちは~。「デザインもできるシステムエンジニア」のあつもり(@atumori17)です。

今回はChromeを使ってWebページを1ページに納めて画面キャプチャーを撮る方法を紹介します。

WEBページからスマホの利用明細書をキャプチャーしようとしたのですが、合計金額と明細が1画面でおさまらずに何かいい方法は探していたところ、Google Chromeのデベロッパーツールでできることを知ったんです。

アプリを新たにインストールする必要もないし、Google Chromeさえあればできるとっても便利な機能なので今回はその使い方を説明していきたいと思います。

レクタングル大336×280

Chromeのデベロッパーツールを使う

インターネットブラウザがGoogle Chromeでなければできないので、インストールしていない人はまずインストールしましょう。

ちなみに今回の方法はChromeの拡張機能は使わないでデベロッパーツールだけでお手軽にできちゃいます。それではさっそく手順を説明していきます。

Chromeを起動し1ページに収めたい画面を表示させます。画面上で右クリックをし「検証」をクリックします。

すると画面右にデベロッパーツールが表示されます。右上にあるスマホのようなアイコンをクリックしデバイスツールバーを表示させます。

画面左上にデバイスツールバー、画面中央に画面サイズを調整するつまみのようなものが表示されます。つまみをドラッグして画面サイズを調整しましょう。デバイスツールバーでデバイスを変更することでも画面サイズを変更できます。

ここで表示されている部分が画像としてキャプチャーされます。大きすぎると画面が切れてしまうので注意してください。逆に小さすぎると文字が小さすぎて読めなくなってしまいます。

デベロッパーツールのツールボックスからメニューのアイコンをクリックし「Capture screenshot」をクリックします。

キャプチャーされた画像がダウンロードされ、画面左下にファイル名が表示されます。ファイル名の右にある矢印をクリックし「フォルダを開く」をクリックします。

ダウンロードフォルダが開き、キャプチャーした画像ファイルがあるのがわかります。

開いてみると1ページに収まっている画像が表示されました。

あまりページ数が多いと文字が小さくなってしまいます。目安として2~3ページくらいが限界だと思います。

まとめ

いかがでしたか?今回はChromeを使ってWebページを1ページにおさめて画面キャプチャーを撮る方法でした。利用明細書や会員登録情報を撮っておきたいときなど、とっても便利な機能なのでぜひ試してみてください。

エクセル業務自動化の開発承ります。

データ修正作業、集計作業などに何時間もかけている方。自動化してボタン一発で業務時間を短縮しませんか?

システム会社に依頼すると最低数十万かかります。通常、システムを構築するとき、上流工程と下流工程に分けられ、その工程ごとに人員が必要になるからです。

弊社ではこれらを一人で行います。仕様書などの資料に時間をかけず、プログラムが正常に動くということに重きを置いています。細かい作り込みをやり過ぎないため、費用を安く押さえられます。

うんざりするルーチンワークはもうやめにしませんか?

詳しいお問い合わせは
こちら
からお願いします。

レクタングル大336×280
レクタングル大336×280

シェアする

  • このエントリーをはてなブックマークに追加

フォローする