私の生活を変えたHeadless Chrome / Headless Chrome who changed my life

Nodefest 2018 LT

Transcript

1. ࢲͷੜ׆Λม͑ͨ
 Headless Chrome ౦ژNodeֶԂࡇ2018 LT 2018/11/24 େౡ ޫو@sbntaminif
2. ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾ։ൃάϧʔϓϦʔμʔ • ؔ੢NodeֶԂओ࠵ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • ࠓ೔͜Εͷ࿩Ұ੾͠·ͤΜ↘
3. ಋೖ 3ϖʔδͰ΍Γ·͢
4. 1. ఆظߪೖΛࣗಈԽ͍ͨ͠ զ͕ՈͰ͸ ࣗಈԽΛਪਐ ೔༻඼ͷങ͍෺͸ ౎౓εʔύʔ Ͳ͏ʹ͔ࣗಈԽ ͍ͨ͠ Ͱ͖Ε͹yodobashi.comͰങ͍͍ͨʢϙΠϯτͷͨΊʣ ՝୊
5. 2. Amazon Dash Button ϘλϯΛԡ͚ͩ͢ͰAmazon͔Β঎඼͕ಧ͘
6. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ3. Yodobashi Dash Buttonɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ
7. Ͳ͏΍͔ͬͨ
8. AWS IoT 1-Click Headless Chrome puppeteer
9. AWS IoT 1-Click ϘλϯΛԡ͢ͱAWSͰ࣮ߦ
10. AWS IoT 1-Click • Amazon Dash Buttonϋʔυ΢ΣΞΛϕʔεͱͨ͠
 ϓϩάϥϛϯάՄೳͳϘλϯ • ࢖͍ํ͸Amazon Dash Buttonͱಉ͡Ͱ
 ϘλϯΛԡͨ࣌͠ͷૢ࡞͕બ΂Δ • ྨࣅσόΠε΋ॱ࣍ൃച͍ͯ͠Δ • SORACOM LTE-M Button powered by AWSͳͲ
11. Headless Chrome https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja
12. Headless Chrome https://developers.google.com/web/updates/2017/04/headless-chrome?hl=en
13. Headless Chromeͱ͸ • ChromeΛϔουϨεͰಈ࡞͢Δ • ϔουϨε = UIͳ͠Ͱ࣮ߦ • Chrome59͕Πϯετʔϧ͞Ε͍ͯΕ͹࢖༻Մ ೳʢWindows͸61ʣ • Chromeͷػೳ͕શͯ࢖͑Δ
14. ͦͯ͠ Headless ChromeΛ ૢ࡞͢ΔͨΊʹ։ൃ͞Εͨ ϥΠϒϥϦ
15. puppeteer https://github.com/GoogleChrome/puppeteer
16. puppeteerͱ͸ • Node.jsͰHeadless ChromeΛ
 ૢ࡞͢ΔϥΠϒϥϦ • Chrome DevToolsͷ্͔Βૢ࡞͢ΔAPI • GoogleChromeνʔϜ͕࣮૷ • ʮύϖςΟΞʯͱൃԻ
17. ಈ࡞ϨΠϠʔ
18. ChromeΛࣗಈͰಈ͔ͯ͠ ঎඼ߪೖ·Ͱ ͨͲΓͭ͘
19. ࣮૷͢Δ const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({headless: true}); const page = await browser.newPage(); await page.setViewport({width: 640, height: 460}); await page.goto('https://order.yodobashi.com/yc/login/ index.html'); //////////////////////////////////////////// })(); $ISPNFΛىಈ ৽͍͠λϒΛ։͘ ΢Οϯυ΢αΠζΛܾఆ 63-Λࢦఆͯ͠ભҠ
20. ࣮૷͢Δ
21. ࣮૷͢Δ //////////////////////////////////////////// await page.type('#memberId', '********'); await page.type('#password', '********'); page.click('#js_i_login0'); await page.waitForSelector('#wrapper'); await page.goto('https://www.yodobashi.com/product/ 100000001002383900/'); //////////////////////////////////////////// ϩάΠϯ৘ใΛೖྗ ϩάΠϯϘλϯΛΫϦοΫ ભҠΛ଴ͭ 63-Λࢦఆͯ͠ભҠ
22. ࣮૷͢Δ
23. ͜Μͳײ͡Ͱ Ұͭͣͭૢ࡞ͯ͠ ໨త·Ͱୡ੒͢Δ
24. ࡞ͬͨ΋ͷ͕ͪ͜Β https://github.com/taminif/buyInYodobashi
25. εΫϦϓτΛ࣮ߦ͢Ε͹ ঎඼͕ߪೖͰ͖ΔΑ͏ʹͳͬͨ
26. ͜ΕΛAWS LambdaͰ ಈ͔͢
27. ௨ৗͷpuppeteerΛ࢖͏ͱ Chromium͕ೖΔ ͢ΔͱɺLambdaͷ༰ྔͰ͋Δ 50MBΛ௒͑Δ
28. serverless-chrome https://github.com/adieuadieu/serverless-chrome
29. ChromeΛLambdaͷ֎Ͱ ࣮ߦ͢Δ͜ͱͰ ༰ྔΦʔόʔΛճආ͢Δ
30. LambdaͰಈ͔ͨ͠ -BNCEBͰ
    ಈ࡞͢Δ"1* -BNCEBݺͼग़͠
