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
430
Puppeteer を 使って Web ブラウザを動かしてみよう!
8/13 サポーターズ Colab 勉強会の登壇資料です。
02
August 13, 2019
Tweet
Share
More Decks by 02
See All by 02
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
310
BASEにおける インシデント対応フローと工夫
cocoeyes02
0
690
AWS Lambdaから始める Devチームの小さなDevOps改善 〜QCDどれも諦めない運用を目指して〜 / Start to improving small DevOps with AWS Lambda by Dev Team
cocoeyes02
0
1.1k
PHPUnit 10 概論 / Introduction of PHPUnit 10
cocoeyes02
2
5.7k
テスト駆動開発本をPHPで写経してみた / Copy Test Driven Development Code by PHP
cocoeyes02
0
320
テストコードリーディングのみでPHPUnitの仕様を理解してみる / Try to understand PHPUnit specification with test code reading only
cocoeyes02
1
2.3k
カンファレンススピーカー入門〜登壇するぞ!って決めてからトークするまで〜 / How to talk in Tech Conference
cocoeyes02
2
1k
コミットメッセージ規約 「Conventional Commits」を導入してみよう! / Let's use Conventional Commits
cocoeyes02
8
8.5k
Composer 2.0 新機能概論 / New feature introduction of Composer 2.0
cocoeyes02
1
2.2k
Other Decks in Programming
See All in Programming
Next.js App Router
quramy
14
2.3k
一文字エイリアスのすすめ
fujimura
0
200
Let's learn code review
riofujimon
2
640
JavaScript Closure
asoluka
0
2k
Deep Dive into React Stream/Serialize
mugi_uno
4
860
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
Productivity is Messing Around and Having Fun
hollycummins
1
180
WebGLで始める コンピュータグラフィックス入門
heller77
0
370
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
210
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
250
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
49
30k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Become a Pro
speakerdeck
PRO
13
4.6k
Designing with Data
zakiwarfel
96
4.8k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Statistics for Hackers
jakevdp
790
220k
Code Review Best Practice
trishagee
56
15k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
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 Λར༻ͨ͠εΫϨΠϐϯάʹ͍ͭͯɺ ๏త͕Ͳ͏ͯ͠ආ͚ΒΕͳ͍ͷͰௐͳ͕Β ͬͯͶ