$30 off During Our Annual Pro Sale. View Details »
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
160
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
430
Reactルーター選定術 2020年のファイナルアンサー
hanakla
2
4.9k
動画編集ソフトを作るための基礎知識
hanakla
1
420
Other Decks in Programming
See All in Programming
AIエージェントの設計で注意するべきポイント6選
har1101
5
2.4k
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
290
AIコーディングエージェント(NotebookLM)
kondai24
0
230
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
170
perlをWebAssembly上で動かすと何が嬉しいの??? / Where does Perl-on-Wasm actually make sense?
mackee
0
130
Flutter On-device AI로 완성하는 오프라인 앱, 박제창 @DevFest INCHEON 2025
itsmedreamwalker
1
150
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
7
2.3k
re:Invent 2025 トレンドからみる製品開発への AI Agent 活用
yoskoh
0
360
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう!
neruneruo
4
1.8k
Python札幌 LT資料
t3tra
7
1k
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
philipschwarz
PRO
0
110
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
170
Featured
See All Featured
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
31
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1k
My Coaching Mixtape
mlcsv
0
13
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Embracing the Ebb and Flow
colly
88
4.9k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
0
950
The browser strikes back
jonoalderson
0
120
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
74
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
100
Scaling GitHub
holman
464
140k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
260
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