Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Puppeteerでつくる画像と動画 / images and videos made with puppeteer

297a42b94a1bda236982ec1cd81089b6?s=47 mottox2
July 17, 2021
Technology
0
240

Puppeteerでつくる画像と動画 / images and videos made with puppeteer

297a42b94a1bda236982ec1cd81089b6?s=128

mottox2

July 17, 2021
Tweet

More Decks by mottox2

See All by mottox2
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
3
900
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
1
260
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
9
2.5k
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
7
26k
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
3
2.6k
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
1
1.2k
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
15
8.7k
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
3
1.3k
297a42b94a1bda236982ec1cd81089b6?s=48 mottox2
5
1.2k

Other Decks in Technology

See All in Technology
164a161443835d8479c19d33241cab2a?s=48 smokeymonkey
0
370
Dc03bf56cb3157b6036f9818593d7e40?s=48 rung
0
1k
9b63847a4c413a2604e1d64e5d595dab?s=48 humank
0
110
A19876f5694283f26a061746ba82c3b0?s=48 germsvel
1
110
13d936e697fe0f4fa96f926d0a712f6c?s=48 sansanbuildersbox
PRO
0
110
4c8dc0add99b3ba830fc28453a895ab7?s=48 suzukij1028
0
240
380bcd2ab751f5838abd8219df53e5fe?s=48 tomoki10
0
190
2c51cbf972b0de2e0696c8a26c7d1f4b?s=48 matsuihidetoshi
2
180
6eb87371ba9a9bb7767af80a5c9f5306?s=48 yhana
0
10k
B78199b075c1bbf42f205e04eb2bd764?s=48 himidev
5
3.2k
58d2fa98345951d9a57fdd6cfd5d0f64?s=48 aszx87410
0
210
C74499162d9791bcc12c66a8a8ddc26f?s=48 otl
0
550

Featured

See All Featured
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
96
3.3k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
203
10k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
162
6.8k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
688
180k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
18
2.1k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
58k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
302
40k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
99
15k

