Puppeteer を 使って Web ブラウザを動かしてみよう！

8/13 サポーターズ Colab 勉強会の登壇資料です。

Transcript

1. Puppeteer Λ ࢖ͬͯ Web ϒϥ΢βΛ ಈ͔ͯ͠ΈΑ͏ʂ 02 8/13αϙʔλʔζ Colab ษڧձ
2. ΞδΣϯμ • ࣗݾ঺հ • Puppeteer ͱ͸Կ͔ • Puppeteer ͰͰ͖Δ͜ͱ • Puppeteer ͷϝϦοτ / σϝϦοτ • ϋϯζΦϯ • Puppeteer ࢖͏࣌ͷ஫ҙ఺
3. ࣗݾ঺հ • 02 ʢେ௡ ࿨௬ʣ • Twitter, Github:cocoeyes02 • גࣜձࣾ΢Οϧήʔτ • όοΫΤϯυʢPHP(Laravel), GolangʣΤϯδχΞ • ۦ͚ग़͠QAΤϯδχΞ • ͨ·ʔʹOSSͷίϯτϏϡʔτͯͨ͠Γ͠·͢
4. Puppeteer ͱ͸Կ͔
5. Puppeteer ͱ͸Կ͔ • Headless Chrome • Google Chrome ͕ఏڙ͍ͯ͠Δɺը໘Λද ࣔͤͣʹಈ࡞͢ΔϞʔυ
6. Puppeteer ͱ͸Կ͔ • Puppeteer • Google Chrome νʔϜ͕࡞͍ͬͯΔ Headless Chrome Λૢ࡞͢Δ Node ϥΠϒϥϦ • ≒ ը໘্Ͱ͸ݟ͑ͳ͍ Chrome ΛࣗಈͰૢ࡞͢Δ Google ެࣜπʔϧ • ͱݴ͍ͭͭɺ ը໘্ʹදࣔ͢Δઃఆ΋Ͱ͖·͢
7. Puppeteer ͱ͸Կ͔
8. Puppeteer ͱ͸Կ͔
9. Puppeteer ͰͰ͖Δ͜ͱ
10. Ͱ͖Δಈ࡞ • εΫϦʔϯγϣοτΛࡱΔ • URL Λࢦఆͯ͠ભҠ͢Δ • ϑΥʔϜೖྗɺϘλϯΫϦοΫɺΩʔϘʔυೖྗͳͲ • JS Λ࢖ͬͯ DOM ͷૢ࡞Λ͢Δ • etc…
11. ࢖༻ྫ • ೔ʑͷ࡞ۀΛޮ཰Խ͍ͨ͠ʂ • ۈଵೖྗΛࣗಈԽ͢Δ • γϥόεͷ৘ใΛऔಘ͢Δ
12. ࢖༻ྫ • ͋ΔαΠτΛεΫϨΠϐϯά͍ͨ͠ʂ • ωοτΦʔΫγϣϯͷՁ֨มಈΛεΫϨΠ ϐϯά͢Δ • ※εΫϨΠϐϯά = ΢ΣϒαΠτͷHTML͔ ΒඞཁͳσʔλΛऔಘ͢Δ
13. ࢖༻ྫ • ϓϩμΫτͷ E2E ςετʢࣗಈϒϥ΢βςε τʣΛॻ͖͍ͨʂ • ϩάΠϯ ~ CV ୡ੒ͷྲྀΕΛɺ1೔1ճࣗಈԽ ֬ೝ͢Δ
14. Puppeteer ͷ ϝϦοτ / σϝϦοτ
15. Puppeteer ͷϝϦοτ • ؀ڥߏஙָ͕ • Chrome ຊମΛ࢖ͬͯςετͰ͖Δ • Headless Chrome ͸ɺChrome ຊମͷػೳ • ެࣜυΩϡϝϯτΛ࢝Ίɺจݙ͕๛෋ • Google ͕ϝϯςφϯε͍ͯ͠ΔͷͰɺ΍ͬͺΓ҆৺ײ ͕͋Δ
16. Puppeteer ͷσϝϦοτ • Ϋϩεϒϥ΢βςετʢෳ਺ϒϥ΢βͰͷςετʣΛ͍ͨ͠ ਓʹ͸޲͍͍ͯͳ͍ • Safari ΍ IE ͳͲͰ͸ Puppeteer ͸࢖͑ͳ͍ • Firefox ͸β൛͕ͩҰԠͰ͖Δ͠ɺChromium ϕʔεͷ Edge Ͱ͋Ε͹ແཧ΍Γ͍͡Ε͹Ͱ͖Δ • ଞͷݴޠΛ࢖͍͍ͨɺjavascript ΛͲ͏ͯ͠΋࢖͍ͨ͘ͳ͍ ਓ͸޲͍ͯͳ͍
17. ϋϯζΦϯ
18. node ͕ೖ͍ͬͯΔ͔֬ೝ • node -v Λλʔϛφϧ or ίϚϯυϓϩϯϓτ Ͱ࣮ߦͯ֬͠ೝ
19. όʔδϣϯ͕දࣔ͞Εͳ͔ͬͨ ํ • 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/
20. npm ͕ೖ͍ͬͯΔ͔֬ೝ • npm —version Λλʔϛφϧ or ίϚϯυϓϩ ϯϓτͰ࣮ߦͯ֬͠ೝ
21. ॾʑ࡞੒ • mkdir puppeteer_handson • cd puppeteer_handson • npm init • શ෦ Enter ͰOK • npm install puppeteer
22. εΫϦϓτϑΝΠϧ࡞੒ • ҎԼͷαΠτ͔ΒɺεΫϦϓτΛίϐʔ͢Δ • https://gist.github.com/ cocoeyes02/7c2cc9caacb4e14d0827d9d43ef7e51d • touch colab.js • vi colab.js • ฤूϞʔυ΁ʢiʣ • ϖʔετ͢Δ • อଘ͢Δʢ:wqʣ
23. εΫϦϓτϑΝΠϧ࡞੒ • node colab.js Λ࣮ߦ͢Δ • ͏·͍͚͘͹ɺλʔϛφϧ or ίϚϯυϓϩ ϯϓτͷը໘ʹ json ܗࣜͷจࣈྻ͕දࣔ͞ Ε·͢
24. Puppeteer Λ࢖͏࣌ͷ஫ҙ఺
25. ࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • 2010೥3݄ࠒɺࢢຽ͔Β Ԭ࡚ࢢཱਤॻؗͷ΢ΣϒαΠτ ͷଂॻݕࡧγεςϜʹର͠઀ଓ͕ग़དྷͳ͍ͱۤ৘͕͋Γɺ ͦͷޙ΋΢ΣϒαΠτͷӾཡ͕ࠔ೉ʹͳΔࣄଶ͕૬͍࣍ ͩɻ • 5݄25೔ʹΞΫηεΛߦ͍ͬͯͨஉੑ͕ଂॻݕࡧγεςϜ ʹߴස౓ͷϦΫΤετΛނҙʹૹΓ͚ͭͨͱِͯ͠ܭۀ຿ ๦֐༰ٙͰୁั͞Εͨɻ
26. ࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • உੑ͕࣮ࡍʹߦ͍ͬͯͨͷ͸ɺଂॻݕࡧγες Ϝͷ࢖͍উखʹຬ଍͠ͳ͔ͬͨͨΊࣗ਎Ͱ࡞੒ ͨ͠ΫϩʔϥΛ࣮ߦ͠ɺଂॻݕࡧγεςϜ͔Β ਤॻ৘ใΛऔಘ͢Δ͜ͱͰ͋ͬͨɻ • ࢀরɿԬ࡚ࢢཱதԝਤॻؗࣄ݅ - Wikipedia
27. ͜͏͍͏ͷ͸΍ͬͪΌμϝʂ • ར༻ن໿ͰεΫϨΠϐϯάΛېࢭ͍ͯ͠ΔαΠτ ͰɺεΫϨΠϐϯάΛͨ͠ • εΫϨΠϐϯάͷස౓͕ߴ͘ɺαʔόʹର͢Δ ෛՙ͕େ͖͔ͬͨނʹαʔόΛམͱͯ͠͠·ͬͨ • εΫϨΠϐϯάʹΑΓऔಘͨ͠৘ใΛෆਖ਼ʹ࢖ ༻͢Δ
28. ར༻ن໿ͰεΫϨΠϐϯάΛېࢭͯ͠ ͍ΔαΠτͰɺεΫϨΠϐϯάΛͨ͠ • ͪΌΜͱར༻ن໿ΛಡΈ·͠ΐ͏ • ex. Facebook • 2. FacebookͰڞ༗Մೳͳίϯςϯπ͓ΑͼೝΊΒΕΔߦҝ • ฐ͔ࣾΒࣄલͷڐՄΛಘΔ͜ͱͳ͘ɺࣗಈԽ͞ΕͨखஈΛ ༻͍ͯ੡඼ͷσʔλʹΞΫηεͨ͠ΓσʔλΛऔಘͨ͠Γ ͢Δ͜ͱ΍ɺΞΫηεڐՄͷͳ͍σʔλ΁ͷΞΫηεΛࢼ ΈΔ͜ͱΛېࢭ͠·͢ɻ
29. εΫϨΠϐϯάͷස౓͕ߴ͘ɺ αʔόʹର͢Δෛՙ͕େ͖͔ͬͨނʹ αʔόΛམͱͯ͠͠·ͬͨ • Լख͢Δͱِܭۀ຿๦֐ʹͳͬͯ͠·͏͜ͱ΋… • ex. Librahackࣄ݅ʮ1࣌ؒʹ400Ҏ্ϦΫΤετΛૹΒ ΕΔͱଞͷϦΫΤετͷॲཧ͕ෆՄೳʹͳΔෆ۩߹Λ ؚΜͰ͍ͨʯ • ա౓ͳ࢖༻͸߇͑·͠ΐ͏ • উख͕Θ͔Βͳ͚Ε͹ɺਓؒͷखͰͰ͖ΔൣғͷϦΫ Τετ͕ແ೉
30. εΫϨΠϐϯάʹΑΓऔಘͨ͠ ৘ใΛෆਖ਼ʹ࢖༻͢Δ • ࢲతར༻Ͱ͋Ε͹OK • ͜͏͍͏ͷ͸NG • ঎༻໨తͰ࢖͏ • εΫϨΠϐϯάͷ݁Ռɺ΋͘͠͸Ճ޻ͨ͠΋ͷΛଞऀ ʹެ։͢Δ • etc..
31. ͦͷଞ • ͪ͜Β΋߹ΘͤͯಡΈ·͠ΐ͏ • WebεΫϨΠϐϯάͷ஫ҙࣄ߲Ұཡ - Qiita @nezuq • https://qiita.com/nezuq/items/ c5e827e1827e7cb29011
32. ·ͱΊ
33. ·ͱΊ • Puppeteer ͸ը໘্Ͱ͸ݟ͑ͳ͍ Chrome ΛࣗಈͰ ૢ࡞͢Δ Google ެࣜπʔϧ • ؀ڥߏங΋ָͰɺεΫϨΠϐϯά΍ࣗಈϒϥ΢βς ετΛ࢝ΊΔʹ͸΋͍ͬͯ͜ • Puppeteer Λར༻ͨ͠εΫϨΠϐϯάʹ͍ͭͯ͸ɺ ๏త໰୊͕Ͳ͏ͯ͠΋ආ͚ΒΕͳ͍ͷͰௐ΂ͳ͕Β ΍ͬͯͶ