Skip to content

Web ページをキャプチャーする

Google マップで超デカくて超細かい地図を印刷するという記事 で、Google Maps をキャプチャーするツールが紹介されていました。この記事をきっかけに、以前、Web ページをキャプチャーする（スクリーンショットを撮る）ツールを作っていたことを思い出しました。本来は BIG-IP 等、Web ブラウザからのアクセスを中心に設定する機器の設定画面（Web ページ）を証跡として残しておきたい、という動機から自作したのですが、知人が「Google Maps で、好きな大きさの地図をキャプチャー出来たら面白くない？」というアイデアがあり、当初の目的からは方向性が逸れていってしまいました...ついでに（？）、Google Maps 用に少し改造したのでアップロードしておきます。

  • WebCap-0.0.0.3

.NET Framework 3.5 でビルドしてあり、内部的には IE コンポーネントを利用して Web ページをキャプチャーしているので、レンダリング結果も IE と同じになっているはずです。以下のような特徴があります。

  • コマンドラインから利用出来るので、バッチファイルに組み込んで自動化しやすい
  • 縦長のページも問題無く、最上部から最下部までキャプチャー出来る
  • UserAgent を指定出来るので、「iPhone では、どう見えるのか？」といったテストが出来る
  • 様々な画像フォーマットで出力出来る
  • Google Maps をキャプチャーした場合は、上部の検索窓や左側のナビゲーションメニューを非表示にしてくれる

使い方

コマンドラインから利用します。「WebCap 対象URL」に続けて、以下のようなオプションを指定することが出来ます。全てのオプションは任意です。

  • -a ユーザエージェント
    • ユーザーエージェントを指定します (デフォルトでは「Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0)」)
  • -f 出力フォーマット
    • キャプチャーした画像を保存するフォーマットを BMP、GIF、JPG、PNG、TIF の中から指定します (デフォルトでは PNG フォーマット)
  • -u
    • URL をキャプチャー画像下部に書き込みます
  • -o 出力ファイル名
    • キャプチャーした画像を保存する際のファイル名を指定します
  • -t 待ち時間
    • Web ページが表示されてからキャプチャーするまでの待ち時間をミリ秒で指定します
  • -w 画像の幅
    • キャプチャーする画像の幅を指定します (デフォルトでは 800 ピクセル)
  • -h 画像の高さ
    • キャプチャーする画像の高さを指定します (デフォルトでは 600 ピクセル)

キャプチャーしてみる

試しに Yahoo! をキャプチャーしてみます。コマンドプロンプトから以下のように指定するだけです。キャプチャーが完了した後は、URL を HTTP エンコードしたものになります。http や https を省略すると、自動的に http 扱いとなります。

1
WebCap www.yahoo.co.jp

ユーザエージェントを指定する

今度は Yahoo! へ、ユーザエージェントを iPhone にしてキャプチャーしてみます。iPhone の画面幅に合わせる為、-w オプションで幅を 320 ピクセルにしています。

1
 WebCap www.yahoo.co.jp -a "Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/525.20" -w 320

キャプチャー結果の画像は以下のようになりました。

file

Google Maps をキャプチャーしてみる

Google Maps のキャプチャー例として東京ドームをキャプチャーしてみます。-w で幅を 500 ピクセルに、-h オプションで高さも 500 ピクセルに指定しています。また、出力ファイル名を「TokyoDome」と指定していますが、拡張子は画像ファイルのフォーマットに応じて、自動的に補完されます。念のため、-t オプションで地図が全部表示されてからキャプチャーされるように待ち時間を 1,000 ミリ秒（つまり、1 秒）、指定しています。

1
WebCap "http://www.google.co.jp/maps?ie=UTF8&hq=&hnear=%E6%9D%B1%E4%BA%AC%E9%83%BD%E7%B7%B4%E9%A6%AC%E5%8C%BA%E8%B1%8A%E7%8E%89%E5%8C%97%EF%BC%93%E4%B8%81%E7%9B%AE%EF%BC%91%EF%BC%98%E2%88%92%EF%BC%91&ll=35.707083,139.749055&spn=0.004609,0.013733&t=h&z=17&brcurrent=3,0x60188c4eb5391b93:0x3ec15cb0cd1c76ef,1" -w 500 -h 500 -t 1000 -o TokyoDome

キャプチャー結果の画像は以下のようになりました。

file

上の画像のように、キャプチャー対象が Google Maps の場合に限り、上部の検索窓と左側のナビゲーションメニューを除外した上で、指定したサイズの画像をキャプチャーします。例えば、5,000 ピクセル x 5,000 ピクセルのような、一般的なブラウザでは表示し辛いサイズの画像もキャプチャーすることが可能です。

画像に URL も記載する

-u オプションを指定すると、キャプチャーした画像の下部に対象 URL を記載しておく（画像の中に埋め込んでおく）ことが出来ます。-u オプションを指定してキャプチャーした結果は以下のようになります。

file

画像下部に http://www.apple.com.jp という文字列が記載されているのが分かります。