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
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
340
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
53
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.1k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
520
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
560
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.4k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.3k
Promise
howdy39
1
300
カラーユニバーサルデザイン / color universal design
howdy39
0
760
Other Decks in Programming
See All in Programming
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
140
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
540
Go製CLIツールGatling Commanderによる負荷試験実施の自動化
okmtz
3
700
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
530
sqlcを利用してsqlに型付けを
kamiyam
0
240
データフレームライブラリ徹底比較
daikikatsuragawa
2
100
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
120
Introduce dRuby
ledsun
0
120
Subclassing, Composition, Python, and You
hynek
3
170
Cohesion in Modeling and Design
mploed
3
210
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.2k
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
190
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
230
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
What's in a price? How to price your products and services
michaelherold
243
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Happy Clients
brianwarren
97
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.8k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
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 で通知