Puppeteer と GAS を利用した Web 監視

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

Transcript

1. Puppeteer と GAS
   を利用した Web 監視
   2018/04/03 トップゲート社 第２回 フロントエンド勉強会
   1
   

   View Slide

2. 本日の内容
   2
   1. Puppeteer とは
   2. Puppeteer と GASを利用した Web 監
   視
   

   View Slide

3. 1. Puppeteer とは
   3
   

   View Slide

4. Puppeteer
   Chrome を Node.js から操作するラ
   イブラリ
   ● DevTools Protocol で操作している
   ● ヘッドレスモードで起動することでGUI
   なしでも使える
   4
   

   View Slide

5. Puppeteer
   5
   

   View Slide

6. 比較
   6
   

   View Slide

7. 特徴その1
   画面キャプチャを撮る
   ● 画面サイズを変えることも可能
   7
   

   View Slide

8. 特徴その2
   画面を操作する
   ● DOMの内容を取得することも可能
   8
   

   View Slide

9. 特徴その3
   SPA でもOK
   ● Chrome を操作しているから、JS が
   動く
   9
   

   View Slide

10. その他
    ● テストも考慮されている
    ● 任意のDOMだけ切り出してキャプチャ
    も可能
    ● HTTPリクエストのインターセプト
    ● 描画にかかった時間などの計測
    ● etc
    10
    

    View Slide

11. 2. Puppeteer と
    GASを利用した
    Web 監視
    11
    

    View Slide

12. 経緯
    12
    技術情報のキャッチアップ
    公式情報が一番早い
    ● ブログとかは RSS/Atom を用意してく
    れてる
    だけど・・・
    

    View Slide

13. 用意してくれていない
    サイトが意外とある・・・
    → タブを開いといて、毎日リロードしてチェックしてた
    13
    

    View Slide

14. なのでWeb監視する仕組みを
    作った
    14
    

    View Slide

15. 15
    1. cron で定期的に Node を実行する
    2. puppeteer を用いて Web スクレイピング
    3. GAS で建てた Web サーバーに Post で
    スクレイピング結果を送信
    4. スクレイピング結果を受け取り、履歴をス
    プレッドシートに登録
    5. 履歴に変更があったら Slack で通知
    

    View Slide

16. デモ
    16
    

    View Slide

17. 17
    ここをpuppeteerで取得
    GCE 上の Node から
    puppeteer を実行
    GAS でスプレッドシートの
    履歴を書込
    　＆
    Slack で通知
    

    View Slide