00:01
オーディオブックJP聞き放題プランのキャンペーン実施中!
アシカガキャスト!
ちょっと前に、Macでスクリーンショットを撮る
Snappyというツールを紹介しましたが、
このSnappyでWebページのスクリーンショットを撮ることもできます。
URLを指定すると自動で撮ってくれるので便利なんですが、
決まったサイズでしか撮れません。
いい感じのサイズで撮ってくれるんですが、
自分で決めたサイズで撮りたいとか、
スクロールした先も含めた画面全体を撮りたいという用途には
このSnappyは使えません。
そこで私がWebページのスクリーンショットを撮るのに
おすすめなのはブラウザのデベロッパーツールというのを使って撮る方法です。
ChromeとかSafariとかWebブラウザには
開発者向けのデベロッパーツールという機能があって
WebサイトとかWebアプリケーションの開発中に
確認したり検証したりするのに役立つようなツールがあるんですね。
そのデベロッパーツールに画面のスクリーンショットを撮る機能もあって
私はいつもChromeのデベロッパーツールでスクリーンショットを撮っています。
音声だけの説明だとわかりにくいので
このネタはポッドキャスト向きじゃないなと思ってずっと温めていたんですが
やり方をざっくり説明すると
画面のスクリーンショットを撮りたいWebページを開いて
デベロッパーツールを立ち上げます。
そしてコマンド入力の画面を出して
キャプチャーとアルファベットで入力します。
そうすると何種類かコマンドの候補が出るので
キャプチャーフルサイズスクリーンショットを選ぶと
そのWebページ丸ごと画面に表示されてない部分も全部スクロールした状態で
スクリーンショットを撮ることができます。
またキャプチャースクリーンショットを選べば
今見えているところだけのスクリーンショットが撮れます。
キャプチャースクリーンショットだと
まさに今開いているウィンドウそのままですね
横幅も高さもでスクリーンショットが撮れて
フルスクリーンで撮った場合も
横幅は今自分が開いているウィンドウの横幅になります。
Chromeにはデバイスのシミュレーションをする機能があって
iPhoneだったりiPadだったり
03:02
いろんな画面サイズがあらかじめ用意されていて
それを選ぶだけでそのサイズで表示ができる機能があるんですね
その機能とスクリーンショットを撮る機能を一緒に使うことによって
このサイズでWebページのスクリーンショットが撮りたいということが
簡単にできるんですね。
パソコンのChrome上でiPhoneでの見え方はこんな感じです
iPadの見え方はこんな感じですと
スクリーンショットが撮れるので便利という面もありますし
必ず決まったサイズのスクリーンショットが撮れるという便利さもあります
私は技術評論者の技表JPというサイトで
週刊Webテク通信というのを連載してるんですけども
その記事の中でウェブサイトを紹介してスクリーンショットを載せてるんですが
毎回決まったサイズでスクリーンショットが撮れるように
自分で縦横のピクセル数を設定してこの連載用のサイズですと保存しておいて
毎回そのサイズでスクリーンショットを撮るようにしています
この方法が便利なのは実際の画面サイズ以上のピクセル数でスクリーンショットが撮れるので
私が持ち運んでいるMacBookだと縦のピクセル数が結構狭いんですが
それよりも大きい縦のピクセル数の連載記事用のスクリーンショットも撮れるんですね
なおデベロッパーツールを立ち上げるには
表示メニューの開発管理メニューのデベロッパーツールを選びます
あるいはMacの場合コマンドオプションi
Windowsならコントロールシフトiでも立ち上がります
私はいつも右クリックして検証というのを選んで立ち上げています
その後デベロッパーツールのウィンドウの右上の点々のメニューから
ランコマンドというのを選んで
その後CAPTUREと入力すると候補が出てくるんで
そこから選んでスクリーンショットを撮ります
ということでChromeのデベロッパーツールで
ウェブページのスクリーンショットを撮る方法の紹介でした
