Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Puppeteer と GAS を利用した Web 監視
Search
howdy39
April 03, 2018
Programming
1
1.8k
Puppeteer と GAS を利用した Web 監視
ソース公開しています
https://github.com/howdy39/web-update-notification
howdy39
April 03, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
960
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
490
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
540
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.3k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.2k
Promise
howdy39
1
290
カラーユニバーサルデザイン / color universal design
howdy39
0
700
Geolocation API
howdy39
0
92
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
180
Other Decks in Programming
See All in Programming
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
How to use Macrobenchmark
veronikapj
0
160
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
CSC307 Lecture 08
javiergs
PRO
0
330
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
Featured
See All Featured
A Philosophy of Restraint
colly
200
16k
Designing the Hi-DPI Web
ddemaree
276
34k
Become a Pro
speakerdeck
PRO
15
4.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Visualization
eitanlees
139
14k
Music & Morning Musume
bryan
43
5.9k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
YesSQL, Process and Tooling at Scale
rocio
166
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Rails Girls Zürich Keynote
gr2m
93
13k
Adopting Sorbet at Scale
ufuk
71
8.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
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 で通知