Tweet
Tweet

Slide 1

Slide 1 text

Carloͷ࿩ Roppongi.js #7

Slide 2

Slide 2 text

About me

Slide 3

Slide 3 text

Carloͱ͸ • https://github.com/GoogleChromeLabs/ carlo • Googleᐌ͘
 ʮheadful Node app frameworkʯ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Node.js + Chromium • Carlo͸ChromiumΛը໘ඳըΤϯδϯͱͯ͠ ಈ࡞͢ΔNode.js ΞϓϦέʔγϣϯϑϨʔϜ ϫʔΫ • Node.jsɺChromiumͱ΋ʹV8͕ಈ࡞͢Δͨ ΊɺJavaScriptͷΈͰσεΫτοϓΞϓϦ͕࡞ ΕΔ

Slide 6

Slide 6 text

࢖͍ํ

Slide 7

Slide 7 text

Demo https://github.com/Quramy/carlo-git-graph

Slide 8

Slide 8 text

Electron΍NW.jsͱͷҧ͍

Slide 9

Slide 9 text

ϥϯλΠϜϑΝΠϧαΠζ໰୊ • Electron / NW.js͸ChromiumͷϨϯμϥϓϩ ηε͔ΒNode.js΁ΞΫηεͰ͖ΔΑ͏ʹ͠ ͨɺಠࣗͷϥϯλΠϜΛඞཁͱ͢Δ • ͍͕ͭ͜૬౰ॏ͍ͨ

Slide 10

Slide 10 text

(ࢀߟ) ElectronͷϑΝΠϧαΠζ https://github.com/electron/electron/releases/tag/v3.0.8

Slide 11

Slide 11 text

Electron΍Nw.jsͷ഑෍ • Electron / NW.jsͰ࡞੒ͨ͠ΞϓϦέʔγϣϯ Λ഑෍͢Δ৔߹ɺಠࣗϥϯλΠϜࣗମ΋ bundleͯ͠഑෍͢Δͷ͕Ұൠతɻ
 (Ϣʔβʔ͸ී௨ɺElectron ΍NW.jsΛࣄલʹ Πϯετʔϧͯ͠ͳ͍) • ඞવతʹ഑෍෺ͷαΠζ͕ڊେԽ͢Δ

Slide 12

Slide 12 text

CarloͰ࡞ͬͨΞϓϦͷ഑෍ • Carlo͸Ϣʔβʔ͕Πϯετʔϧ͍ͯ͠Δ ChromeΛͦͷ··ར༻͢Δ • Node.jsΛطʹΠϯετʔϧ͍ͯ͠ΔϢʔβʔ ΁഑෍͢ΔͷͰ͋Ε͹ɺNPMͰे෼

Slide 13

Slide 13 text

CarloͰ࡞ͬͨΞϓϦͷ഑෍ • Node.js͚ͩΛόϯυϧͯ͠഑෍͢Δ৔߹ɺ https://github.com/zeit/pkg Λར༻͢ΔͱΑ ͍Β͍͠

Slide 14

Slide 14 text

nodeIntegration໰୊ • ElectronͰ͸σϑΥϧτͰ nodeIntegrationͱ ͍͏ػೳ͕onʹ͞Ε͍ͯΔ • ͜Ε͸ɺϨϯμϥϓϩηε(ཁ͢Δʹը໘)͔ ΒɺNode.jsͷAPIΛ৮ΕΔɺͱ͍͏ػೳ

Slide 15

Slide 15 text

nodeIntegration໰୊ • ը໘͔ΒNode.jsʹ৮ΕΔͱ͍͏͜ͱ͸
 
 
 ͱ͔͕ී௨ʹಈ͍ͯ͠·͏ • ΞϓϦέʔγϣϯʹXSSͷ੬ऑੑΛຒΊࠐΜͩ ͱ͖ͷඃ֐͕௨ৗͷWebΞϓϦͷൺ͡Όͳ͍ require('child_process').execSync('ls')

Slide 16

Slide 16 text

nodeIntegration໰୊ • CarloͰ͸ɺࣗ෼Ͱબ୒ͨ͠Node.jsͷؔ਺ͷ Έ͕ɺ໌ࣔతʹChromiumଆ΁ެ։͞ΕΔํࣜ • XSS͕͋ͬͨͱ͜ΖͰɺElectron΄Ͳͷඃ֐ʹ ͸ͳΒͳ͍͸ͣ

Slide 17

Slide 17 text

CarloͱPuppeteer

Slide 18

Slide 18 text

CarloͱPuppeteer • Carlo͸PuppeteerͰChromiumΛNode.js͔Βૢ࡞ͯ͠ ͍Δ • Puppeteerͱ͸ • ͜Ε΋Google੡ͷϥΠϒϥϦ • ChromiumΛࣗಈԽ͢Δ໨తͰ࡞ΒΕ͍ͯΔ • Chrome Devtool ProtocolͷΫϥΠΞϯτ

Slide 19

Slide 19 text

CarloͱPuppeteer • NPMͷpuppeteerύοέʔδ͸ɺChromiumͷϥ ϯλΠϜΛpost installͰϩʔΧϧʹΠϯετʔϧ ͯ͘͠Δ • ૢ࡞෦෼ͷΈΛ੾Γग़ͨ͠puppeteer-coreͱ͍ ͏ύοέʔδ΋͋Δɻ͍ͭ͜͸ϩʔΧϧΠϯετʔ ϧΛߦΘͳ͍ɻ
 Carlo͕࢖͍ͬͯΔͷ͸ͬͪ͜

Slide 20

Slide 20 text

CarloͱPuppeteer • ࣮ࡍͷͱ͜Ζɺݱঢ়ͷCalro͸Puppeteerͷബ ͍ϥούʔͰ͔͠ͳ͍ • CarloͷAPIʹఆٛ͞Ε͍ͯΔ exposeFunction ͳͲ΋Puppeteerͷಉ໊ؔ਺ʹҕৡ͍ͯ͠Δͩ ͚

Slide 21

Slide 21 text

Node.js <=> Chromimum /PEFKTͷؔ਺Λ $ISPNJVNଆ͔Βݺͼग़͠Մೳʹ͢Δ

Slide 22

Slide 22 text

·ͱΊ • Carlo͸PuppeteerΛར༻ͨ͠σεΫτοϓΞϓϦΤ ϯδϯ • PuppeteerͷAPI஌ͬͯΕ͹Ͳ͏ͱͰ΋ͳΔ • Electron / NW.jsΑΓ΋ࣗ༝౓͸௿͍͕ϑΝΠϧαΠ ζͳͲͷ໘Ͱ༗ར • CLIʹͪΐͬͱͨ͠ը໘Λ΋͍ͨͤͨͱ͖ʹศར͔΋

Slide 23

Slide 23 text

Thank you!