Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Puppeteer と GAS を利用した Web 監視
howdy39
April 03, 2018
Programming
1
740
Puppeteer と GAS を利用した Web 監視
ソース公開しています
https://github.com/howdy39/web-update-notification
howdy39
April 03, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
howdy39
4
310
howdy39
5
6.2k
howdy39
1
1.4k
howdy39
0
120
howdy39
0
190
howdy39
0
42
howdy39
0
68
howdy39
0
35
howdy39
0
87
Other Decks in Programming
See All in Programming
dictoss
0
170
muttsu_623
0
560
koher
7
740
ogidow
0
190
hirotokirimaru
1
440
yosuke_furukawa
PRO
14
4k
mraible
PRO
0
320
azdaroth
0
150
mizdra
7
4.9k
466548
0
160
trajchevska
2
390
nbkouhou
1
1.3k
Featured
See All Featured
paulrobertlloyd
71
1.4k
samlambert
237
9.9k
stephaniewalter
260
11k
shpigford
165
19k
shlominoach
176
7.4k
notwaldorf
13
1.6k
jasonvnalue
82
8.1k
jeffersonlam
328
15k
morganepeng
92
14k
pauljervisheath
195
15k
phodgson
87
3.9k
hannesfritz
27
930
Transcript
Puppeteer と GAS を利用した Web 監視 2018/04/03 トップゲート社 第2回 フロントエンド勉強会
1
本日の内容 2 1. Puppeteer とは 2. Puppeteer と GASを利用した Web
監 視
1. Puppeteer とは 3
Puppeteer Chrome を Node.js から操作するラ イブラリ • DevTools Protocol で操作している
• ヘッドレスモードで起動することでGUI なしでも使える 4
Puppeteer 5
比較 6
特徴その1 画面キャプチャを撮る • 画面サイズを変えることも可能 7
特徴その2 画面を操作する • DOMの内容を取得することも可能 8
特徴その3 SPA でもOK • Chrome を操作しているから、JS が 動く 9
その他 • テストも考慮されている • 任意のDOMだけ切り出してキャプチャ も可能 • HTTPリクエストのインターセプト • 描画にかかった時間などの計測
• etc 10
2. Puppeteer と GASを利用した Web 監視 11
経緯 12 技術情報のキャッチアップ 公式情報が一番早い • ブログとかは RSS/Atom を用意してく れてる だけど・・・
用意してくれていない サイトが意外とある・・・ → タブを開いといて、毎日リロードしてチェックしてた 13
なのでWeb監視する仕組みを 作った 14
15 1. cron で定期的に Node を実行する 2. puppeteer を用いて Web
スクレイピング 3. GAS で建てた Web サーバーに Post で スクレイピング結果を送信 4. スクレイピング結果を受け取り、履歴をス プレッドシートに登録 5. 履歴に変更があったら Slack で通知
デモ 16
17 ここをpuppeteerで取得 GCE 上の Node から puppeteer を実行 GAS でスプレッドシートの
履歴を書込 & Slack で通知