teitei's blog

雑に書くので雑に読んでください。

ChromeHeadlessを触った所感と、Flowtype・ES2017構文を使ってChromeHeadlessを動かすライブラリを作っている話。

ChromeHeadless、思った以上に需要ありそうなので書いてみます。

まずは触った所感ですが、社内LTの際に喋った資料があるのでそちらをペタッと。

まとめると

  1. Phantom.jsの死亡
    • 唯一のメンテナが今後はChromeHeadlessに乗り換えるであろうとメンテナを辞任
    • 今後の構想はあるのか、phantomiumというPhantomJS + ChromeHeadlessの単語が組み合わさったレポジトリはある。
  2. Googleが開発している安心感
    • 今後Chromeを手放すことはそうそうないと思うので、今後のベストプラクティスになる可能性が高い。
  3. Production環境への投入は待ったほうが良い。
    • 謎の –disable-gpu Option
    • APIが落ち着いていない。
    • Seleniumなど、各種エコシステムが対応してある程度枯れるのが半年、ベストプラクティスが確立されるのが1年後ぐらいかなと予想。

軽く触ってみた。

Shellでならさくっと触ることは出来ます。

1.HTMLをDumpする

  • $ chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/

あとはAWS Lambda + API Gatewayに突っ込んで見たりもしました。

  1. キャプチャの撮影
  2. ページをPDFへ変換

Flowtype・AsyncAwait(ES2017)を利用してライブラリを作っている話

Githubとかも見てみたんですが、特にライブラリが無かったので、最近のJavaScriptのキャッチアップを兼ねて自分で作っています。

github.com

Node.jsで作っています。超絶α versionです。

Architectureとしては、

  • Flowtypeによる型付け
  • AsyncAwaitサポート(babel-preset-2017)
  • Eslint、EsdocによるDocument生成

TypeScriptにするかFlowtypeにするか迷いましたが、
現在所属している会社ではFlowtypeを使っているのでキャッチアップを兼ねてFlowtypeにしました。

このライブラリで行っていることは、

  1. Chromeの立ち上げ
  2. Chrome Debugging Protocolへの接続とレスポンスの取得

です。

作った動機としては、JavaScript界隈のキャッチアップも兼ねているのですが、
iQOS2.4 Plusの予約システムがあまりにも(お察し下さい)だったので(お察し下さい)という理由です。

簡単な使い方

examples/ にサンプルを老いてあります。
ここではPDFを出力する例を貼ります。

gist.github.com

実行すると、PDFが生成されます。

$ ./node_modules/.bin/babel-node example/printPdf.js
1497867182283.pdf       LICENSE                 docs/                   lib/                    package.json            yarn.lock
Dockerfile              README.md               example/                node_modules/           src/

f:id:teitei_tk:20170619191438p:plain

ライブラリの中身

  1. Chromeの立ち上げ

lighthouseというライブラリを利用しています。

github.com

ソースコードを覗いてみると、Typescriptベースで、childprosessでchromeを立ち上げているようですね。
https://github.com/GoogleChrome/lighthouse/blob/master/chrome-launcher/chrome-launcher.ts

というわけでこのClassをImportして使っています。

// @flow
import { ChromeLauncher } from 'lighthouse/lighthouse-cli/chrome-launcher';

export default class Launcher {
// do something.
};

処理はココらへんです。

https://github.com/teitei-tk/Chaldeas/blob/master/lib/chrome/launcher.js

  1. Debugging Protocolへの接続

これはchrome-remote-interfaceというライブラリを利用しています。
github.com

簡単な使い方はREADME.mdに乗っていますね。

こちらもソースコードを覗いてみると、Chromeへ対してリクエストを覗いているWrapperですね。

所感

devtools-viewerを眺めてみると面白そうな物はいっぱいあります。

  1. ServiceWorker Chrome DevTools Protocol Viewer - ServiceWorker

  2. Profiler Chrome DevTools Protocol Viewer - Profiler

が、やはり目立つExperimentalの文字。 Production環境への投入はもう少し待ったほうが良さそうですが、触ってみると楽しいことがあるかもしれません。

そしてPullRequestをお待ちしております :) github.com