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

Slide 1

Slide 1 text

ࢲͷੜ׆Λม͑ͨ  Headless Chrome ౦ژNodeֶԂࡇ2018 LT 2018/11/24 େౡ ޫو@sbntaminif

Slide 2

Slide 2 text

ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾ։ൃάϧʔϓϦʔμʔ • ؔ੢NodeֶԂओ࠵ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • ࠓ೔͜Εͷ࿩Ұ੾͠·ͤΜ↘

Slide 3

Slide 3 text

ಋೖ 3ϖʔδͰ΍Γ·͢

Slide 4

Slide 4 text

1. ఆظߪೖΛࣗಈԽ͍ͨ͠ զ͕ՈͰ͸ ࣗಈԽΛਪਐ ೔༻඼ͷങ͍෺͸ ౎౓εʔύʔ Ͳ͏ʹ͔ࣗಈԽ ͍ͨ͠ Ͱ͖Ε͹yodobashi.comͰങ͍͍ͨʢϙΠϯτͷͨΊʣ ՝୊

Slide 5

Slide 5 text

2. Amazon Dash Button ϘλϯΛԡ͚ͩ͢ͰAmazon͔Β঎඼͕ಧ͘

Slide 6

Slide 6 text

ʊਓਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹ3. Yodobashi Dash Buttonɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ

Slide 7

Slide 7 text

Ͳ͏΍͔ͬͨ

Slide 8

Slide 8 text

AWS IoT 1-Click Headless Chrome puppeteer

Slide 9

Slide 9 text

AWS IoT 1-Click ϘλϯΛԡ͢ͱAWSͰ࣮ߦ

Slide 10

Slide 10 text

AWS IoT 1-Click • Amazon Dash Buttonϋʔυ΢ΣΞΛϕʔεͱͨ͠  ϓϩάϥϛϯάՄೳͳϘλϯ • ࢖͍ํ͸Amazon Dash Buttonͱಉ͡Ͱ  ϘλϯΛԡͨ࣌͠ͷૢ࡞͕બ΂Δ • ྨࣅσόΠε΋ॱ࣍ൃച͍ͯ͠Δ • SORACOM LTE-M Button powered by AWSͳͲ

Slide 11

Slide 11 text

Headless Chrome https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja

Slide 12

Slide 12 text

Headless Chrome https://developers.google.com/web/updates/2017/04/headless-chrome?hl=en

Slide 13

Slide 13 text

Headless Chromeͱ͸ • ChromeΛϔουϨεͰಈ࡞͢Δ • ϔουϨε = UIͳ͠Ͱ࣮ߦ • Chrome59͕Πϯετʔϧ͞Ε͍ͯΕ͹࢖༻Մ ೳʢWindows͸61ʣ • Chromeͷػೳ͕શͯ࢖͑Δ

Slide 14

Slide 14 text

ͦͯ͠ Headless ChromeΛ ૢ࡞͢ΔͨΊʹ։ൃ͞Εͨ ϥΠϒϥϦ

Slide 15

Slide 15 text

puppeteer https://github.com/GoogleChrome/puppeteer

Slide 16

Slide 16 text

puppeteerͱ͸ • Node.jsͰHeadless ChromeΛ  ૢ࡞͢ΔϥΠϒϥϦ • Chrome DevToolsͷ্͔Βૢ࡞͢ΔAPI • GoogleChromeνʔϜ͕࣮૷ • ʮύϖςΟΞʯͱൃԻ

Slide 17

Slide 17 text

ಈ࡞ϨΠϠʔ

Slide 18

Slide 18 text

ChromeΛࣗಈͰಈ͔ͯ͠ ঎඼ߪೖ·Ͱ ͨͲΓͭ͘

Slide 19

Slide 19 text

࣮૷͢Δ 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-Λࢦఆͯ͠ભҠ

Slide 20

Slide 20 text

࣮૷͢Δ

Slide 21

Slide 21 text

࣮૷͢Δ //////////////////////////////////////////// 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-Λࢦఆͯ͠ભҠ

Slide 22

Slide 22 text

࣮૷͢Δ

Slide 23

Slide 23 text

͜Μͳײ͡Ͱ Ұͭͣͭૢ࡞ͯ͠ ໨త·Ͱୡ੒͢Δ

Slide 24

Slide 24 text

࡞ͬͨ΋ͷ͕ͪ͜Β https://github.com/taminif/buyInYodobashi

Slide 25

Slide 25 text

εΫϦϓτΛ࣮ߦ͢Ε͹ ঎඼͕ߪೖͰ͖ΔΑ͏ʹͳͬͨ

Slide 26

Slide 26 text

͜ΕΛAWS LambdaͰ ಈ͔͢

Slide 27

Slide 27 text

