その他
    ホーム 職種別 エンジニア docker上のブラウザで画面キャプチャをとる
    docker上のブラウザで画面キャプチャをとる
     

    docker上のブラウザで画面キャプチャをとる

    今回やること

    docker上にchromium+ruby+capybaraをいれてキャプチャをとって遊んでみます。
    dockerはインストール済みとします。

    ソースコードの用意

    Dockerfile

    FROM ruby:2.7.1-alpine3.12
    RUN apk add --update --no-cache \
            g++ \
            libxslt-dev \
            make \
            unzip \
            chromium \
            ttf-freefont \
            chromium-chromedriver
    
    # 日本語フォント
    RUN mkdir /noto
    ADD https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip /noto
    WORKDIR /noto
    RUN unzip NotoSansCJKjp-hinted.zip && \
        mkdir -p /usr/share/fonts/noto && \
        cp *.otf /usr/share/fonts/noto && \
        chmod 644 -R /usr/share/fonts/noto/ && \
        fc-cache -fv && \
        rm -rf /noto/*
    
    # 出力用ディレクトリ
    RUN mkdir /dist
    
    WORKDIR /app
    COPY . /app
    RUN bundle config build.nokogiri --use-system-libraries
    RUN bundle install
    RUN apk del \
            g++ \
            libxslt-dev \
            make \
            unzip
    ENTRYPOINT ["bundle", "exec", "ruby", "capture.rb"]

    Gemfile

    source "https://rubygems.org"
    
    git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
    
    gem "selenium-webdriver", "~> 3.0"
    gem "capybara", "~> 3.0"

    capture.rb

    Bundler.require
    
    base_args = %w{--headless --no-sandbox --disable-gpu --disable-extensions --disable-dev-shm-usage --disable-infobars}
    Capybara.register_driver :chrome do |app|
      args = base_args.dup << "--window-size=1900,1080"
      driver = Capybara::Selenium::Driver.new(
        app,
        browser: :chrome,
        desired_capabilities: Selenium::WebDriver::Remote::Capabilities.chrome(
          "chromeOptions" => {
            'args' => args,
            'w3c' => false #selenium-webdriver 3系の場合これを付けないとエラーになる
          }
        )
      )
    end
    Capybara.default_driver = :chrome
    browser = Capybara::Session.new(:chrome)
    browser.visit ARGV[0]
    browser.save_screenshot '/dist/capture.png'

    ビルド

    docker build -t chrome-capture .

    使い方

    docker run --rm -v $PWD:/dist chrome-capture https://appirits.com

    コマンドを実行したディレクトリにcapture.pngという画像ファイルが作成されて
    キャプチャ画像が保存されていれば成功です。