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
630
calro
roppongi.js #7向け
Yosuke Kurami
November 19, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
590
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Music & Morning Musume
bryan
46
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Speed Design
sergeychernyshev
32
1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Docker and Python
trallard
44
3.5k
Side Projects
sachag
455
42k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Automating Front-end Workflow
addyosmani
1370
200k
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!