mottox2 blog

Google Chromeスクショ術

tipschrome

技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。
同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。

Commandからスクリーンショットを撮る

Chrome DevToolsに慣れている方はご存知かもしれませんが、ChromeにはCommandという概念があります。

Cmd + Option + iでDevToolsを開きCmd + Shift + Pを押してください。
すると次のような入力フォームと項目が出現します。

スクリーンショット 2019-07-21 22.19.33.png (169.0 kB)

フォームに文字を入力すると、Commandを絞りこむことができEnterで指定したアクションを実行することが出来ます。

スクリーンショット 2019-07-21 22.20.28.png (243.4 kB)

ここにある、「Capture area screenshot」、「Capture full size screenshot」、「Capture node screenshot」、「Capture screenshot」を利用してスクリーンショットを撮ることが可能です。

それぞれの挙動は次の通りです。

  • Capture area screenshot - ウェブページをドラッグしてスクリーンショットの範囲を指定し取得します。
  • Capture full size screenshot - ウェブページ全体のスクリーンショットを取得します
  • Capture node screenshot - DevToolsのElementパネルで選択しているNodeのみのスクリーンショットを取得します。
  • Capture screenshot - ウェブページの現在見えている範囲のスクリーンショットを取得します。

スクリーンショットのサイズを固定する

スクリーンショットを取っていると、同じような画面でも少しずつずれてしまうのが気になります。
そういった場合には同じようなサイズでスクリーンショットを撮る工夫をしましょう。

ウィンドウのサイズを固定する

DevToolsのCommandから「Toggle Device toolbar」を選択すると、スマホで見たような表示になります。
ツールバーの左はしにあるデバイス名をクリックすると、デバイスのメニューが出てくるので「Responsive」をクリックしましょう。
「Responsive」では画像のように画面のサイズを入力できるので、固定したいサイズを入力しましょう。
その状態で「Capture screenshot」を選択すると常に同じサイズのスクリーンショットを撮ることができます。

スクリーンショット 2019-07-21 22.28.18.png (1.3 MB)

ノードのサイズを固定する

DevToolsではスタイルを変更することができるので、widthheightといったプロパティを変更するとサイズが変更されます。
変更した状態で「Capture node screenshot」を選択すると、好みの大きさのスクリーンショットが取得できます。

image.png (1.1 MB)

ブラウザのサイズを固定する(macOS)

AppleScriptを利用してウィンドウサイズを変更することが出来ます。
osascriptを使えばシェルから直接実行することが可能なので、次のコマンドを使ってブラウザ自体のサイズを固定しています。

bash
osascript  -e 'tell application "Google Chrome"' -e 'set bounds of front window to {300, 300, 1440, 960}' -e 'end tell'

余計な要素を隠す

「ノードのサイズを固定する」でやったようにスタイル変更で対応します。
要素ごと消したいときは、display: noneやDOMごと削除。
要素の位置を維持しつつ、隠したい時はvisibility: hidden;opacity: 0;といったスタイルを追加。
要素の主張を減らしたい時は、opacity: 0.5といったスタイルで半透明にします。

目を向けたくない要素にopacity: 0.2を付与した例。どこに注目すべきか一瞬でわかる。
(本の場合、もう少し不透明度をあげないと薄くてわからないはず)
スクリーンショット 2019-07-22 9.50.54.png (1.1 MB)

この辺りはCSSの知識になりますが、スクリーンショットの前加工としてCSSが使えるといった発想さえ持っておけば応用は無限にできます。


それでは良いスクショライフを!

参考

Run Commands With The Chrome DevTools Command Menu  |  Tools for Web Developers  |  Google Developers

B!
dev

CLIで利用するNode.jsの書き捨てプログラムを作成するコツ

プログラマーであれば単純作業をプログラムに任せると思います。今回は備忘録を兼ねてNode.jsで書き捨て前提のプログラムを書く際に、よく使っているテクニックをまとめてみました。 やっていることは同じ

nodejs
tool

おしゃれなコード画像を生成するCLIツール『Silicon』

自分はLT資料を作る際に、『Carbon』というおしゃれなコード画像を生成するWebサービスを利用しています。今回はCarbonをインスパイアした『Silicon』というRust製のCLIツールを発見

toolrust
event

「技術書同人誌博覧会」にサークル参加してきた

2019/07/27に大田区産業プラザPioで開催された技術書同人誌博覧会(通称「技書博」)にサークル参加してきました。 「ブログを書くまでがイベント」ということですので、新刊の話、次回の新刊、当日

技術同人誌