Tweet
Tweet

Slide 1

Slide 1 text

Puppeteer Λ ࢖ͬͯ Web ϒϥ΢βΛ ಈ͔ͯ͠ΈΑ͏ʂ 02 8/13αϙʔλʔζ Colab ษڧձ

Slide 2

Slide 2 text

ΞδΣϯμ • ࣗݾ঺հ • Puppeteer ͱ͸Կ͔ • Puppeteer ͰͰ͖Δ͜ͱ • Puppeteer ͷϝϦοτ / σϝϦοτ • ϋϯζΦϯ • Puppeteer ࢖͏࣌ͷ஫ҙ఺

Slide 3

Slide 3 text

ࣗݾ঺հ • 02 ʢେ௡ ࿨௬ʣ • Twitter, Github:cocoeyes02 • גࣜձࣾ΢Οϧήʔτ • όοΫΤϯυʢPHP(Laravel), GolangʣΤϯδχΞ • ۦ͚ग़͠QAΤϯδχΞ • ͨ·ʔʹOSSͷίϯτϏϡʔτͯͨ͠Γ͠·͢

Slide 4

Slide 4 text

Puppeteer ͱ͸Կ͔

Slide 5

Slide 5 text

Puppeteer ͱ͸Կ͔ • Headless Chrome • Google Chrome ͕ఏڙ͍ͯ͠Δɺը໘Λද ࣔͤͣʹಈ࡞͢ΔϞʔυ

Slide 6

Slide 6 text

Puppeteer ͱ͸Կ͔ • Puppeteer • Google Chrome νʔϜ͕࡞͍ͬͯΔ Headless Chrome Λૢ࡞͢Δ Node ϥΠϒϥϦ • ≒ ը໘্Ͱ͸ݟ͑ͳ͍ Chrome ΛࣗಈͰૢ࡞͢Δ Google ެࣜπʔϧ • ͱݴ͍ͭͭɺ ը໘্ʹදࣔ͢Δઃఆ΋Ͱ͖·͢

Slide 7

Slide 7 text

Puppeteer ͱ͸Կ͔

Slide 8

Slide 8 text

Puppeteer ͱ͸Կ͔

Slide 9

Slide 9 text

Puppeteer ͰͰ͖Δ͜ͱ

Slide 10

Slide 10 text

Ͱ͖Δಈ࡞ • εΫϦʔϯγϣοτΛࡱΔ • URL Λࢦఆͯ͠ભҠ͢Δ • ϑΥʔϜೖྗɺϘλϯΫϦοΫɺΩʔϘʔυೖྗͳͲ • JS Λ࢖ͬͯ DOM ͷૢ࡞Λ͢Δ • etc…

Slide 11

Slide 11 text

࢖༻ྫ • ೔ʑͷ࡞ۀΛޮ཰Խ͍ͨ͠ʂ • ۈଵೖྗΛࣗಈԽ͢Δ • γϥόεͷ৘ใΛऔಘ͢Δ

Slide 12

Slide 12 text

࢖༻ྫ • ͋ΔαΠτΛεΫϨΠϐϯά͍ͨ͠ʂ • ωοτΦʔΫγϣϯͷՁ֨มಈΛεΫϨΠ ϐϯά͢Δ • ※εΫϨΠϐϯά = ΢ΣϒαΠτͷHTML͔ ΒඞཁͳσʔλΛऔಘ͢Δ

Slide 13

Slide 13 text

࢖༻ྫ • ϓϩμΫτͷ E2E ςετʢࣗಈϒϥ΢βςε τʣΛॻ͖͍ͨʂ • ϩάΠϯ ~ CV ୡ੒ͷྲྀΕΛɺ1೔1ճࣗಈԽ ֬ೝ͢Δ

Slide 14

Slide 14 text

Puppeteer ͷ ϝϦοτ / σϝϦοτ

Slide 15

Slide 15 text

Puppeteer ͷϝϦοτ • ؀ڥߏஙָ͕ • Chrome ຊମΛ࢖ͬͯςετͰ͖Δ • Headless Chrome ͸ɺChrome ຊମͷػೳ • ެࣜυΩϡϝϯτΛ࢝Ίɺจݙ͕๛෋ • Google ͕ϝϯςφϯε͍ͯ͠ΔͷͰɺ΍ͬͺΓ҆৺ײ ͕͋Δ

