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

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

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

まとめると

1. Phantom.jsの死亡
   • 唯一のメンテナが今後はChromeHeadlessに乗り換えるであろうとメンテナを辞任
     • Google グループ
   • 今後の構想はあるのか、phantomiumというPhantomJS + ChromeHeadlessの単語が組み合わさったレポジトリはある。
     • github.com
2. Googleが開発している安心感
   • 今後Chromeを手放すことはそうそうないと思うので、今後のベストプラクティスになる可能性が高い。
3. Production環境への投入は待ったほうが良い。
   • 謎の –disable-gpu Option
   • APIが落ち着いていない。
     • devtools-procotol viewerというページを見れば分かるのですが、まだまだAPIが落ち着いていません。
       • Chrome DevTools Protocol Viewer - latest (tip-of-tree)
       • 各所に目立つExperimental(実験的)の文字。
   • Seleniumなど、各種エコシステムが対応してある程度枯れるのが半年、ベストプラクティスが確立されるのが1年後ぐらいかなと予想。

軽く触ってみた。

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

1.HTMLをDumpする

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

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

1. キャプチャの撮影
   • https://wobfnz0lh2.execute-api.us-west-2.amazonaws.com/dev/chrome?url=https://google.co.jp
   • パラメータのurlを変更すると、別のページのキャプチャを取れます。
2. ページをPDFへ変換
   • https://wobfnz0lh2.execute-api.us-west-2.amazonaws.com/dev/pdf?url=https://google.com/
   • 同じくパラメータのURLを変更すると生成される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/

ライブラリの中身

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