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
2k
Puppeteer と GAS を利用した Web 監視
ソース公開しています
https://github.com/howdy39/web-update-notification
howdy39
April 03, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
480
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
150
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.3k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
610
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
630
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.5k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
Promise
howdy39
1
340
カラーユニバーサルデザイン / color universal design
howdy39
0
860
Other Decks in Programming
See All in Programming
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
700
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
340
CQRS+ES勉強会#1
rechellatek
0
400
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
RCPと宣言型ポリシーについてのお話し
kokitamura
2
150
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
120
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
240
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
7
3.8k
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
110
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
160
Featured
See All Featured
Statistics for Hackers
jakevdp
798
220k
Code Reviewing Like a Champion
maltzj
522
39k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
GraphQLとの向き合い方2022年版
quramy
45
14k
Documentation Writing (for coders)
carmenintech
69
4.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
Docker and Python
trallard
44
3.3k
A designer walks into a library…
pauljervisheath
205
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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 で通知