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

Puppeteer と GAS を利用した Web 監視

5abf9d4714b77a15beea063d08586560?s=47 howdy39
April 03, 2018
Programming
1
1.1k

Puppeteer と GAS を利用した Web 監視

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

5abf9d4714b77a15beea063d08586560?s=128

howdy39

April 03, 2018
Tweet

More Decks by howdy39

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

Other Decks in Programming

See All in Programming
テスト設計技法をなぜ＆どのように使うのか体験しよう！
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
480
Nix for Scala folks
08f642741fba006656cb86fb61c160b3?s=48 kubukoz
0
130
TextPruner による大規模言語モデルの軽量化 / Large language model pruning using TextPruner
0c60fb0fa226940755988c40b28e0c19?s=48 misawann
0
280
Let's make a contract: the art of designing a Java API
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
0
160
Node.js 最新動向 TFCon 2022
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
6
2.9k
You CANt teach an old dog new tricks
Bd5b8981a308c94b642befb656d8cf8f?s=48 michaelbukachi
0
120
ソフトウェアテストなんて他人事！
だと思っていた私が始めた小さな取り組み
A524e2bed737555446c8720e3960397e?s=48 izumii19
0
200
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
130
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
2.7k
byte列のbit表現を得るencodingライブラリ作った
66487f93d23ed4f64752cffbafdb938a?s=48 convto
1
180
機能横断型チームにおける技術改善
63b77df425b26126961817a39969a660?s=48 takeshiakutsu
3
480
よりUXに近いSLI・SLOの運用による可用性の再設計
953d2907b80dd5955c561d695ea9a494?s=48 kazumanagano
3
770

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.5k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.6k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.6k
A Modern Web Designer's Workflow
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
689
180k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
3
440
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
34
6.1k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
GraphQLの誤解/rethinking-graphql
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
24
6.2k

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