Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@tily

docker コンテナ + capybara-webkit でウェブサイトのスクリーンショットを撮影する

More than 3 years have passed since last update.

準備

Dockerfile 作成。

$ vi Dockerfile

内容はこんな感じ。

FROM ruby
RUN apt-get update && apt-get install -y libqt4-dev libqtwebkit-dev xvfb fonts-ipafont fonts-ipafont-gothic fonts-ipafont-mincho
RUN gem install capybara-webkit --no-ri --no-rdoc
ADD fonts.conf /etc/fonts/fonts.conf
ADD /capture.rb /capture.rb
ADD /capture.sh /capture.sh
RUN chmod +x /capture.sh
ENTRYPOINT ["/capture.sh"]

libqt4-dev と libqtwebkit-dev はヘッドレスブラウザを立ち上げるために必要なやつ。
xvfb はヘッドレスな X Window System サーバーを立ち上げるために必要なやつ。
ipafont, fonts-ipafont-gothic, fonts-ipafont-mincho はヘッドレスブラウザ上で日本語を含むサイトを正しく表示するために必要なやつ。
という感じっぽい。

次に、コンテナ内で実行させるスクリプトを作成する。
自作の Web サービス用に書いた処理からコピペしたもので、オプションとかは適当。

$ vi capture.rb
require "capybara-webkit"

if ARGV.size < 2
  abort "Usage ruby capture.rb URL OUTPUT_PATH"
end

url, output_path = ARGV[0], ARGV[1]
driver = Capybara::Webkit::Driver.new('web_capture')
browser = driver.browser
browser.visit(url)
browser.window_resize(browser.get_window_handle, 500, 500)
browser.render(output_path, 500, 500)

ruby capture.rb URL OUTPUT_PATH のように実行すると URL を見にいってスクショを OUTPUT_PATH に保存するようにしている。

ラッパーのシェルスクリプトも作成しておく。今回も docker で xvfb-run しようとしたときに Xvfb failed to start というエラーが出てしまう現象の解決方法 - Qiita のワークアラウンドを入れた。
(実行するコマンドが長いのでこうしてるけど、ださいのでもっといい感じにしたかった…。)

$ vi capture.sh
#!/bin/sh
rm /tmp/.X99-lock || echo 'Lock not found, continuing normal setup' && xvfb-run ruby /capture.rb $@

あと、フォントにアンチエイリアスを効かせるために fonts.conf を用意する必要があるんだけど、長いので prgrphs/fonts.conf at f91624e3ea2c02eb3c85e5c1763f5d85ab23ebe2 · tily/prgrphs を参照してください。

$ vi fonts.conf

デフォルトの fonts.conf を編集して、<fontconfig> タグの直下に下記の設定を追加してる感じです。

<match target="font">
    <edit name="antialias" mode="assign">
        <bool>true</bool>
    </edit>
</match>

実行

まずはイメージをビルド。

$ docker build -t capture .

実行。

docker run -v $(pwd):/data/ -ti capture http://ja.wikipedia.org/ /data/test.png
rm: cannot remove '/tmp/.X99-lock': No such file or directory
Lock not found, continuing normal setup
[DEPRECATION] Capybara::Webkit::Driver#browser is deprecated.
WARNING: The next major version of capybara-webkit will require at least version 5.0 of Qt. You're using version 4.8.6.
Request to unknown URL: http://ja.wikipedia.org/
(略)

(略) の部分に capybara-webkit のワーニングが出まくるけど、スクショ自体はうまく撮影できた。

$ ls -l test.png 
-rw-r--r-- 1 root root 1319199  2月  9 02:36 test.png
$ file test.png 
test.png: PNG image data, 821 x 6364, 8-bit/color RGBA, non-interlaced

クラウド上のサーバーで作業していたので、Web サーバーを立ち上げて確認する。

$ python -m SimpleHTTPServer 3000
Serving HTTP on 0.0.0.0 port 3000 ...

http://www.example.com:3000/test.png で画像を表示して確認した。
縦長になってしまったのでだいぶトリムしたけどこんな感じのスクショがとれる。

まとめ

docker コンテナ + capybara-webkit でウェブサイトのスクリーンショットを撮影することができた。フォントがまだいまいちな気がするので、他のフォントを入れてためしてみたいなー。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tily
お気に入り ruby 使える python golang javascript 書いたことはある perl php 興味ある erlang 苦手 java
fjct
クラウド・IoT 関連サービスを開発・提供している企業です。(こちらは、富士通クラウドテクノロジーズの有志にて運営しております。)

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?