31. Lambdaʹొ࿥͢Δ͜ͱͰ ϘλϯΛԡͤ͹ߪೖͰ͖Δ!
32. ⚠໰୊ൃੜ⚠
33. AWS Lambda͔Β yodobashi.com΁ͷ ΞΫηε͕Ͱ͖ͳ͍ ͸঎඼ϖʔδͷΈ 
    'PSCJEEFO
34. AWS͚ͩͳͷʁ ଞͷՈిྔൢళαΠτ͸ʁ ͜ΕΒͷ࿩͸ ࠙਌ձͰ͠·͠ΐ͏!
35. Ͳ͏ճආ͢Δ͔ Heroku͔ΒͳΒ ΞΫηεͰ͖Δ
36. ߏ੒Λม͑Ε͹͍͚Δ -BNCEBݺͼग़͠ )5514௨৴Ͱ
    )FSPLVΛίʔϧ εΫϦϓτ࣮ߦ
37. Yodobashi Dash Button͕ ׬੒ͨ͠!!
38. puppeteerͷັྗ
39. ·ͣ͸͡Ίʹ Headless ChromeΛ࿩্͢Ͱ ͔ܽͤͳ͍ಈը
40. The power of Headless Chrome https://www.youtube.com/watch?v=lhZOFUY1weo 2018೥ͷGoogle IOͷߨԋ
41. Headless Chrome͸ େ͖ͳՄೳੑΛൿΊ͍ͯΔ
42. ࢲͷߟ͑Δ ࠷΋ັྗతͳٕज़
43. ͲΜͳWebαʔϏεͰ΋ APIԽͰ͖Δ
44. Πϯλʔωοτશ੝ظ ϒϥ΢βΛ࢖Θͳ͍ਓ͸ ΄΅͍ͳ͍Ͱ͢ΑͶ
45. ීஈͷωοταʔϑΟϯΛ ࣗಈԽͰ͖Δ
46. ࣗಈԽͯ͠APIʹ͢Ε͹ ͍ͭͰ΋ݺͼग़ͤΔ
47. APIԽ͓͚ͯ͠͹ ΠϯλʔϑΣʔε͸ ͲΕͰ΋࢖͑Δ ࠓ࿩୊ͷεϚʔτεϐʔΧʔ Ͱ΋OK
48. ⚠8BSOJOH
49. Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ https://ja.wikipedia.org/wiki/Ԭ࡚ࢢཱதԝਤॻؗࣄ݅
50. ΍Γ͗͢Δͱॻྨૹݕ·Ͱ ͋Γ·͢ ৗࣝతͳΞΫηεʹ ԡ͑͞·͠ΐ͏
51. ͜ͷηογϣϯʹײԽ͞Εͯ ൃੜͨ͠ଛ֐౳ʹ͍ͭͯɺ ੹೚͸ෛ͍݉Ͷ·͢
52. ༻๏༻ྔΛकͬͯ ศརʹ࢖͍·͠ΐ͏
53. ͜ͷಈըͷதͰ ڧ͘࿩͞Ε͍ͯΔ͜ͱ https://www.youtube.com/watch?v=lhZOFUY1weo
54. ʮ͜ͷ࿩͸ςετࣗಈԽͷ ࿩Ͱ͸͋Γ·ͤΜʯ ʮࣗಈԽ͢Δ͜ͱ͕Ͱ͖Δʯ ʮࣗಈԽ͢ΔπʔϧͰ͋Δʯ
55. ීஈͷ࡞ۀΛࣗಈԽ͢Δ ͜Εͦ͜ΤϯδχΞϦϯά
56. ΍ͬͯΈͨ͘ͳΓ·ͤΜ͔ʁ
57. ࣗಈԽ Έͳ͞Μ΋Headless ChromeͰ ੜ׆Λม͍͖͑ͯ·͠ΐ͏ʂ
58. ͋Γ͕ͱ͏͍͟͝·ͨ͠