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 を 使って Web ブラウザを動かしてみよう!
Search
02
August 13, 2019
Programming
1
490
Puppeteer を 使って Web ブラウザを動かしてみよう!
8/13 サポーターズ Colab 勉強会の登壇資料です。
02
August 13, 2019
Tweet
Share
More Decks by 02
See All by 02
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
300
PHP RFC: Deprecate implicitly nullable parameter types をサクッと話す
cocoeyes02
0
350
PHPUnit 11 概論
cocoeyes02
4
1.8k
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
1
880
BASEにおける インシデント対応フローと工夫
cocoeyes02
0
1.1k
AWS Lambdaから始める Devチームの小さなDevOps改善 〜QCDどれも諦めない運用を目指して〜 / Start to improving small DevOps with AWS Lambda by Dev Team
cocoeyes02
0
1.3k
PHPUnit 10 概論 / Introduction of PHPUnit 10
cocoeyes02
3
8.9k
テスト駆動開発本をPHPで写経してみた / Copy Test Driven Development Code by PHP
cocoeyes02
0
470
テストコードリーディングのみでPHPUnitの仕様を理解してみる / Try to understand PHPUnit specification with test code reading only
cocoeyes02
1
2.7k
Other Decks in Programming
See All in Programming
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
200
CloudNativePGを布教したい
nnaka2992
0
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
バッチを作らなきゃとなったときに考えること
irof
2
530
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
160
SwiftUI Viewの責務分離
elmetal
PRO
2
270
PEPCは何を変えようとしていたのか
ken7253
2
240
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
sappoRo.R #12 初心者セッション
kosugitti
0
280
Jasprが凄い話
hyshu
0
160
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
A Tale of Four Properties
chriscoyier
158
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Making Projects Easy
brettharned
116
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Navigating Team Friction
lara
183
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
KATA
mclloyd
29
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
Puppeteer Λ ͬͯ Web ϒϥβΛ ಈ͔ͯ͠ΈΑ͏ʂ 02 8/13αϙʔλʔζ Colab ษڧձ
ΞδΣϯμ • ࣗݾհ • Puppeteer ͱԿ͔ • Puppeteer ͰͰ͖Δ͜ͱ •
Puppeteer ͷϝϦοτ / σϝϦοτ • ϋϯζΦϯ • Puppeteer ͏࣌ͷҙ
ࣗݾհ • 02 ʢେ ௬ʣ • Twitter, Github:cocoeyes02 • גࣜձࣾΟϧήʔτ
• όοΫΤϯυʢPHP(Laravel), GolangʣΤϯδχΞ • ۦ͚ग़͠QAΤϯδχΞ • ͨ·ʔʹOSSͷίϯτϏϡʔτͯͨ͠Γ͠·͢
Puppeteer ͱԿ͔
Puppeteer ͱԿ͔ • Headless Chrome • Google Chrome ͕ఏڙ͍ͯ͠Δɺը໘Λද ࣔͤͣʹಈ࡞͢ΔϞʔυ
Puppeteer ͱԿ͔ • Puppeteer • Google Chrome νʔϜ͕࡞͍ͬͯΔ Headless Chrome
Λૢ࡞͢Δ Node ϥΠϒϥϦ • ≒ ը໘্Ͱݟ͑ͳ͍ Chrome ΛࣗಈͰૢ࡞͢Δ Google ެࣜπʔϧ • ͱݴ͍ͭͭɺ ը໘্ʹදࣔ͢ΔઃఆͰ͖·͢
Puppeteer ͱԿ͔
Puppeteer ͱԿ͔
Puppeteer ͰͰ͖Δ͜ͱ
Ͱ͖Δಈ࡞ • εΫϦʔϯγϣοτΛࡱΔ • URL Λࢦఆͯ͠ભҠ͢Δ • ϑΥʔϜೖྗɺϘλϯΫϦοΫɺΩʔϘʔυೖྗͳͲ • JS
Λͬͯ DOM ͷૢ࡞Λ͢Δ • etc…
༻ྫ • ʑͷ࡞ۀΛޮԽ͍ͨ͠ʂ • ۈଵೖྗΛࣗಈԽ͢Δ • γϥόεͷใΛऔಘ͢Δ
༻ྫ • ͋ΔαΠτΛεΫϨΠϐϯά͍ͨ͠ʂ • ωοτΦʔΫγϣϯͷՁ֨มಈΛεΫϨΠ ϐϯά͢Δ • ※εΫϨΠϐϯά = ΣϒαΠτͷHTML͔
ΒඞཁͳσʔλΛऔಘ͢Δ
༻ྫ • ϓϩμΫτͷ E2E ςετʢࣗಈϒϥβςε τʣΛॻ͖͍ͨʂ • ϩάΠϯ ~ CV
ୡͷྲྀΕΛɺ11ճࣗಈԽ ֬ೝ͢Δ
Puppeteer ͷ ϝϦοτ / σϝϦοτ
Puppeteer ͷϝϦοτ • ڥߏஙָ͕ • Chrome ຊମΛͬͯςετͰ͖Δ • Headless Chrome
ɺChrome ຊମͷػೳ • ެࣜυΩϡϝϯτΛ࢝Ίɺจݙ͕๛ • Google ͕ϝϯςφϯε͍ͯ͠ΔͷͰɺͬͺΓ҆৺ײ ͕͋Δ
Puppeteer ͷσϝϦοτ • ΫϩεϒϥβςετʢෳϒϥβͰͷςετʣΛ͍ͨ͠ ਓʹ͍͍ͯͳ͍ • Safari IE ͳͲͰ
Puppeteer ͑ͳ͍ • Firefox β൛͕ͩҰԠͰ͖Δ͠ɺChromium ϕʔεͷ Edge Ͱ͋ΕແཧΓ͍͡ΕͰ͖Δ • ଞͷݴޠΛ͍͍ͨɺjavascript ΛͲ͏͍ͯͨ͘͠ͳ͍ ਓ͍ͯͳ͍
ϋϯζΦϯ
node ͕ೖ͍ͬͯΔ͔֬ೝ • node -v Λλʔϛφϧ or ίϚϯυϓϩϯϓτ Ͱ࣮ߦͯ֬͠ೝ
όʔδϣϯ͕දࣔ͞Εͳ͔ͬͨ ํ • Mac • /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/
install/master/install)” • brew install nodebrew • nodebrew install-binary latest • nodebrew use latest • Windows • ҎԼ͔ΒΠϯετʔϥʔΛDL࣮͠ߦ • http://nodejs.org/
npm ͕ೖ͍ͬͯΔ͔֬ೝ • npm —version Λλʔϛφϧ or ίϚϯυϓϩ ϯϓτͰ࣮ߦͯ֬͠ೝ
ॾʑ࡞ • mkdir puppeteer_handson • cd puppeteer_handson • npm init
• શ෦ Enter ͰOK • npm install puppeteer
εΫϦϓτϑΝΠϧ࡞ • ҎԼͷαΠτ͔ΒɺεΫϦϓτΛίϐʔ͢Δ • https://gist.github.com/ cocoeyes02/7c2cc9caacb4e14d0827d9d43ef7e51d • touch colab.js •
vi colab.js • ฤूϞʔυʢiʣ • ϖʔετ͢Δ • อଘ͢Δʢ:wqʣ
εΫϦϓτϑΝΠϧ࡞ • node colab.js Λ࣮ߦ͢Δ • ͏·͍͚͘ɺλʔϛφϧ or ίϚϯυϓϩ ϯϓτͷը໘ʹ
json ܗࣜͷจࣈྻ͕දࣔ͞ Ε·͢
Puppeteer Λ͏࣌ͷҙ
࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • 20103݄ࠒɺࢢຽ͔Β Ԭ࡚ࢢཱਤॻؗͷΣϒαΠτ ͷଂॻݕࡧγεςϜʹର͠ଓ͕ग़དྷͳ͍ͱ͕ۤ͋Γɺ ͦͷޙΣϒαΠτͷӾཡ͕ࠔʹͳΔࣄଶ͕૬͍࣍ ͩɻ •
5݄25ʹΞΫηεΛߦ͍ͬͯͨஉੑ͕ଂॻݕࡧγεςϜ ʹߴසͷϦΫΤετΛނҙʹૹΓ͚ͭͨͱِͯ͠ܭۀ ༰ٙͰୁั͞Εͨɻ
࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • உੑ͕࣮ࡍʹߦ͍ͬͯͨͷɺଂॻݕࡧγες Ϝͷ͍উखʹຬ͠ͳ͔ͬͨͨΊࣗͰ࡞ ͨ͠ΫϩʔϥΛ࣮ߦ͠ɺଂॻݕࡧγεςϜ͔Β ਤॻใΛऔಘ͢Δ͜ͱͰ͋ͬͨɻ • ࢀরɿԬ࡚ࢢཱதԝਤॻؗࣄ݅
- Wikipedia
͜͏͍͏ͷͬͪΌμϝʂ • ར༻نͰεΫϨΠϐϯάΛېࢭ͍ͯ͠ΔαΠτ ͰɺεΫϨΠϐϯάΛͨ͠ • εΫϨΠϐϯάͷස͕ߴ͘ɺαʔόʹର͢Δ ෛՙ͕େ͖͔ͬͨނʹαʔόΛམͱͯ͠͠·ͬͨ • εΫϨΠϐϯάʹΑΓऔಘͨ͠ใΛෆਖ਼ʹ ༻͢Δ
ར༻نͰεΫϨΠϐϯάΛېࢭͯ͠ ͍ΔαΠτͰɺεΫϨΠϐϯάΛͨ͠ • ͪΌΜͱར༻نΛಡΈ·͠ΐ͏ • ex. Facebook • 2. FacebookͰڞ༗Մೳͳίϯςϯπ͓ΑͼೝΊΒΕΔߦҝ
• ฐ͔ࣾΒࣄલͷڐՄΛಘΔ͜ͱͳ͘ɺࣗಈԽ͞ΕͨखஈΛ ༻͍ͯͷσʔλʹΞΫηεͨ͠ΓσʔλΛऔಘͨ͠Γ ͢Δ͜ͱɺΞΫηεڐՄͷͳ͍σʔλͷΞΫηεΛࢼ ΈΔ͜ͱΛېࢭ͠·͢ɻ
εΫϨΠϐϯάͷස͕ߴ͘ɺ αʔόʹର͢Δෛՙ͕େ͖͔ͬͨނʹ αʔόΛམͱͯ͠͠·ͬͨ • Լख͢Δͱِܭۀʹͳͬͯ͠·͏͜ͱ… • ex. Librahackࣄ݅ʮ1࣌ؒʹ400Ҏ্ϦΫΤετΛૹΒ ΕΔͱଞͷϦΫΤετͷॲཧ͕ෆՄೳʹͳΔෆ۩߹Λ ؚΜͰ͍ͨʯ
• աͳ༻߇͑·͠ΐ͏ • উख͕Θ͔Βͳ͚ΕɺਓؒͷखͰͰ͖ΔൣғͷϦΫ Τετ͕ແ
εΫϨΠϐϯάʹΑΓऔಘͨ͠ ใΛෆਖ਼ʹ༻͢Δ • ࢲతར༻Ͱ͋ΕOK • ͜͏͍͏ͷNG • ༻తͰ͏ • εΫϨΠϐϯάͷ݁Ռɺ͘͠Ճͨ͠ͷΛଞऀ
ʹެ։͢Δ • etc..
ͦͷଞ • ͪ͜Β߹ΘͤͯಡΈ·͠ΐ͏ • WebεΫϨΠϐϯάͷҙࣄ߲Ұཡ - Qiita @nezuq • https://qiita.com/nezuq/items/
c5e827e1827e7cb29011
·ͱΊ
·ͱΊ • Puppeteer ը໘্Ͱݟ͑ͳ͍ Chrome ΛࣗಈͰ ૢ࡞͢Δ Google ެࣜπʔϧ •
ڥߏஙָͰɺεΫϨΠϐϯάࣗಈϒϥβς ετΛ࢝ΊΔʹ͍ͬͯ͜ • Puppeteer Λར༻ͨ͠εΫϨΠϐϯάʹ͍ͭͯɺ ๏త͕Ͳ͏ͯ͠ආ͚ΒΕͳ͍ͷͰௐͳ͕Β ͬͯͶ