病みつきエンジニアブログ

機械学習、iPhoneアプリ、Javascript,Ruby on Railsなどなど。

Puppeteer を CLI で動かす Docker イメージ作った

また新しい Docker イメージ作ったので紹介する。

https://hub.docker.com/r/yamitzky/puppeteer-cli

Puppeteer とは?

github.com

Chrome Headless を Node で触るためのライブラリで、URLを見ると分かる通り、 Chrome のチームが出しているものです。

Puppeteer-CLI は?

Puppeteer を CLI から動かす、 Docker イメージです。現在は、スクショを撮る機能のみ対応しています。

Chrome Headless そのものを Docker で動かすのに比べてのメリットは、

  • Docker での連携を前提にしていて、 標準出力にスクショ結果を吐き出すことができる ※Base64エンコードされています
  • CSSを埋め込めるので、日本語フォントとかも行ける
  • 今後の発展性 ※ 現在は未対応ですが、今後 puppeteer のコードを実行できるようにしたいです。

使い方

標準出力に吐き出すときは、

docker run -it --rm yamitzky/puppeteer-cli --url https://yamitzky.com

日本語対応するときは、

docker run -it --rm -v "$PWD:/tmp" yamitzky/puppeteer-cli --url https://yamitzky.com --out /tmp/example.png --delay 1000 --css 'https://fonts.googleapis.com/earlyaccess/notosansjapanese.css' --style 'font-family: "Noto Sans Japanese"'

といった感じで動かせます。 Noto フォントシリーズは、韓国語とか中国語にも対応しているものもあるので、読み込ませるCSSの設定を変えればいろいろできます。

Options:
  --width   Width of viewport
  --height  Height of viewport
  --out     File path to save. If `-` specified, outputs to console in
            base64-encoded                                        [default: "-"]
  --delay   Delay to save screenshot after loading CSS. Milliseconds
  --css     Additional CSS URL to load
  --style   Additional style to apply to body
  --url                                                               [required]

Examples:
  index.js --url=https://example.com

なんで標準出力に吐き出せると嬉しいの?

だいたい、こんな感じの使い方をイメージしています。

f:id:yamitzky:20170822004028p:plain

ECSの場合、標準出力に吐き出されたログを、CloudWatch Logsに出力することができます。CloudWatch Logs から Lambda を発火させて、 Lambda から Slack に投稿したりできそうだなーと思った次第です。