4kaku design

マーケティングを勉強しているWebデザイナーのノート

MacでWebサイトのスクリーンショット撮影に使えるコマンド「Webkit2png」を使ってみたので、準備とターミナルの使い方をまとめました。
今まではChromeエクステンションを使っていましたが、これからはこっちに乗り換えます。


Webサイト制作をやっていると、参考にしたいサイトのキャプチャを撮りたいときが多々あります。今までは手軽で便利なChromeエクステンションを使っていました。しかし、Webサイトによってはページ全体を撮影したときに固定(position: fixed;)されたナビゲーションがついてきてしまう問題があって困っていました。



そこで、今回はターミナルへの苦手意識を払拭するのも兼ねて「webkit2png」を使ってみました。ターミナルと聞くと身構える方はいると思いますが、cdとlsしかろくに使ったことがなかった私でもなんとか使えているのでターミナル初心者さんでも簡単に導入できます。


ターミナル音痴でも大丈夫!「Webkit2png」の使い方


1. Mac用パッケージ管理ツール「Homebrew」をインストール


Homebrew

インストール説明は日本語対応


webkit2pngをインストールするためには、Homebrewというパッケージ管理ツールが必要です。インストールは簡単で、以下のテキストをターミナルに貼り付けて実行するだけ。
※Xcodeが入っていないとインストールできない可能性があるようなので、あらかじめApp Storeからダウンロードしておいてください。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. webkit2pngをインストール

Homebrewを入れたら、次はwebkit2pngをインストールします。これもターミナルで以下のコマンドを実行するだけ。ここでつまずいた場合は、Homebrewがきちんと入れられていない可能性大。

brew install webkit2png

3. webkit2pngでスクリーンショットを撮ってみる

無事にインストールができたら、さっそくスクリーンショットを撮ってみましょう!スクリーンショットは現在ターミナルで指定されているディレクトリに生成されるので、デスクトップやユーザーの直下にいる場合は適当なディレクトリを作ってそこに入れることをおすすめします。今回はデスクトップに「webkit2png」というディレクトリを作りました。

$ cd ~/Desktop/webkit2png 

肝心のwebkit2pngを動かすためのコマンドは以下の通り。

$ webkit2png http://4kakudez.com

「webkit2png」コマンドを打ち込み、スクリーンショットを撮りたいURLを指定します。あとは実行を待ちましょう。

Fetching http://4kakudez.com ...
 ... done

こういうメッセージが表示されたら、指定したフォルダにスクリーンショットが入っていることが確認できます。インストールしたままの状態なら、3つ画像が入っているはず。



webkit2pngのオプションを指定してみよう

ただし、ここで困ったことがひとつ。初期設定のまま撮れる3つの画像の中で、一番横幅の大きい「4kakudezcom-full.png」でも800pxしかありません。困ったときはヘルプを見よう!ということで以下のコマンドを入力します。

$ webkit2png --help

ユーザーが使用できるオプションが表示されます。そこで、今回お世話になるのはこちらのオプション。

Browser Window Options:
    -W WIDTH, --width=WIDTH
                        initial (and minimum) width of browser (default: 800)
    -H HEIGHT, --height=HEIGHT
                        initial (and minimum) height of browser (default: 600)

デフォルトの横幅は「800px」、高さは「600px」に指定されていることがわかります。今回は横幅1024pxのスクリーンショットが欲しかったので、以下のコマンドを入力。このとき、幅の指定は「1024」で単位の「px」は不要です。エラーを連発するのでどうしようかと困っていたら、「1024px」と単位を含めて書いてしまったのが原因でした。

$ webkit2png http://4kakudez.com -W 1024 -H 3500

当ブログを「幅1024px」「高さ3500px」指定をして撮影してみました。背景画像に「background-size: cover;」を指定したので、高さを指定しておかないと600px以降は背景が真っ白になってしまうからです。

複数のページのスクリーンショットをまとめて撮るには

ターミナルだけでスクリーンショットを撮れるので、随分ラクができるようになりました。しかし、スクリーンショットが欲しいケースは単一のページに限りません。複数のURLを指定して一括で撮影するには、grunt-multishotを使います。こちらの使い方(&Gruntデビューについて)は次回エントリーにしたいと思います。