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
1.1k
Puppeteer と GAS を利用した Web 監視
ソース公開しています
https://github.com/howdy39/web-update-notification
howdy39
April 03, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
400
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
7.2k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
1.7k
Promise
howdy39
0
160
カラーユニバーサルデザイン / color universal design
howdy39
0
340
Geolocation API
howdy39
0
58
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
91
Media Queries
howdy39
0
46
First_Paintと_クリティカルレンダリングパス
howdy39
0
200
Other Decks in Programming
See All in Programming
テスト設計技法をなぜ&どのように使うのか体験しよう!
imtnd
0
480
Nix for Scala folks
kubukoz
0
130
TextPruner による大規模言語モデルの軽量化 / Large language model pruning using TextPruner
misawann
0
280
Let's make a contract: the art of designing a Java API
mariofusco
0
160
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
2.9k
You CANt teach an old dog new tricks
michaelbukachi
0
120
ソフトウェアテストなんて他人事! だと思っていた私が始めた小さな取り組み
izumii19
0
200
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-systems
grapecity_dev
0
130
Get Ready for Jakarta EE 10
ivargrimstad
0
2.7k
byte列のbit表現を得るencodingライブラリ作った
convto
1
180
機能横断型チームにおける技術改善
takeshiakutsu
3
480
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
770
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Happy Clients
brianwarren
89
5.5k
Three Pipe Problems
jasonvnalue
89
8.6k
Designing for humans not robots
tammielis
241
23k
Building Adaptive Systems
keathley
25
1.1k
Practical Orchestrator
shlominoach
178
8.6k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Design by the Numbers
sachag
271
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
440
Product Roadmaps are Hard
iamctodd
34
6.1k
Faster Mobile Websites
deanohume
294
28k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
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 で通知