Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
calro
Search
Yosuke Kurami
November 19, 2018
4
550
calro
roppongi.js #7向け
Yosuke Kurami
November 19, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
Next.js App Router
quramy
14
2.4k
Fragment Composition of GraphQL
quramy
14
1.8k
reg-viz VRT tools
quramy
4
920
NoInfer
quramy
0
120
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.8k
apollo client / react / esm
quramy
1
210
Apollo Client useFragment
quramy
1
640
About Type Syntax Proposal
quramy
1
1.9k
Featured
See All Featured
It's Worth the Effort
3n
180
27k
Scaling GitHub
holman
457
140k
Building Flexible Design Systems
yeseniaperezcruz
321
37k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
The Cost Of JavaScript in 2023
addyosmani
22
4k
Teambox: Starting and Learning
jrom
128
8.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Visualization
eitanlees
137
14k
A better future with KSS
kneath
231
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
24
1.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Transcript
Carloͷ Roppongi.js #7
About me
Carloͱ • https://github.com/GoogleChromeLabs/ carlo • Googleᐌ͘ ʮheadful Node app frameworkʯ
None
Node.js + Chromium • CarloChromiumΛը໘ඳըΤϯδϯͱͯ͠ ಈ࡞͢ΔNode.js ΞϓϦέʔγϣϯϑϨʔϜ ϫʔΫ • Node.jsɺChromiumͱʹV8͕ಈ࡞͢Δͨ
ΊɺJavaScriptͷΈͰσεΫτοϓΞϓϦ͕࡞ ΕΔ
͍ํ
Demo https://github.com/Quramy/carlo-git-graph
ElectronNW.jsͱͷҧ͍
ϥϯλΠϜϑΝΠϧαΠζ • Electron / NW.jsChromiumͷϨϯμϥϓϩ ηε͔ΒNode.jsΞΫηεͰ͖ΔΑ͏ʹ͠ ͨɺಠࣗͷϥϯλΠϜΛඞཁͱ͢Δ • ͍͕ͭ͜૬ॏ͍ͨ
(ࢀߟ) ElectronͷϑΝΠϧαΠζ https://github.com/electron/electron/releases/tag/v3.0.8
ElectronNw.jsͷ • Electron / NW.jsͰ࡞ͨ͠ΞϓϦέʔγϣϯ Λ͢Δ߹ɺಠࣗϥϯλΠϜࣗମ bundleͯ͢͠Δͷ͕Ұൠతɻ (Ϣʔβʔී௨ɺElectron NW.jsΛࣄલʹ Πϯετʔϧͯ͠ͳ͍)
• ඞવతʹͷαΠζ͕ڊେԽ͢Δ
CarloͰ࡞ͬͨΞϓϦͷ • CarloϢʔβʔ͕Πϯετʔϧ͍ͯ͠Δ ChromeΛͦͷ··ར༻͢Δ • Node.jsΛطʹΠϯετʔϧ͍ͯ͠ΔϢʔβʔ ͢ΔͷͰ͋ΕɺNPMͰे
CarloͰ࡞ͬͨΞϓϦͷ • Node.js͚ͩΛόϯυϧͯ͢͠Δ߹ɺ https://github.com/zeit/pkg Λར༻͢ΔͱΑ ͍Β͍͠
nodeIntegration • ElectronͰσϑΥϧτͰ nodeIntegrationͱ ͍͏ػೳ͕onʹ͞Ε͍ͯΔ • ͜ΕɺϨϯμϥϓϩηε(ཁ͢Δʹը໘)͔ ΒɺNode.jsͷAPIΛ৮ΕΔɺͱ͍͏ػೳ
nodeIntegration • ը໘͔ΒNode.jsʹ৮ΕΔͱ͍͏͜ͱ ͱ͔͕ී௨ʹಈ͍ͯ͠·͏ • ΞϓϦέʔγϣϯʹXSSͷ੬ऑੑΛຒΊࠐΜͩ ͱ͖ͷඃ͕௨ৗͷWebΞϓϦͷൺ͡Όͳ͍ require('child_process').execSync('ls')
nodeIntegration • CarloͰɺࣗͰબͨ͠Node.jsͷؔͷ Έ͕ɺ໌ࣔతʹChromiumଆެ։͞ΕΔํࣜ • XSS͕͋ͬͨͱ͜ΖͰɺElectron΄Ͳͷඃʹ ͳΒͳ͍ͣ
CarloͱPuppeteer
CarloͱPuppeteer • CarloPuppeteerͰChromiumΛNode.js͔Βૢ࡞ͯ͠ ͍Δ • Puppeteerͱ • ͜ΕGoogleͷϥΠϒϥϦ • ChromiumΛࣗಈԽ͢ΔతͰ࡞ΒΕ͍ͯΔ
• Chrome Devtool ProtocolͷΫϥΠΞϯτ
CarloͱPuppeteer • NPMͷpuppeteerύοέʔδɺChromiumͷϥ ϯλΠϜΛpost installͰϩʔΧϧʹΠϯετʔϧ ͯ͘͠Δ • ૢ࡞෦ͷΈΛΓग़ͨ͠puppeteer-coreͱ͍ ͏ύοέʔδ͋Δɻ͍ͭ͜ϩʔΧϧΠϯετʔ ϧΛߦΘͳ͍ɻ
Carlo͕͍ͬͯΔͷͬͪ͜
CarloͱPuppeteer • ࣮ࡍͷͱ͜Ζɺݱঢ়ͷCalroPuppeteerͷബ ͍ϥούʔͰ͔͠ͳ͍ • CarloͷAPIʹఆٛ͞Ε͍ͯΔ exposeFunction ͳͲPuppeteerͷಉ໊ؔʹҕৡ͍ͯ͠Δͩ ͚
Node.js <=> Chromimum /PEFKTͷؔΛ $ISPNJVNଆ͔Βݺͼग़͠Մೳʹ͢Δ
·ͱΊ • CarloPuppeteerΛར༻ͨ͠σεΫτοϓΞϓϦΤ ϯδϯ • PuppeteerͷAPIͬͯΕͲ͏ͱͰͳΔ • Electron / NW.jsΑΓࣗ༝͍͕ϑΝΠϧαΠ
ζͳͲͷ໘Ͱ༗ར • CLIʹͪΐͬͱͨ͠ը໘Λ͍ͨͤͨͱ͖ʹศར͔
Thank you!