React + TextAliveでカッコいいLyric Applicatioinを作ろう!! - Speaker Deck

React + TextAliveでカッコいいLyric Applicatioinを作ろう!!

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

Re a ct + TextAliveͰΧοί͍͍ Lyric Applic a tionΛ࡞Ζ͏!! @tosuri13

Slide 2

Slide 2 text

@tosuri13 ࣗݾ঺հ ͱ͢Γ @tosuri13 MOTEXגࣜձࣾ ॴଐ 🐧 ΃Μ͗Μ͕޷͖Ͱ͢

Slide 3

Slide 3 text

ಥવMVΛ࡞ͬͯ΄͍͠!!ͱݴΘΕͨΒͲ͏͠·͔͢!? @tosuri13

Slide 4

Slide 4 text

ಥવMVΛ࡞ͬͯ΄͍͠!!ͱݴΘΕͨΒͲ͏͠·͔͢!? → ࣗ෼͸Re a ctΛ࢖͍·͢( • ө • ) @tosuri13

Slide 5

Slide 5 text

@tosuri13 Re a ctͰMV͕࡞ΕΔͷ!? …ͱ͍͏ͷ͸ྲྀੴʹ৑ஊͰ͕͢ɺRe a ctͱ͜Ε͔Β࿩͢TextAliveͱ͍͏αʔϏε Λ૊Έ߹ΘͤΔ͜ͱͰɺWeb্Ͱಈ࡞͢ΔMVϥΠΫͳΞϓϦέʔγϣϯΛ࡞੒͢ Δ͜ͱ͕Ͱ͖·͢!! ࠓ೔͸TextAliveͷ֓ཁ΍Re a ct + TextAliveΛ࢖ͬͨϦϦοΫΞϓϦͷ࡞ྫΛ঺հ ͍ͯ͜͠͏ͱࢥ͍·͢!!

Slide 6

Slide 6 text

TextAliveʹ͍ͭͯղઆ!! @tosuri13

Slide 7

Slide 7 text

@tosuri13 TextAliveͱ͸? TextAliveͱ͸ɺWeb্ʹެ։͞Ε͍ͯΔָۂͱՎࢺΛొ࿥͢Δ͜ͱͰࣗಈղੳ Λߦ͍ɺղੳ৘ใͱطଘͷMVςϯϓϨʔτͱ૊Έ߹ΘͤΔ͜ͱͰɺΦϦδφϧͷ MVΛ࡞੒Ͱ͖ΔWebαʔϏεͰ͢!! Web্ʹެ։ ͞Ε͍ͯΔָۂ TextAliveαʔό ղੳ৘ใΛ࢖༻ͯ͠ ΦϦδφϧMVΛੜ੒!! ָۂͱՎࢺΛొ࿥͢Δ ͚ͩͰࣗಈͰղੳ!!

Slide 8

Slide 8 text

@tosuri13 ͜Μͳײ͡Ͱࣗಈੜ੒Ͱ͖·͢!! TextAliveͷαϯϓϧಈը (Spe a kerdeckͰ͸ݟΕ·ͤΜ!!)

Slide 9

Slide 9 text

@tosuri13 TextAliveΛ࢖ͬͯWebΞϓϦΛ࡞ΕΔ!! TextAliveʹ͸ָۂͷղੳ৘ใΛJ a v a ScriptͰѻ͏ͨΊͷTextAlive App API͕ެ ։͞Ε͓ͯΓɺͪ͜ΒΛར༻͢Δ͜ͱʹΑͬͯWeb্ͰTextAliveͷָۂ৘ใΛ࢖ ༻ͨ͠ϦϦοΫΞϓϦΛಠࣗʹߏங͢Δ͜ͱ͕Ͱ͖·͢!!

Slide 10

Slide 10 text

