Ruby製のカピバラさん capybara-webkit でウェブページのキャプチャを撮る

ちなみにこちらは上野動物園のカピバラさん

ウェブページのキャプチャ、とりたいことってありますよね。しかもたくさん。

たくさんページのデザインを確認したいとか、校正するために印刷したいとか、議論しながらメモをしていきたいとか、大きなウェブサイトを作るお仕事ではよくあることです。でも、1ページ1ページ丁寧にキャプチャをとっていったら、時間がかかって大変です。

ということで、今回は、コマンドラインでウェブページのキャプチャ画像を作成してくれるライブラリ capybara-webkit を使ってみました。

他のツールとかちょっとしたスクリプトと組み合わせて使ったら、たくさんのウェブページでも一気にキャプチャ画像を作成できそうです。

主に次のサイトなどを参考にやってみることにします。

カピバラさんをインストールする

Mac OS X 10.8.5 です。下記を実行して、capybara-webkit をインストールします。

command
$ brew install qt
$ sudo gem install capybara-webkit

qt という何かを先にインストールしているようです。詳しくはわかりませんが、たぶんカピバラさんが使う何かでしょう。これのことかな?

普通はこれだけでインストールは終わりだそうです。が、わたしの環境では、いきなりエラーがおきてカピバラさんのインストールに失敗してしまいました。

output
Fetching: mini_portile-0.5.2.gem (100%)
Successfully installed mini_portile-0.5.2
Fetching: nokogiri-1.6.1.gem (100%)
ERROR:  Error installing capybara-webkit:
     nokogiri requires Ruby version >= 1.9.2.

nokogiri は Ruby のライブラリです。おそらくカピバラさんが利用しているものです。 これがRuby 1.9.2 以上を必要としている、とのこと。とりあえずRubyのバージョンを確認してみます。

command
$ ruby -v
ruby 1.8.7 (2012-02-08 patchlevel 358) [universal-darwin12.0]

Ruby 1.8.7。 なるほど、確かにバージョンが低いですね。ということなので、Rubyのバージョンをあげてみます。

とはいえ、Macにもともと入っている Ruby を直接バージョンアップしてしまうのは、何か起こりそうでちょっとコワイので、今回は RVM というツールを使ってRubyのバージョン管理をします。

command
$ curl -sSL https://get.rvm.io | bash -s stable

使い方は下記のページを参考にさせていただきました。

今回は、現時点で最新ぽい Ruby 2.1.1 をインストールします。

command
$ rvm install ruby-2.1.1

Ruby 2.1.1 が RVM に認識されているか確認します。

command
$ rvm list
rvm rubies

   ruby-2.1.1 [ x86_64 ]

# Default ruby not set. Try 'rvm alias create default <ruby>'.

# => - current
# =* - current && default
#  * - default

無事、認識されているようです。

ここまででは、新しい Ruby はインストールされたものの、rubyコマンドは古いrubyを参照したままです。これを新しいrubyへ切り替えます。

command
$ rvm 2.1.1 --default
Warning! PATH is not properly set up, '/Users/tomoya/.rvm/gems/ruby-2.1.1/bin' is not at first place,
         usually this is caused by shell initialization files - check them for 'PATH=...' entries,
         it might also help to re-add RVM to your dotfiles: 'rvm get stable --auto-dotfiles',
         to fix temporarily in this shell session run: 'rvm use ruby-2.1.1'.

RVM is not a function, selecting rubies with 'rvm use ...' will not work.

You need to change your terminal emulator preferences to allow login shell.
Sometimes it is required to use `/bin/bash --login` as the command.
Please visit https://rvm.io/integration/gnome-terminal/ for a example.

うぉ、なんかダメって言われた...。login shell の設定を有効にせよ、と言っているのでしょうか。

いろいろやってみた結果、どうやら私が bash を使ってるのがダメだったようです。一旦 bash から抜けたらできました。

command
$ exit
$ rvm 2.1.1 --default

ruby コマンドが 2.1.1 に通っているか確認します。

command
$ ruby -v
ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-darwin12.0]

これでOKですね。

さぁ、では、気を取り直してカピバラさんのインストールへ戻ります。

command
$ gem install capybara-webkit
Fetching: mini_portile-0.5.2.gem (100%)
Successfully installed mini_portile-0.5.2
Fetching: nokogiri-1.6.1.gem (100%)
Building native extensions.  This could take a while...
Successfully installed nokogiri-1.6.1
Fetching: xpath-2.0.0.gem (100%)
Successfully installed xpath-2.0.0
Fetching: rack-1.5.2.gem (100%)
Successfully installed rack-1.5.2
Fetching: rack-test-0.6.2.gem (100%)
Successfully installed rack-test-0.6.2
Fetching: mime-types-2.2.gem (100%)
Successfully installed mime-types-2.2
Fetching: capybara-2.2.0.rc1.gem (100%)
IMPORTANT! Some of the defaults have changed in Capybara 2.1. If you're experiencing failures,
please revert to the old behaviour by setting:

    Capybara.configure do |config|
      config.match = :one
      config.exact_options = true
      config.ignore_hidden_elements = true
      config.visible_text_only = true
    end

