Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Puppeteer と GAS を利用した Web 監視

howdy39
April 03, 2018
Programming
1
1.1k

Puppeteer と GAS を利用した Web 監視

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

howdy39

April 03, 2018
Tweet

More Decks by howdy39

See All by howdy39
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
420
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
7.4k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
1.7k
Promise
howdy39
1
170
カラーユニバーサルデザイン / color universal design
howdy39
0
380
Geolocation API
howdy39
0
63
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
99
Media Queries
howdy39
0
50
First_Paintと_クリティカルレンダリングパス
howdy39
0
230

Other Decks in Programming

See All in Programming
どのくらい速くなるの？Laravel MixとViteを性能比較してみました！
akitotsukahara
0
180
Comparing Native Java REST API Frameworks - Seattle JUG 2022
mraible
PRO
1
190
わかった気になれる CRDT を使った共同編集
kentomoriwaki
1
320
Laravel を低速化する技術 / how to slow laravel
hanhan1978
PRO
0
1.1k
Micro Frontends: Yesterday, Today, Tomorrow
manfredsteyer
PRO
0
170
The Lesser-Known Kotlin Features
antonarhipov
0
260
切り取り方を工夫してアプリケーションを漸進的に改善する / Incremental improvement by devising application change boundaries
yammerjp
1
130
IaC運用してみて感じた 素晴らしさとアンチパターン
yuki_kurono
0
160
技育展登壇資料 Omochi
yadayuki
0
120
Lecture №2.3. Concepts
baramiyadenis
0
270
比較演算を壊してみる / php-break-comparison
yammerjp
1
160
Git 未経験者 が GitHub Actions で もがいた話 / 20220914 git beginner uses github actions
mackey0225
1
410

Featured

See All Featured
Designing with Data
zakiwarfel
91
4k
Navigating Team Friction
lara
175
11k
The Language of Interfaces
destraynor
148
21k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Side Projects
sachag
451
37k
For a Future-Friendly Web
brad_frost
166
7.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
21
1.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
8
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.7k

Transcript

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

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