@tosuri13 TextAliveͷ࢖͍ํ with Re a ct ᶃ TextAliveͷ։ൃऀϙʔλϧͰऔಘͨ͠τʔΫϯΛݩ ʹɺTextAliveͷPl a yerΠϯελϯεΛ࡞੒͠·͢ ɹɾPl a yerΠϯελϯε͸ָۂΛ࠶ੜɾఀࢭ͢Δϝι ου΍ָۂͷ࠶ੜҐஔΛϓϩύςΟͱͯ͠อ͍࣋ͯ͠ ·͢ ᶃ ᶄ ᶅ ᶄ ͲͷλΠϛϯάͰԿΛ࣮ߦ͢Δ͔?ͱ͍͏Πϕϯτϋ ϯυϥΛPl a yerListnerͱͯ͠ొ࿥͠·͢ɻ ɹɾonTimerRe a dy: ָۂͷ४උ͕׬ྃͨ࣌͠ʹݺ͹ ΕΔϋϯυϥ ɹɾonTimeUpd a te: ָۂͷ࠶ੜதʹҰఆִؒͰݺ͹ ΕΔϋϯυϥ ᶅ ΠϕϯτϋϯυϥΛొ࿥͠ɺղੳָ͍ͨ͠ۂͷURL Λೖྗͯ͠ղੳ৘ใͷऔಘΛϦΫΤετ͠·͢

Slide 11

Slide 11 text

@tosuri13 ָۂͷՎࢺΛऔಘ͢Δ!! Phr a se Word Ch a r Ch a r Word ָۂͷղੳ͕ऴྃ͢Δͱɺpl a yerΠϯελϯε͔Βղੳ͞ΕָͨۂͷՎࢺ৘ใΛ औಘ͢Δ͜ͱ͕Ͱ͖·͢!! Վࢺͷߏ଄͸ҎԼͷΑ͏ͳ਌ࢠؔ܎ʹͳ͍ͬͯΔͨ ΊɺΞϓϦ্ͰॊೈʹऔΓѻ͏͜ͱ͕Ͱ͖·͢!! ͜͜Ζ ͽΐΜͽΐΜ ͜͜Ζ ͽΐΜͽΐΜ ɾɾɾ Ch a r Ch a r ɾɾɾ ͜ Ζ ͽ Μ ݴޠ΍඼ࢺɺൃੜλΠϛϯάͳͲΛ ϓϩύςΟͱ͍ͯ࣋ͬͯ͠·͢!!

Slide 12

Slide 12 text

@tosuri13 ଞʹ΋औಘͰ͖Δ৘ใ͸ͨ͘͞Μ!! Վࢺͷ৘ใҎ֎ʹ΋ɺΞʔςΟετͷ৘ใ΍ϏʔτͷִؒɺίʔυਐߦɺαϏͷ λΠϛϯάɺ੠ͷײ৘஋(VA)ͳͲ΋औಘ͢Δ͜ͱ͕Ͱ͖·͢!! ৄ͘͠͸TextAliveͷ։ൃऀϙʔλϧαΠτΛνΣοΫͯ͠Έ͍ͯͩ͘͞!! TextAlive App APIΛ࢖༻͢Δ͜ͱͰɺ MV࡞੒ʹඞཁͳ৘ใΛҰׅͰऔಘͰ͖Δ!!

Slide 13

Slide 13 text

TextAliveΛ࢖ͬͨαϯϓϧͷ঺հ!! @tosuri13

Slide 14

Slide 14 text

@tosuri13 ϦϦοΫΞϓϦͷ࡞ྫΛ͝঺հ!! ࣮ࡍʹͲͷΑ͏ͳ΋ͷ͕࡞੒Ͱ͖Δͷ͔ɺRe a ctͱTextAliveΛ࢖ͬͨ؆୯ͳϦϦ οΫΞϓϦΛ࡞ͬͯΈ·ͨ͠!! ҎԼͷURL͔Β࣮ࡍʹԻָ෇͖Ͱ৮Ε·͢!!(PC؀ڥͷΈ) ɹ- https://re a ct-text a live-lyric a pp-s a mple.vercel. a pp ίʔυ͸Github্Ͱ΋ެ։͍ͯ͠ΔͷͰɺڵຯͷ͋Δํ͸೷͍ͯΈ͍ͯͩ͘͞!! ɹ- https://github.com/tosuri13/re a ct-text a live-lyric a pp-s a mple

