Puppeteer と GAS を利用した Web 監視

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 で通知