Slide 16

Slide 16 text

Puppeteer ͷσϝϦοτ • Ϋϩεϒϥ΢βςετʢෳ਺ϒϥ΢βͰͷςετʣΛ͍ͨ͠ ਓʹ͸޲͍͍ͯͳ͍ • Safari ΍ IE ͳͲͰ͸ Puppeteer ͸࢖͑ͳ͍ • Firefox ͸β൛͕ͩҰԠͰ͖Δ͠ɺChromium ϕʔεͷ Edge Ͱ͋Ε͹ແཧ΍Γ͍͡Ε͹Ͱ͖Δ • ଞͷݴޠΛ࢖͍͍ͨɺjavascript ΛͲ͏ͯ͠΋࢖͍ͨ͘ͳ͍ ਓ͸޲͍ͯͳ͍

Slide 17

Slide 17 text

ϋϯζΦϯ

Slide 18

Slide 18 text

node ͕ೖ͍ͬͯΔ͔֬ೝ • node -v Λλʔϛφϧ or ίϚϯυϓϩϯϓτ Ͱ࣮ߦͯ֬͠ೝ

Slide 19

Slide 19 text

όʔδϣϯ͕දࣔ͞Εͳ͔ͬͨ ํ • 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/

Slide 20

Slide 20 text

npm ͕ೖ͍ͬͯΔ͔֬ೝ • npm —version Λλʔϛφϧ or ίϚϯυϓϩ ϯϓτͰ࣮ߦͯ֬͠ೝ

Slide 21

Slide 21 text

ॾʑ࡞੒ • mkdir puppeteer_handson • cd puppeteer_handson • npm init • શ෦ Enter ͰOK • npm install puppeteer

Slide 22

Slide 22 text

εΫϦϓτϑΝΠϧ࡞੒ • ҎԼͷαΠτ͔ΒɺεΫϦϓτΛίϐʔ͢Δ • https://gist.github.com/ cocoeyes02/7c2cc9caacb4e14d0827d9d43ef7e51d • touch colab.js • vi colab.js • ฤूϞʔυ΁ʢiʣ • ϖʔετ͢Δ • อଘ͢Δʢ:wqʣ

Slide 23

Slide 23 text

εΫϦϓτϑΝΠϧ࡞੒ • node colab.js Λ࣮ߦ͢Δ • ͏·͍͚͘͹ɺλʔϛφϧ or ίϚϯυϓϩ ϯϓτͷը໘ʹ json ܗࣜͷจࣈྻ͕දࣔ͞ Ε·͢

Slide 24

Slide 24 text

Puppeteer Λ࢖͏࣌ͷ஫ҙ఺

Slide 25

Slide 25 text

࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • 2010೥3݄ࠒɺࢢຽ͔Β Ԭ࡚ࢢཱਤॻؗͷ΢ΣϒαΠτ ͷଂॻݕࡧγεςϜʹର͠઀ଓ͕ग़དྷͳ͍ͱۤ৘͕͋Γɺ ͦͷޙ΋΢ΣϒαΠτͷӾཡ͕ࠔ೉ʹͳΔࣄଶ͕૬͍࣍ ͩɻ • 5݄25೔ʹΞΫηεΛߦ͍ͬͯͨஉੑ͕ଂॻݕࡧγεςϜ ʹߴස౓ͷϦΫΤετΛނҙʹૹΓ͚ͭͨͱِͯ͠ܭۀ຿ ๦֐༰ٙͰୁั͞Εͨɻ

Slide 26

Slide 26 text

࣮ࡍʹ͋ͬͨܐࣄࣄ݅ • Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ʢ௨শɿLibrahackࣄ݅ʣ • உੑ͕࣮ࡍʹߦ͍ͬͯͨͷ͸ɺଂॻݕࡧγες Ϝͷ࢖͍উखʹຬ଍͠ͳ͔ͬͨͨΊࣗ਎Ͱ࡞੒ ͨ͠ΫϩʔϥΛ࣮ߦ͠ɺଂॻݕࡧγεςϜ͔Β ਤॻ৘ใΛऔಘ͢Δ͜ͱͰ͋ͬͨɻ • ࢀরɿԬ࡚ࢢཱதԝਤॻؗࣄ݅ - Wikipedia