Slide 15

Slide 15 text

@tosuri13 ͜Μͳײ͡ͷϦϦοΫΞϓϦ͕࡞Ε·͢!! ϦϦοΫΞϓϦͷαϯϓϧಈը (Spe a kerdeckͰ͸ݟΕ·ͤΜ!!)

Slide 16

Slide 16 text

@tosuri13 গ͚ͩ͠ίʔυͷղઆ ԻָͱҰॹʹ༳Ε͍ͯΔগঁͷ෦෼͚ͩղઆ͠·͢!! TextAliveͰ͸Ϗʔτͷִ͕ؒऔಘͰ͖ΔͷͰɺͦΕΛΞχϝʔγϣϯͷִؒͱ͠ ͯઃఆ͢Δ͜ͱͰɺԻָͱಉظͨ͠Ξχϝʔγϣϯ͕࡞੒Ͱ͖·͢!! ָۂ৘ใΛऔಘ HookͰ؅ཧ ΞχϝʔγϣϯΛߦ͏ TextAlive Re a ct Fr a mer Motion

Slide 17

Slide 17 text

@tosuri13 Իָʹ༳ΕΔগঁͷίʔυ ᶃ ᶄ ᶃ MusicContext͸TextAliveͷղੳ৘ใΛ֨ೲͯ͠ ͍ΔίϯςΩετͰɺuseContextΛ࢖ͬͯάϩʔ όϧʹҾ͖ճͤΔΑ͏ʹ͍ͯ͠·͢ɻ ᶄ ·ͣuseE ff ectͰϏʔτͷมߋΛΩϟονͯ͠ॲ ཧΛ૸Βͤ·͢ɻ Ϗʔτ͕มߋ͞ΕͨΒɺTextAlive͔Βऔಘͨ͠Ϗʔ τͷִؒɾΠϯσοΫεΛ࢖ͬͯɺը૾Λࠨӈʹϩ ʔςʔγϣϯͤ͞·͢ɻ ͨͬͨ਺ߦͰԻָͱಉظͨ͠ՄѪ͍Ξχϝʔγϣϯ ͷ׬੒Ͱ͢!!

Slide 18

Slide 18 text

·ͱΊ @tosuri13

Slide 19

Slide 19 text

@tosuri13 ·ͱΊͱײ૝ ࠓճ࡞੒ͨ͠Α͏ͳϦϦοΫΞϓϦέʔγϣϯͰ͸ɺ୯७ʹMVΛެ։͢ΔҎ্ ͷΠϯλϥΫγϣϯΛ౥ࡌ͢Δ͜ͱ͕Ͱ͖·͢!! ࣗ਎ͰԻָΛ࡞ΒΕ͍ͯΔΑ͏ͳํ΍ԻָΛ࢖ͬͨWebΞϓϦʹڵຯͷ͋Δํ͸ ͥͻ৮ͬͯΈͯ΄͍͠Ͱ͢!!

Slide 20

Slide 20 text

@tosuri13 ࠷ޙʹએ఻!! ຖ೥TextAliveΛ࢖༻ͨ͠ϦϦοΫΞϓϦΛ࡞੒͢Δϓϩάϥϛϯάίϯςετ͕ ։࠵͞Ε͍ͯ·͢!!ڵຯͷ͋Δํ͸νΣοΫͯ͠Έ͍ͯͩ͘͞!! https://m a gic a lmir a i.com/2024/procon ࠓ೥͸༏ल৆Λ͍͚ͨͩ·ͨ͠!!

Slide 21

Slide 21 text

@tosuri13 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!