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

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 Λར༻ͨ͠εΫϨΠϐϯάʹ͍ͭͯ͸ɺ ๏త໰୊͕Ͳ͏ͯ͠΋ආ͚ΒΕͳ͍ͷͰௐ΂ͳ͕Β ΍ͬͯͶ