௨ৗͷpuppeteerΛ࢖͏ͱ Chromium͕ೖΔ ͢ΔͱɺLambdaͷ༰ྔͰ͋Δ 50MBΛ௒͑Δ

Slide 28

Slide 28 text

serverless-chrome https://github.com/adieuadieu/serverless-chrome

Slide 29

Slide 29 text

ChromeΛLambdaͷ֎Ͱ ࣮ߦ͢Δ͜ͱͰ ༰ྔΦʔόʔΛճආ͢Δ

Slide 30

Slide 30 text

LambdaͰಈ͔ͨ͠ -BNCEBͰ ಈ࡞͢Δ"1* -BNCEBݺͼग़͠

Slide 31

Slide 31 text

Lambdaʹొ࿥͢Δ͜ͱͰ ϘλϯΛԡͤ͹ߪೖͰ͖Δ!

Slide 32

Slide 32 text

⚠໰୊ൃੜ⚠

Slide 33

Slide 33 text

AWS Lambda͔Β yodobashi.com΁ͷ ΞΫηε͕Ͱ͖ͳ͍ ͸঎඼ϖʔδͷΈ 'PSCJEEFO

Slide 34

Slide 34 text

AWS͚ͩͳͷʁ ଞͷՈిྔൢళαΠτ͸ʁ ͜ΕΒͷ࿩͸ ࠙਌ձͰ͠·͠ΐ͏!

Slide 35

Slide 35 text

Ͳ͏ճආ͢Δ͔ Heroku͔ΒͳΒ ΞΫηεͰ͖Δ

Slide 36

Slide 36 text

ߏ੒Λม͑Ε͹͍͚Δ -BNCEBݺͼग़͠ )5514௨৴Ͱ )FSPLVΛίʔϧ εΫϦϓτ࣮ߦ

Slide 37

Slide 37 text

Yodobashi Dash Button͕ ׬੒ͨ͠!!

Slide 38

Slide 38 text

puppeteerͷັྗ

Slide 39

Slide 39 text

·ͣ͸͡Ίʹ Headless ChromeΛ࿩্͢Ͱ ͔ܽͤͳ͍ಈը

Slide 40

Slide 40 text

The power of Headless Chrome https://www.youtube.com/watch?v=lhZOFUY1weo 2018೥ͷGoogle IOͷߨԋ

Slide 41

Slide 41 text

Headless Chrome͸ େ͖ͳՄೳੑΛൿΊ͍ͯΔ

Slide 42

Slide 42 text

ࢲͷߟ͑Δ ࠷΋ັྗతͳٕज़

Slide 43

Slide 43 text

ͲΜͳWebαʔϏεͰ΋ APIԽͰ͖Δ

Slide 44

Slide 44 text

Πϯλʔωοτશ੝ظ ϒϥ΢βΛ࢖Θͳ͍ਓ͸ ΄΅͍ͳ͍Ͱ͢ΑͶ

Slide 45

Slide 45 text

ීஈͷωοταʔϑΟϯΛ ࣗಈԽͰ͖Δ

Slide 46

Slide 46 text

ࣗಈԽͯ͠APIʹ͢Ε͹ ͍ͭͰ΋ݺͼग़ͤΔ

Slide 47

Slide 47 text

APIԽ͓͚ͯ͠͹ ΠϯλʔϑΣʔε͸ ͲΕͰ΋࢖͑Δ ࠓ࿩୊ͷεϚʔτεϐʔΧʔ Ͱ΋OK

Slide 48

Slide 48 text

⚠8BSOJOH

Slide 49

Slide 49 text

Ԭ࡚ࢢཱதԝਤॻؗࣄ݅ https://ja.wikipedia.org/wiki/Ԭ࡚ࢢཱதԝਤॻؗࣄ݅

Slide 50

Slide 50 text

΍Γ͗͢Δͱॻྨૹݕ·Ͱ ͋Γ·͢ ৗࣝతͳΞΫηεʹ ԡ͑͞·͠ΐ͏

Slide 51

Slide 51 text

͜ͷηογϣϯʹײԽ͞Εͯ ൃੜͨ͠ଛ֐౳ʹ͍ͭͯɺ ੹೚͸ෛ͍݉Ͷ·͢

Slide 52

Slide 52 text

༻๏༻ྔΛकͬͯ ศརʹ࢖͍·͠ΐ͏

Slide 53

Slide 53 text

͜ͷಈըͷதͰ ڧ͘࿩͞Ε͍ͯΔ͜ͱ https://www.youtube.com/watch?v=lhZOFUY1weo

Slide 54

Slide 54 text

ʮ͜ͷ࿩͸ςετࣗಈԽͷ ࿩Ͱ͸͋Γ·ͤΜʯ ʮࣗಈԽ͢Δ͜ͱ͕Ͱ͖Δʯ ʮࣗಈԽ͢ΔπʔϧͰ͋Δʯ