Puppeteer と GAS を利用した Web 監視

5abf9d4714b77a15beea063d08586560?s=47 howdy39
April 03, 2018

Puppeteer と GAS を利用した Web 監視

5abf9d4714b77a15beea063d08586560?s=128

howdy39

April 03, 2018
Tweet

Transcript

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

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