Slide 27

Slide 27 text

͜͏͍͏ͷ͸΍ͬͪΌμϝʂ • ར༻ن໿ͰεΫϨΠϐϯάΛېࢭ͍ͯ͠ΔαΠτ ͰɺεΫϨΠϐϯάΛͨ͠ • εΫϨΠϐϯάͷස౓͕ߴ͘ɺαʔόʹର͢Δ ෛՙ͕େ͖͔ͬͨނʹαʔόΛམͱͯ͠͠·ͬͨ • εΫϨΠϐϯάʹΑΓऔಘͨ͠৘ใΛෆਖ਼ʹ࢖ ༻͢Δ

Slide 28

Slide 28 text

ར༻ن໿ͰεΫϨΠϐϯάΛېࢭͯ͠ ͍ΔαΠτͰɺεΫϨΠϐϯάΛͨ͠ • ͪΌΜͱར༻ن໿ΛಡΈ·͠ΐ͏ • ex. Facebook • 2. FacebookͰڞ༗Մೳͳίϯςϯπ͓ΑͼೝΊΒΕΔߦҝ • ฐ͔ࣾΒࣄલͷڐՄΛಘΔ͜ͱͳ͘ɺࣗಈԽ͞ΕͨखஈΛ ༻͍ͯ੡඼ͷσʔλʹΞΫηεͨ͠ΓσʔλΛऔಘͨ͠Γ ͢Δ͜ͱ΍ɺΞΫηεڐՄͷͳ͍σʔλ΁ͷΞΫηεΛࢼ ΈΔ͜ͱΛېࢭ͠·͢ɻ

Slide 29

Slide 29 text

εΫϨΠϐϯάͷස౓͕ߴ͘ɺ αʔόʹର͢Δෛՙ͕େ͖͔ͬͨނʹ αʔόΛམͱͯ͠͠·ͬͨ • Լख͢Δͱِܭۀ຿๦֐ʹͳͬͯ͠·͏͜ͱ΋… • ex. Librahackࣄ݅ʮ1࣌ؒʹ400Ҏ্ϦΫΤετΛૹΒ ΕΔͱଞͷϦΫΤετͷॲཧ͕ෆՄೳʹͳΔෆ۩߹Λ ؚΜͰ͍ͨʯ • ա౓ͳ࢖༻͸߇͑·͠ΐ͏ • উख͕Θ͔Βͳ͚Ε͹ɺਓؒͷखͰͰ͖ΔൣғͷϦΫ Τετ͕ແ೉

Slide 30

Slide 30 text

εΫϨΠϐϯάʹΑΓऔಘͨ͠ ৘ใΛෆਖ਼ʹ࢖༻͢Δ • ࢲతར༻Ͱ͋Ε͹OK • ͜͏͍͏ͷ͸NG • ঎༻໨తͰ࢖͏ • εΫϨΠϐϯάͷ݁Ռɺ΋͘͠͸Ճ޻ͨ͠΋ͷΛଞऀ ʹެ։͢Δ • etc..

Slide 31

Slide 31 text

ͦͷଞ • ͪ͜Β΋߹ΘͤͯಡΈ·͠ΐ͏ • WebεΫϨΠϐϯάͷ஫ҙࣄ߲Ұཡ - Qiita @nezuq • https://qiita.com/nezuq/items/ c5e827e1827e7cb29011

Slide 32

Slide 32 text

·ͱΊ

Slide 33

Slide 33 text

·ͱΊ • Puppeteer ͸ը໘্Ͱ͸ݟ͑ͳ͍ Chrome ΛࣗಈͰ ૢ࡞͢Δ Google ެࣜπʔϧ • ؀ڥߏங΋ָͰɺεΫϨΠϐϯά΍ࣗಈϒϥ΢βς ετΛ࢝ΊΔʹ͸΋͍ͬͯ͜ • Puppeteer Λར༻ͨ͠εΫϨΠϐϯάʹ͍ͭͯ͸ɺ ๏త໰୊͕Ͳ͏ͯ͠΋ආ͚ΒΕͳ͍ͷͰௐ΂ͳ͕Β ΍ͬͯͶ