$30 off During Our Annual Pro Sale. View Details »

Puppeteer と GAS を利用した Web 監視

howdy39
April 03, 2018

Puppeteer と GAS を利用した Web 監視

howdy39

April 03, 2018
Tweet

More Decks by howdy39

Other Decks in Programming

Transcript

  1. Puppeteer と GAS
    を利用した Web 監視
    2018/04/03 トップゲート社 第2回 フロントエンド勉強会
    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