Puppeteer と GAS を利用した Web 監視

ソース公開しています
https://github.com/howdy39/web-update-notification

Transcript

1. Puppeteer と GAS を利用した Web 監視 2018/04/03 トップゲート社 第２回 フロントエンド勉強会 1
2. 本日の内容 2 1. Puppeteer とは 2. Puppeteer と GASを利用した Web 監 視
3. 1. Puppeteer とは 3
4. Puppeteer Chrome を Node.js から操作するラ イブラリ • DevTools Protocol で操作している • ヘッドレスモードで起動することでGUI なしでも使える 4
5. Puppeteer 5
6. 比較 6
7. 特徴その1 画面キャプチャを撮る • 画面サイズを変えることも可能 7
8. 特徴その2 画面を操作する • DOMの内容を取得することも可能 8
9. 特徴その3 SPA でもOK • Chrome を操作しているから、JS が 動く 9
10. その他 • テストも考慮されている • 任意のDOMだけ切り出してキャプチャ も可能 • HTTPリクエストのインターセプト • 描画にかかった時間などの計測 • etc 10
11. 2. Puppeteer と GASを利用した Web 監視 11
12. 経緯 12 技術情報のキャッチアップ 公式情報が一番早い • ブログとかは RSS/Atom を用意してく れてる だけど・・・
13. 用意してくれていない サイトが意外とある・・・ → タブを開いといて、毎日リロードしてチェックしてた 13
14. なのでWeb監視する仕組みを 作った 14
15. 15 1. cron で定期的に Node を実行する 2. puppeteer を用いて Web スクレイピング 3. GAS で建てた Web サーバーに Post で スクレイピング結果を送信 4. スクレイピング結果を受け取り、履歴をス プレッドシートに登録 5. 履歴に変更があったら Slack で通知
16. デモ 16
17. 17 ここをpuppeteerで取得 GCE 上の Node から puppeteer を実行 GAS でスプレッドシートの 履歴を書込 　＆ Slack で通知