Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

1. Puppeteer とは 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Puppeteer 5

Slide 6

Slide 6 text

比較 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

デモ 16

Slide 17

Slide 17 text

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