If you're migrating from Capybara 1.x, try:

    Capybara.configure do |config|
      config.match = :prefer_exact
      config.ignore_hidden_elements = false
    end

Details here: http://www.elabs.se/blog/60-introducing-capybara-2-1

Successfully installed capybara-2.2.0.rc1
Fetching: capybara-webkit-1.1.1.gem (100%)
Building native extensions.  This could take a while...
Successfully installed capybara-webkit-1.1.1
Parsing documentation for capybara-2.2.0.rc1
Installing ri documentation for capybara-2.2.0.rc1
Parsing documentation for capybara-webkit-1.1.1
Installing ri documentation for capybara-webkit-1.1.1
Parsing documentation for mime-types-2.2
Installing ri documentation for mime-types-2.2
Parsing documentation for mini_portile-0.5.2
Installing ri documentation for mini_portile-0.5.2
Parsing documentation for nokogiri-1.6.1
Installing ri documentation for nokogiri-1.6.1
Parsing documentation for rack-1.5.2
Installing ri documentation for rack-1.5.2
Parsing documentation for rack-test-0.6.2
Installing ri documentation for rack-test-0.6.2
Parsing documentation for xpath-2.0.0
Installing ri documentation for xpath-2.0.0
Done installing documentation for capybara, capybara-webkit, mime-types, mini_portile, nokogiri, rack, rack-test, xpath after 17 seconds
8 gems installed

きた! カピバラさん! 今度は成功です。

キャプチャを撮ってみる

それでは、早速ウェブキャプチャを保存してみます。

こちらのページのお手本コードを参考に、ちょっと変更しながら試してみました。

まず、Rubyスクリプトファイルを作成します。名前はなんでもいいですが、ここでは capybaraWebkit.rb ということにします。

command
$ vim capybaraWebkit.rb

次のコードを実装します。

vim
require 'capybara-webkit'

browser = Capybara::Webkit::Driver.new('web_capture').browser
browser.visit 'http://www.pxt.jp/'
browser.render('pxt.png', 1024, 650)

できたら、rubyコマンドから動かしてみましょう。

$ ruby capybaraWebkit.rb

すると、同階層に pxt.png が生成されました。成功!

できたキャプチャ画像をみてみる

とれた画像はこちらです。

capybara-webkit が撮影したトップページのキャプチャ

幅1024px、高さ650pxのPNG画像です。第2、第3引数が画像のサイズを指定しているようです。

画面の左上にマウスポインタが写っているのがやや気になりますね。これ、消せないのかな?

オプションをみてみる

少ないですが、先ほどのコードのパラメータについて見てみます。

capybaraWebkit.rb
browser.visit 'http://www.pxt.jp/'

ここで、キャプチャを作成したいページのURLを設定します。

capybaraWebkit.rb
browser.render('pxt.png', 1024, 650)

この部分で実際にキャプチャ画像を生成しています。 render() メソッドの第1引数は、キャプチャ画像の保存先のパス、第2引数はブラウザのウィンドウ幅、第3引数はウィンドウの高さを設定します。第3引数を設定しても、ウェブページがこの高さに収まらなければ、全体がキャプチャされ、縦に長ーーーーーい画像が得られます。

これをいじくって、たとえばこういうふうにすると、レスポンシブ・デザインのキャプチャを撮影することもできたりするわけですね。

capybaraWebkit_RWD.rb
require 'capybara-webkit'

browser = Capybara::Webkit::Driver.new('web_capture').browser
browser.visit 'http://www.pxt.jp/'
browser.render('pxt_l.png', 1024, 650)
browser.render('pxt_m.png', 800, 650)
browser.render('pxt_s.png', 320, 650)

capybara-webkit が撮影したトップページのキャプチャ(1024 * 650)

capybara-webkit が撮影したトップページのキャプチャ(800 * 650)

capybara-webkit が撮影したトップページのキャプチャ(320 * 650)

まとめ

  • capybara-webkit をインストールしました。
  • capybara-webkit が依存するnokogiriの依存性のために、RVM を使って新しい Ruby をインストールしました。
  • ウェブページの基本的なキャプチャを撮ってみました。
  • ウインドウの幅を変更して、レスポンシブデザインのキャプチャも撮れました。

というわけで、カピバラさんの基本はわかったんじゃないか、と思います。

あともし、USER_AGENTを変更してのキャプチャとか、onloadから数秒おいての時間差キャプチャとか、画像オフ、JavaScriptオフなどの条件でキャプチャができたりすると、いろいろ夢が広がりそうです。できるのかな?

でも、それはまた次の機会に調べてみたいと思います。


プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

ページの先頭へ戻る