Transcript

  1. None

  2. ࣗݾ঺հ • ΋ͬͱʢ@mottox2ʣ • KODANSHAtech LLC.͋ • ि4ۈ຿ͷσβΠϯΤϯδχΞ • ڵຯ:

    σβΠϯγεςϜ • झຯ: Apex Legends

  3. ࠓ೔࿩͢͜ͱ • PuppeteerΛ࢖ͬͨը૾࡞੒ํ๏ • PuppeteerΛ࢖ͬͨಈը࡞੒ํ๏ • զʑ͸Կ͕Ͱ͖Δͷ͔

  4. λΠϜϥΠϯͷ͋Ε Ͳ͏ͭ͘Γ·͔͢ʁ • GitHub • Qiita • Zenn • ࣭໰ശ

  5. Webٕज़Ͱը૾࡞੒ • Canvasͷը૾Խ • ΫϥΠΞϯτʹґଘ͢ΔɾCanvasࣗମ͕ѻ͍ʹ͍͘ • ը૾഑৴SaaSͷར༻ • ָ͚ͩͲࣗ༝౓͕௿͍ •

    ✅ Puppeteerͷར༻ • αʔόʔαΠυ͕ඞਢ͕ͩࣗ༝౓͕ߴ͍ɻ

  6. Puppeteerͱ͸ • ChromeΛૢ࡞͢ΔAPIΛఏڙ͢ΔϥΠϒϥϦ • SPAͷΫϩʔϦϯάɺUIςετ΍ϑΥʔϜࣗಈૹ৴ͳͲͷ༻్͕૝ఆ ͞Ε͍ͯΔ • εΫϦʔϯγϣοτ΋ࡱΕΔ

  7. Puppeteerͷίʔυྫ Const puppeteer = require(‘puppeteer’) const getScreenshot = async (html)

    => { const browser = await puppeteer.launch() const page = await browser.newPage(); await page.setContent(html); await page.setViewport({ width: 1200, height: 630 }); const file = await page.screenshot(); // await page.screenshot({ path: ‘dest/screenshot.png’ }); return file } const html = generateHTML(props) getScreenshot(html)

  8. Puppeteerͷίʔυྫ const generateHTML = (props) => { return `<html> <head>

    <style>…</style> </head> <body> <!— contents —> </body> </html>` }

  9. Puppeteerͱ͸ • ϒϥ΢β্Ͱͷ༷ʑͳදݱΛ࢖ͬͨը૾͕࡞ΕΔɻ • ࣄྫΛ঺հ͠·͢ɻ

  10. ࠓճ࡞ͬͨσϞͷ঺հ • ಉਓࢽଈചձͷެࣜαΠτ • αʔΫϧओ͕൦෍෺Λొ࿥͢Δ • ൦෍෺ͷOGը૾Λ͖Ε͍ʹݟ͍ͤͨ • Cloud Functions্ͰPuppeteerͷεΫϦʔϯγϣοτΛ࡞੒ɻϨεϙ

    ϯεͱͯ͠ฦ͍ͯ͠Δɻ

  11. ࠷ॳʹ࡞ͬͨ΋ͷ

  12. 🤔 ը૾ͱͯ͠ݟΔͱɺதࠇ͕ؾʹͳΔɻ

  13. จࣈ٧ΊΛվળ͢Δ • CSSͷfont-feature-settingsϓϩύςΟΛར༻͢Δ

  14. 👍 క·ͬͨҹ৅ʹͳͬͨ

  15. 🤔 վߦҐஔ͕ؾʹͳΔɻ୯ޠͷ్தͰվߦͨ͘͠ͳ͍ɻ

  16. վߦҐஔΛվળ͢Δ • ܗଶૉղੳΛ΍ͬͯɺจࣈྻΛվߦ͍͍ͯ͠ҐஔͰ෼ׂ͢Δ

  17. վߦҐஔΛվળ͢Δ • Kuromojin.js※Λ࢖ͬͯܗଶૉղੳɺ͍͍ײ͡ʹ෼ׂ͓ͯ͘͠ • ෼ׂͨ͠จࣈΛ඼ࢺ΍จࣈछྨʹ߹Θͤͯ݁߹͢Δ ※ Kuromoji.jsͷϥούʔ

  18. վߦҐஔΛվળ͢Δ • spanͰ۠੾ͬͯno-wrap΍Ε͹վߦҐஔͷίϯτϩʔϧ͕Մೳ • ͳΜ͔มͳέʔε΋͋Δ͚Ͳɺ͓͓ΉͶΑͦ͞͏ • ✅ σϞ: εΫγϣ൛ͱHTML൛ͷൺֱ

  19. 💡 վળ͞Εͨ

  20. ରԠલޙͷൺֱ • Before/After

  21. ରԠલޙͷൺֱ • Before/After

  22. ͜͜·Ͱͷ·ͱΊ • ׳Ε਌͠Μͩϒϥ΢βͰදݱͰ͖Δ΋ͷΛ࢖ͬͯը૾͕࡞ΕΔɻ • JavaScript΋࢖͑͹Ͱ͖Δ͜ͱ͕૿͑Δɻ • ྫʹڍ͛ͨܗଶૉղੳ΍ɺυϛφϯτΧϥʔͷநग़ͳͲ • ʢͨͩ͠ɺPhotoshopͰ࡞ͬͨํָ͕ʣ

  23. ಈըʹ֦ு͢Δ

  24. ಈըΛͭ͘Δ • ਅͬઌʹࢥ͍ͭ͘ͷ͕ɺϒϥ΢βͷಈ࡞Λ࿥ը͢Δख๏ɻ • ՄೳͰ͸͋Δ͕҆ఆͨ͠FPSΛҡ࣋Ͱ͖ͳ͍ɻ • ࿥ըײ͕ڧ͘ɺಈըͱ͸͍͍ʹ͍͘ɻ

  25. ಈըΛͭ͘Δ • ָͳͷͰɺFFmpegΛ࢖͍·͢ɻ • σίʔυɺΤϯίʔυɺτϥϯείʔυɺϛοΫεɺσϛοΫεɺ ετϦʔϜɺϑΟϧλϦϯάͳͲΛ݉Ͷඋ͑ͨπʔϧ • CLI΋͔ͬ͠Γ༻ҙ͞Ε͍ͯΔɻ • ࠓճ͸ѻ͍·ͤΜ͕wasm΋͋Γ·͢ɻ

  26. ಈըΛͭ͘Δ • ֤ϑϨʔϜͷը૾Λ༻ҙͯ͠ԼهίϚϯυΛ࣮ߦ͢Δɻ • ffmpeg -i Frame_%d.png -vcodec libx264 -pix_fmt

    yuv420p -y out.mp4

  27. ಈըΛͭ͘Δ // child_processͰ࣮ߦ͢Δɻ͜ΕͰNode.js͔Βಈը͸࡞ΕΔɻ const { execSync } = require('child_process') ;

    execSync('ffmpeg -i Frame_%d.png -vcodec libx264 -pix_fmt yuv420p -y out.mp4')

  28. ֤ϑϨʔϜͷը૾Λ࡞Δ • ݱࡏͷframeΛҾ਺ͱͯ͠౉ͨ͠ΒɺͦͷframeͷεΫγϣ͕ؼͬͯ͘ ΔΠϝʔδ • 30fpsͷಈըͰ͋Ε͹ 1frame = 0s, 2frame

    = 1/30sͱରԠ͢Δɻ

  29. ֤ϑϨʔϜͷը૾Λ࡞Δ const puppeteer = require("puppeteer-core" ) const { getHtml }

    = require("./template") ; (async () => { const props = {} ; const browser = await puppeteer.launch( { executablePath : "/Applications/Google Chrome.app/Contents/ MacOS/Google Chrome" , }) ; const page = await browser.newPage() ; for (let i = 1; i <= 60; i++) { const path = `./tmp/frame_${i}.png` ; const html = getHtml({ ...props, frame }) ; await page.setContent(html) ; await page.setViewport({ width: 1200, height: 630 }) ; await page.screenshot( { path , }) ; } await browser.close() ; })();

  30. ಈըԽ͢Δ • ֤ϑϨʔϜͷը૾ΛFFmpegʹ৯ΘͤͨΒ׬੒ɻ

  31. མͱ݀͠ • Frame͝ͱͷHTMLΛར༻͢ΔͨΊɺCSSΞχϝʔγϣϯ͕࢖͑ͳ͍ • LinearҎ֎ͷΞχϝʔγϣϯʹ͸ͻͱखؒඞཁ

  32. OSSΛར༻͢Δ • ࣗલͰશ෦༻ҙ͢Δͷ͸ے͕ѱ͍ͷͰOSSΛ࢖͏ɻ • RemotionΛ࢖͏ͱΑ͍ɻ

  33. Remotion

  34. Remotion • ReactΛϨϯμϦϯάͨ݁͠ՌΛPuppeteerͰੜ੒ɺFFmpegͰ݁߹͠ ͨ΋ͷΛు͖ग़ͯ͘͠ΕΔ • طଘͷಈը΋ซ༻Մೳ • Webٕज़ͱطଘٕज़ʢAfter EffectsʣͷϋΠϒϦου͕Մೳɻ •

    ݸਓ΍খن໛ͳ૊৫ͳͲͰ͋Ε͹ແྉͰར༻Մೳɻ • ৄ͘͠͸ϥΠηϯεΛ֬ೝ͢Δ͜ͱɻ

  35. Remotionͷίʔυྫ import { useCurrentFrame } from "remotion" ; export const

    MyVideo = () => { // ݱࡏͷϑϨʔϜ਺Λऔಘ const frame = useCurrentFrame(); return ( <div style={{ flex: 1, justifyContent: "center", alignItems: "center" }} > The current frame is {frame} . </div > ) ; } ; export const RemotionVideo: React.FC = () => ( < > <Compositio n id="MyVideo " component={MyVideo } durationInFrames={150 } fps={30 } width={1920 } height={1080 } / > </ > )

  36. զʑʹ͸Կ͕Ͱ͖Δͷ͔

  37. PuppeteerΛར༻͢ΔϝϦοτ • ෳ਺ͷٕज़Λ૊Έ߹Θͤͯ࡞ΕΔ • Canvas΍WebGLΛ෦෼తʹऔΓೖΕΒΕΔɻ • ୯ಠͰ΍Γ͖Δʹ͸ݫ͍͠දݱͰ΋࡞Γ΍͍͢ɻ • ͢ͰʹWebʹ͋Δࢿ࢈Λ࢖ͬͨ΋ͷΛը૾ԽɾಈըԽ͢Δ͜ͱͰϝ Ϧοτ͕ੜ·ΕΔɻ

    • σʔλϏδϡΞϥΠθʔγϣϯͷ·ͱΊͱ͔ɻ

  38. ࣮ੈքͰ࢖͏ʹ͸ϋʔυϧ͕ • 🤔 ࣮͸ɺಈը࡞੒ͷSaaSͷํ͕खܰͰߴ඼࣭ͳ΋ͷΛ࡞Γ΍͍͢ • AfterEffectsΛ࢖͏ํ͕ϕλʔͳ͜ͱ͕ଟ͍ɻ • ࡞੒ର৅࣍ୈͰϝϦοτʹͳΔ෦෼͸ੜ·Εͯ͘Δͱࢥ͏ɻ • ձࣾͰ΋࢖͍ॴΛ࢕͍ͬͯΔ

    • ಈը੍࡞Λษڧͯͨ͠ΒɺAfterEffectsͷ࿅౓্͕͕ͬͨɻ