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
Research and Development of "Delir" at Nov, 2016
Search
Hanakla
November 27, 2016
Programming
0
150
Research and Development of "Delir" at Nov, 2016
開発中のVFXアプリ "Delir"について、社内勉強会で話したものに補足したりしたもの
Hanakla
November 27, 2016
Tweet
Share
More Decks by Hanakla
See All by Hanakla
ピクシブの Contentful 利用事情 (2021)
hanakla
2
420
Reactルーター選定術 2020年のファイナルアンサー
hanakla
2
4.9k
動画編集ソフトを作るための基礎知識
hanakla
1
420
Other Decks in Programming
See All in Programming
CSC305 Lecture 02
javiergs
PRO
1
270
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
210
Devvox Belgium - Agentic AI Patterns
kdubois
1
100
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
430
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
980
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
550
CSC305 Lecture 03
javiergs
PRO
0
240
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
CSC509 Lecture 01
javiergs
PRO
1
440
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.7k
Building Adaptive Systems
keathley
43
2.8k
How to Think Like a Performance Engineer
csswizardry
27
2k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Modern Web Designer's Workflow
chriscoyier
697
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Writing Fast Ruby
sferik
629
62k
Six Lessons from altMBA
skipperchong
28
4k
Bash Introduction
62gerente
615
210k
Documentation Writing (for coders)
carmenintech
75
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Transcript
3FTFBSDI"OE%FWFMPQNFOU PGl%FMJSz !@SBHH@
l%FWFMPQNFOUz
%FMJSͱ w +BWB4DSJQUͷ7'9ج൫ɾΞϓϦέʔγϣϯ ಡΈzσϦʔϧz w 8FCٕज़ͱϓϥάΠϯۦಈ ʢඪ४ػೳͰ͖Δ͚ͩϓϥάΠϯͰ࣮͢ΔϓϥάΠϯओ࣮ٛʣ w "GUFS&⒎FDUTͷύΫΓʢύΫΕͳ͍ʣ
Ϟνϕʔγϣϯ w "GUFS&⒎FDUT ˠΊͬͪΌΑ͍ ɹɾλΠϙάϥϑΟΊͬͪΌѻ͍͍͢ ɹɾඪ४ϓϥάΠϯॆ࣮ͯ͠Δ ɹɾ%ͱ͔Χϝϥͱ͔ͨΓલʹ͑Δ ˠ͔͠͠ʜ ɹɾϨϯμϦϯά͕ͳΜ͔ͩͱͬͯॏ͍ ɹɾΤΫεϓϨογϣϯͱKTY͘Β͍͔͠εΫϦϓςΟϯά͕ग़དྷͳ͍
ɹɾϐΫηϧΛ৮Ζ͏ͱ͢Δͱ͍͖ͳΓಥ͖͚ͭΒΕΔ ɹɹෳࡶͳߏͱӳޠϦϑΝϨϯεͱ$
Ϟνϕʔγϣϯ w "WJ6UM ˠϑϦʔΣΞͰجຊతͳػೳἧͬͯΔ ˠίϛϡχςΟ͕ڧ͍ ɹɾෳࡶͳϓϥάΠϯ͕ΊͬͪΌެ։͞ΕͯΔ ɹɾ--ݴޠʢ-VBʣΛ࠾༻͍ͯ͠ΔͷͰ৮Γ͍͢ ˠ͔͠͠ʜ ɾ࣮ߦڥ͕8JOEPXTͷΈʜ 㱯✱A㱯
NBDʜ ɾ։ൃ͕ఀ͍ͯ͠Δʢ࠷ऴߋ৽͕ɻظ։ൃ͓ർΕ༷Ͱ͢ʜʣ
rϫΠ8FCΤϯδχΞ ࠓͳΒ8FCٕज़Ͱ"&ແཧͰ "WJ6UM͘Β͍·ͰΠέΔΜ͡Όͳ͔Ζ͏͔ʜ 8FC(-ͱ͔8FC8PSLFSͱ͔͋Δ͠ʜ
ͱ͍͏ઙΊͷϞνϕʔγϣϯͱح৺Ͱ %FMJSͷ։ൃ͡Ί·ͨ͠ ٩ Т و-FU`TEJWFUP)&--PG8FC5FDIOPMPHZ
͍·ͷͱ͜Ζͷඪ w શମ ΫϩεϓϥοτϑΥʔϜରԠ͍ͨ͠ w ϨϯμϦϯάج൫ʢө૾ͷॻ͖ग़͠ʣ ΞϧϑΝ͖ಈըͷॻ͖ग़͠Λαϙʔτ͍ͨ͠ ɹʢϝΠϯฤूʹ͑ͳͯ͘ɺ෦తͳૉࡐө૾࡞Δͷʹ͑Δ͘Β͍ʹ͍ͨ͠ʣ w ϓϥάΠϯج൫
ϢʔβʔϝΠυͷϓϥάΠϯΛ͑ΔΑ͏ʹ͍ͨ͠ʢͱ͔Ͱ͖ΔΑ͏ʹʣ ̍࡞ઐ༻ʹؾܰʹॻ͖ࣺͯͰ͖ΔεΫϦϓςΟϯάΛͰ͖ΔΑ͏ʹ͍ͨ͠ 8FC(-ɾ8FC"VEJPɾ$BOWBT͋ͨΓΛ͑ΔΑ͏ʹ͍ͨ͠ w ϑϩϯτΤϯυʢ6*ʣ ͳΜ͔Α͠ͳʹোΓͳ͍͘Β͍ʹ͍ͨ͠
ͰɺਐḿͲ͏Ͱ͔͢ʁ w શମ ɾ·ͩ։ൃػͷNBD04Ͱ͔͠ಈ͔ͯ͠ͳ͍ w ϨϯμϦϯάج൫ʢө૾ͷॻ͖ग़͠ʣ ɾͱΓ͋͑ͣNQॻ͖ग़͠Ͱ͖Δ͕ɺ։ൃڥͷNBD04Ͱ͔͠ಈ࡞֬ೝ͕औΕͯͳ͍ ɾͨΊ͠ʹ6U7JEFPͰग़ྗͨ͠Βಁաͷॻ͖ग़͠ग़དྷ֮ͨ͑ʢ͏Ζ֮͑ʣ w ϓϥάΠϯج൫
ɾϓϥάΠϯ͕zԿ͔zΛϨϯμϦϯά͢Δ·ͰͷΈͰ͖ͯΔ ɹɾ"&ͷΑ͏ͳϓϨϏϡʔը໘্ͰஔΛม͑ͨΓ͢ΔΈશ͘ग़དྷͯͳ͍ʢߟ͑ͯΔʣ ɾॻ͖ࣺͯεΫϦϓςΟϯάͷΈ΅ΜΓߟ͑ͯΔ࠷த ɾඪ४ػೳΛϓϥάΠϯͱ࣮ͯ͠͠ͳ͕Βςετͯ͠Δ ɹɾ)5.-7JEFPʹΑΔಈըϑΝΠϧͷಡΈࠐΈͰ͖Δ ɹɾBVSPSBKTʹΑΔԻͷσίʔυͱಉ࣌̍ԻݯͷԻॻ͖ग़͠Ͱ͖ͯΔʢΫιβίʣ w ϑϩϯτΤϯυ ɾΨόΨόϦςΟ͕ߴ͍
։ൃதϏϧυͷεΫϦʔϯγϣοτ
)5.-Ͱz͋ͨΓ·͑ͷಈ͖zΛ࣮͢ΔͷΊΜͲ͗͢ʜ ✌ 㾕̀◔ʆ ✌
ͦΕͦΕͱͯຊ
z3FTFBSDIz
%FMJS͕ར༻͍ͯ͠Δٕज़ w 1MBUGPSN &MFDUSPO w 'SPOU&OE )5.-+BWB4DSJQU$44 w #BDLFOE 1MVHJO3FOEFSJOHTZTUFN
+BWB4DSJQU/PEFKT$ ·ͩೖΕͯͳ͍͚Ͳʣ w &ODPEFS ⒎NQFH
ࠓճ͜͜ͷΛ͠·͢ w 1MBUGPSN &MFDUSPO w 'SPOU&OE )5.-+BWB4DSJQU$44 w #BDLFOE 1MVHJO3FOEFSJOHTZTUFN
+BWB4DSJQU/PEFKT$ ·ͩೖΕͯͳ͍͚Ͳʣ w &ODPEFS ⒎NQFH ͞ΘΓ͚ͩ͢
&MFDUSPOͱ w $ISPNJVN 8FC#SPXTFS ʹ /PEFKTΛࡌ͚ͬͨͭ w )5.-$44+4ͰσεΫτοϓΞϓϦΛ࡞ΕΔ
&MFDUSPOͱ w /PEFKT"1*͕͑ΔͷͰϑΝΠϧͷಡΈॻ͖ Ͱ͖Δ w &MFDUSPO"1*ͰϑΝΠϧอଘϞʔμϧͱ͔ ϥοϓ͞ΕͯΔ w ͔͠)5.-ܥͷ"1*͑Δ͔Β 8FC"VEJP
7JEFP 8FC8PSLFS $BOWBT ͍์
৭ʑͰ͖Δ
͡Ό͋ͳʹΔʁ
rϫΠ l7'9ج൫ͭ͘ΕΔ͡ΌΜz
ͱΓ͋͑ͣ*0ΛΜͰΈΔ w 0VUQVU$BOWBTΛNQʹม͢Δ w *OQVUNQΛ$BOWBTʹసࣸ͢Δ
$BOWBT͔ΒNQ /PEFKT ⒎NQFH͏ͱ̎̌ߦ͘Β͍ͰΊͯ༏উͰ͖Δ ྲྀΕ w <+4>$BOWBT%$POUFYUHFU*NBHF%BUBͰ3(#"ॱͷੜσʔλΛ औΔ w </PEFKT>͓ΉΖʹ⒎NQFHΛDIJME@QSPDFTTTQBXO͢Δ A⒎NQFHGSBNFSBUFೖྗ'14JQJQFDWQOH@QJQFDWMJCYCWLSZPVUQVU@QBUIA
w <+4/PEFKT>3(#"ͷ"SSBZ#V⒎FSΛ#V⒎FSʹมͯ͠⒎NQFH ͷඪ४ೖྗʹྲྀ͢ w Ά͠ΜͰ͍ͨΒө૾͕ग़དྷ্͕͍ͬͯͨʜ
import fs from "fs" import {spawn} from "child_process" import canvasToBuffer
from 'electron-canvas-to-buffer' window.addEventListener('DOMContentLoaded', () => { const FRAMERATE = 30 const VIDEO_DURATION_SEC = 30 const OUTPUT_FRAMES = VIDEO_DURATION_SEC * 30 const cRand = () => ((Math.random() * 256) | 0).toString(16) const canvas = document.querySelector(‘#canvas’) Object.assign(canvas, {width: 640, height: 360}) const ctx = canvas.getContext('2d') const encoder = spawn('ffmpeg', `-i pipe:0 -framerate ${FRAMERATE} -c:v png_pipe -c:v libx264 -r ${OUTPUT_FRAMES} -s 640x360 test.mp4`.split(' ')) for (let i = 0; i < OUTPUT_FRAMES i++) { ctx.fillStyle = '#' + [cRand(), cRand(), cRand()].join('') ctx.fillRect(0, 0, 640, 360) let buffer = canvasToBuffer(canvas, 'image/png') encoder.stdin.write(buffer) } encoder.stdin.end() })
NQ͔Β$BOWBT w )5.-7JEFPͳΒNQಡΊΔ͠ $BOWBTͷసࣸඪ४Ͱαϙʔτ͞ΕͯΔ✨
͔͠͠ʜ w σίʔυॏ͍ɾ͍ ͨͩͷ࠶ੜͳΒͳ͍͚Ͳ ҙͷϑϨʔϜγʔΫ͠ଓ͚ΔͱGQT͘Β͍Ͱਫ਼Ұഋ WJEFPλάΑΓԼͷϨΠϠʔωΠςΟϒ͔ͩΒ࠷దԽͷ༨ͳ͍ʜ w ରԠܗࣜগͳ͍ʢʂʣ ɾNQ )
8FC. PHWˠෆՄٯ )ՄٯͰ͖ΔͬΆ͍͚Ͳʜʣ ɾ"MQIB͖ͷܗࣜαϙʔτ͞Εͯͳ͍ ɹʢΫϩϚΩʔ͢Εͱ͔ͦ͏͍͏͡Όͳ͍ɺ"MQIB͖ಈը͕͍͍ͨʣ w Ͳͦ͜͜ͷϒϩάͰࢄʑॻ͖ࣺͯΒΕͨํ๏Ͱͭ·Βͳ͍
ͦΕͰ7'9πʔϧͷͭΓ͔ʁʁʁʁʈʈʀ
㱯✱A㱯 Ͳ͏͢Ε͍͍Μͩʜ
rԶࢯ l/PEFKT͕͑Δͬͯ͜ͱʜʜ $ ͕͑Δͬͯ͜ͱͩΑʢʁʁʁʣz
/PEF/BUJWF"EEPOT
/PEFKT/BUJWF"EEPOT w /PEFKTͳΒ$ όΠφϦͷ+4όΠϯσΟϯά͕ग़དྷ Δ w ⒎NQFHͷ෦ͰΘΕͯΔAMJCBWDPEFDAΛ͑ ϑϨʔϜ୯ҐͷσίʔσΟϯάͰ͖ͦ͏ w ͱΓ͋͑ͣMJCBWDPEFDͷόΠϯσΟϯά͕ͳ͍͔୳͢
͋ͬͨ 0QUJNBM#JUTOBWDPEFD
͜Ε ЋΛϑΥʔΫͨ͠ͷΛ࿔ͬͯ ετϦʔϜϦʔυग़དྷΔΑ͏ʹ͢Δ ྲྀΕ w +4͔Βಡ·͍ͤͨϑΝΠϧͷύεΛ͢ w MJCBWDPEFDʹಈըϑΝΠϧΛ৯ΘͤΔ w $
্Ͱ̍ϑϨʔϜΛ3(#"ྻʹσίʔυ͢Δ w ϑϨʔϜ͕औΕͨΒ"SSBZ#V⒎FSʹͯ͠+4ͷੈքʹؼ͢ w "SSBZ#V⒎FSΛ*NBHF%BUBʹίϐʔͯ͠$BOWBTʹు͔ͤΔ
w SFRVFTU"OJNBUJPO'SBNFͷݶքʢGQTʣग़Δ IUUQTHJUIVCDPN3BHHOBWDPEFDDPNNJUB w )5.-7JEFPͩͱಉ͡ಈըιʔεͰGQT͘Β͍
ʜ͕ʜ͕ʜ w ө૾ฤूதϥϯμϜͳϑϨʔϜʹΞΫηε͞ΕΔ ҰํͷϦʔυ͔͠·ͩग़དྷͯͳ͍ͷʹʜʂ w Ͳ͏ͬͯΩϟογϡ͢ΔΜ͡Όʜʜ ΊͬͪΌσΟεΫ༰ྔ৯͏ະདྷ͔͠ݟ͑Μͷ͡Όʜ w ᷚʹΑΔͱMJCNQWͱ͔⒎NTͱ͔͋ΔΒ͍͠ ˠ⒎NTΑ͛͞
ɾϑΝΠϧ৯ΘͤΔͱΩʔϑϨʔϜʹΠϯσοΫεషͬͯ͘ΕΔͬΆ͍ ɹߴʹγʔΫͰ͖ͦ͏ ɾ͔͠͠MJCNQWσίʔυ·ͰରԠ͍ͯ͠ΔΒ͍͠ ɾௐࠪத
Ͱ͖Δͱ͔ͬͨ͠ͱΓ͋͑ͣΑ͠ Α͠ͳʹ࣮Ͱ͖ͨΒϓϥάΠϯԽ࣮ͯ͢͠Δ
ʻௐࠪதʼ ΦʔσΟΦɹ8FC"VEJPͰ͍ͨ͠ΑͶʁʁʁ
ө૾ฤूʹϦΞϧλΠϜΦʔσΟΦ͔ܽͤͳ͍ΑͶ w 8FC"VEJP"1*·͞ʹϦΞϧλΠϜԻॲཧͷ"1* w (BJO/PEFͰԻྔௐ͕Ͱ͖Δ w 1BOOFS/PEF"VEJP-JTUFOFSͱ͔͑ ཱମԻڹͱ͔Ͱ͖Δ w ''5Βͳͯ͘"OBMZ[FS/PEFͰ࣮Ͱ͖ͨΓ͢Δ
w -(5.
͕ʜ
8FC"VEJPετϦʔϜ w ฤूதϦΞϧλΠϜॲཧͰ͍͍͔͠Εͳ͍ w ͔͠͠ϨϯμϦϯάͰϦΞϧλΠϜࠔΔʂ ɾग़ྗΛΩϟϓνϟ͠ͳ͍ͱ͍͚ͳ͍ ɾܾ·ͬͨαΠζຖʹ΄͍͠ ɹɾ͔͠͠ετϦʔϜͩͱඇৗʹॲཧͮ͠Β͍ ɹɹ 8FC"VEJP͕͖উखͳλΠϛϯάͰετϦʔϜΛ৯͏ʣ
·͊8FC"VEJPఘΊͯ "SSBZ#V⒎FSͰશ෦ॲཧ͢Ε͍͍͔ ग़ྗͷ߹͕ॏ͔ͬͨΒ8FC(-ʹϛΩγϯάͤ͞ΕΔͰ ͠ΐʜ
ʁʮ·͋ͪͨ·͑ʯ
r.%/ l0⒐JOF"VEJP$POUFYUz
0⒐JOF"VEJP$POUFYU w 8FC"VEJPͷ"1*ͦͷ··Ͱ lҰఆͷॲཧΛҰؾʹߦ͏zͭ w ϊϯϦΞϧλΠϜ w "VEJP$POUFYUͱޓ͕͋Δ "VEJP$POUFYUˠOPEFDPOOFDU BVEJP$UYEFTUJOBUJPO
0⒐JOF"VEJP$POUFYUˠOPEFDPOOFDU P⒐JOF"VEJP$UYEFTUJOBUJPO
%FMJS"SSBZ#V⒎FS࣌Ͱࢭ·ͬͯΔͷͰະݕূͰ͢ʜ ݕূͰ͖ͨΒ͓͠·͢
ʻௐࠪதʼ +4ͰɹϚϧνεϨουɹͯ͠༏উ
+BWB4DSJQUͷϚϧνεϨοσΟϯάࣄ w /PEF Ͱ͖ͳ͘ͳ͍͚Ͳ%FMJSͰ͑ΔϨϕϧ͔ͱ͍͏ͱ/P ʢޙड़͢Δ"1*͕͑ͳ͍ʣ w 8FC ڧ͍ʢ͍Δʣ
8FCͷϚϧνεϨοσΟϯάࣄ w 8FC8PSLFS ֎෦ͷεΫϦϓτΛผεϨουͰ࣮ߦͰ͖Δ ϝΠϯεϨουͱͷ௨৴+40/ԽՄೳͳΦϒδΣΫτͱϓϦϛςΟϒͳ Ͱ͔͠Ͱ͖ͳ͔͕ͬͨ 5SBOTGFSBCMF"VEJP8PSLMFU ະ࣮ ͷొͰঢ়گ͕มΘͬͨ
5SBOTGFSBCMF w ผεϨουʹసૹՄೳͳΦϒδΣΫτ "SSBZ#V⒎FS 0⒎TDSFFO$BOWBT$POUFYU w ͍··Ͱ"SSBZ#V⒎FS+40/ʹίϐʔͯ͠ૹ৴͍ͯͨ͠ ʢΊͬͪΌॏ͔ͬͨʣ w େ͖ͳαΠζͷσʔλΛૉૣ͘సૹͰ͖ΔΑ͏ʹͳͬͨ
w సૹ͞ΕͨΦϒδΣΫτϝΠϯεϨου͔Βར༻Ͱ͖ͳ͘ͳΔ ʢத͕ۭͬΆʹͳͬͨΓɺOVMMʹͳͬͨΓ͢Δʣ
0⒎TDSFFO$BOWBT$POUFYU w $BOWBT$POUFYU͕ผεϨουʹసૹͰ͖ΔΑ͏ ʹͳͬͨ %$POUFYU 8FC(-͕ผεϨουͰಈ͔ͤΔΑ͏ʹͳͬͨ w ొҎલͰ*NBHF%BUB "SSBZ#V⒎FS ΛసૹͰ͖͚ͨͲ
8PSLFSεϨουͰ$BOWBT"1*͕શ͑͘ͳ͔ͬͨͷͰɺ ϐΫηϧ୯ҐͰσʔλΛมߋ͢Δ͔͠ͳ࣮͘༻త͡Όͳ͔ͬͨ w SFRVFTU"OJNBUJPO'SBNFͳͲ8PSLFSεϨου্ʹͳ͍ͷͰ ϝΠϯεϨουͱΑ͠ͳʹಉظΛͱΔ
"VEJP8PSLMFU ະ࣮ w 4DSJQU1SPDFTTPS/PEFΛผεϨουͰॲཧͰ͖ΔΑ͏ʹͳΔʢͣʣ w 4DSJQU1SPDFTTPS/PEF8FC"VEJPͷ৴߸ॲཧΛࣗͰ࣮͢Δ࣌ʹ͏ ΦϒδΣΫτ w "VEJP8PSLFSͱ͔ࣅͨΑ͏ͳ༷ʢ࣮ʣ͚͋ͬͨͲ আ͞Εͨ
ͷ͠Ͳ͜Ζ w 5SBOTGFSBCMFΛআ͘ͱ+40/ʹγϦΞϥΠζՄ ೳͳσʔλ͔͠ૹ৴Ͱ͖ͳ͍ ˠྻΦϒδΣΫτΛ্खͬͯ͘ΓऔΓ w ඇಉظʹϝοηʔδΛ͛߹͏͜ͱͰ͔͠ 8PSLFSͱΓऔΓͰ͖ͳ͍ ˠॲཧॱংͷ߹ੑࣗͰऔΒͳ͍ͱ͍͚ͳ͍
ͬͪ͜·ͩݕূͰ͖ͯͳ͍Ͱ͢ ݕূͰ͖ͨΒ͓͠·͢
ͦΜͳ͜ΜͳͰ ௐࠪ͠ͳ͕Β։ൃͯ͠·͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ʘʘaa ۶w Aᴗw ۶ʗʗ UXJUUFS!@SBHH@
%FMJSMJOLT w αΠτલ IUUQEFMJSTUVEJP w (JU)VC IUUQTHJUIVCDPN3BHHEFMJS w ਐḿμϝͰ͢ IUUQTUSFMMPDPNC8J/[EFMJS