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
140
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
400
Reactルーター選定術 2020年のファイナルアンサー
hanakla
2
4.8k
動画編集ソフトを作るための基礎知識
hanakla
1
400
Other Decks in Programming
See All in Programming
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
670
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
910
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
850
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
460
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
860
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
GAEログのコスト削減
mot_techtalk
0
130
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
350
Domain-Driven Transformation
hschwentner
2
1.9k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
160
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Done Done
chrislema
182
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Become a Pro
speakerdeck
PRO
26
5.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
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