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
620
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
630
上手に付き合うコンポーネントテスト
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
Site-Speed That Sticks
csswizardry
10
700
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Facilitating Awesome Meetings
lara
54
6.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Statistics for Hackers
jakevdp
799
220k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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!