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

Transcript

1. Re a ct + TextAliveͰΧοί͍͍ Lyric Applic a tionΛ࡞Ζ͏!! @tosuri13
2. @tosuri13 ࣗݾ঺հ ͱ͢Γ @tosuri13 MOTEXגࣜձࣾ ॴଐ 🐧 ΃Μ͗Μ͕޷͖Ͱ͢
3. ಥવMVΛ࡞ͬͯ΄͍͠!!ͱݴΘΕͨΒͲ͏͠·͔͢!? @tosuri13
4. ಥવMVΛ࡞ͬͯ΄͍͠!!ͱݴΘΕͨΒͲ͏͠·͔͢!? → ࣗ෼͸Re a ctΛ࢖͍·͢( • ө • ) @tosuri13
5. @tosuri13 Re a ctͰMV͕࡞ΕΔͷ!? …ͱ͍͏ͷ͸ྲྀੴʹ৑ஊͰ͕͢ɺRe a ctͱ͜Ε͔Β࿩͢TextAliveͱ͍͏αʔϏε Λ૊Έ߹ΘͤΔ͜ͱͰɺWeb্Ͱಈ࡞͢ΔMVϥΠΫͳΞϓϦέʔγϣϯΛ࡞੒͢ Δ͜ͱ͕Ͱ͖·͢!! ࠓ೔͸TextAliveͷ֓ཁ΍Re a ct + TextAliveΛ࢖ͬͨϦϦοΫΞϓϦͷ࡞ྫΛ঺հ ͍ͯ͜͠͏ͱࢥ͍·͢!!
6. TextAliveʹ͍ͭͯղઆ!! @tosuri13
7. @tosuri13 TextAliveͱ͸? TextAliveͱ͸ɺWeb্ʹެ։͞Ε͍ͯΔָۂͱՎࢺΛొ࿥͢Δ͜ͱͰࣗಈղੳ Λߦ͍ɺղੳ৘ใͱطଘͷMVςϯϓϨʔτͱ૊Έ߹ΘͤΔ͜ͱͰɺΦϦδφϧͷ MVΛ࡞੒Ͱ͖ΔWebαʔϏεͰ͢!! Web্ʹެ։ ͞Ε͍ͯΔָۂ TextAliveαʔό ղੳ৘ใΛ࢖༻ͯ͠ ΦϦδφϧMVΛੜ੒!! ָۂͱՎࢺΛొ࿥͢Δ ͚ͩͰࣗಈͰղੳ!!
8. @tosuri13 ͜Μͳײ͡Ͱࣗಈੜ੒Ͱ͖·͢!! TextAliveͷαϯϓϧಈը (Spe a kerdeckͰ͸ݟΕ·ͤΜ!!)
9. @tosuri13 TextAliveΛ࢖ͬͯWebΞϓϦΛ࡞ΕΔ!! TextAliveʹ͸ָۂͷղੳ৘ใΛJ a v a ScriptͰѻ͏ͨΊͷTextAlive App API͕ެ ։͞Ε͓ͯΓɺͪ͜ΒΛར༻͢Δ͜ͱʹΑͬͯWeb্ͰTextAliveͷָۂ৘ใΛ࢖ ༻ͨ͠ϦϦοΫΞϓϦΛಠࣗʹߏங͢Δ͜ͱ͕Ͱ͖·͢!!
10. @tosuri13 TextAliveͷ࢖͍ํ with Re a ct ᶃ TextAliveͷ։ൃऀϙʔλϧͰऔಘͨ͠τʔΫϯΛݩ ʹɺTextAliveͷPl a yerΠϯελϯεΛ࡞੒͠·͢ ɹɾPl a yerΠϯελϯε͸ָۂΛ࠶ੜɾఀࢭ͢Δϝι ου΍ָۂͷ࠶ੜҐஔΛϓϩύςΟͱͯ͠อ͍࣋ͯ͠ ·͢ ᶃ ᶄ ᶅ ᶄ ͲͷλΠϛϯάͰԿΛ࣮ߦ͢Δ͔?ͱ͍͏Πϕϯτϋ ϯυϥΛPl a yerListnerͱͯ͠ొ࿥͠·͢ɻ ɹɾonTimerRe a dy: ָۂͷ४උ͕׬ྃͨ࣌͠ʹݺ͹ ΕΔϋϯυϥ ɹɾonTimeUpd a te: ָۂͷ࠶ੜதʹҰఆִؒͰݺ͹ ΕΔϋϯυϥ ᶅ ΠϕϯτϋϯυϥΛొ࿥͠ɺղੳָ͍ͨ͠ۂͷURL Λೖྗͯ͠ղੳ৘ใͷऔಘΛϦΫΤετ͠·͢
11. @tosuri13 ָۂͷՎࢺΛऔಘ͢Δ!! Phr a se Word Ch a r Ch a r Word ָۂͷղੳ͕ऴྃ͢Δͱɺpl a yerΠϯελϯε͔Βղੳ͞ΕָͨۂͷՎࢺ৘ใΛ औಘ͢Δ͜ͱ͕Ͱ͖·͢!! Վࢺͷߏ଄͸ҎԼͷΑ͏ͳ਌ࢠؔ܎ʹͳ͍ͬͯΔͨ ΊɺΞϓϦ্ͰॊೈʹऔΓѻ͏͜ͱ͕Ͱ͖·͢!! ͜͜Ζ ͽΐΜͽΐΜ ͜͜Ζ ͽΐΜͽΐΜ ɾɾɾ Ch a r Ch a r ɾɾɾ ͜ Ζ ͽ Μ ݴޠ΍඼ࢺɺൃੜλΠϛϯάͳͲΛ ϓϩύςΟͱ͍ͯ࣋ͬͯ͠·͢!!
12. @tosuri13 ଞʹ΋औಘͰ͖Δ৘ใ͸ͨ͘͞Μ!! Վࢺͷ৘ใҎ֎ʹ΋ɺΞʔςΟετͷ৘ใ΍ϏʔτͷִؒɺίʔυਐߦɺαϏͷ λΠϛϯάɺ੠ͷײ৘஋(VA)ͳͲ΋औಘ͢Δ͜ͱ͕Ͱ͖·͢!! ৄ͘͠͸TextAliveͷ։ൃऀϙʔλϧαΠτΛνΣοΫͯ͠Έ͍ͯͩ͘͞!! TextAlive App APIΛ࢖༻͢Δ͜ͱͰɺ MV࡞੒ʹඞཁͳ৘ใΛҰׅͰऔಘͰ͖Δ!!
13. TextAliveΛ࢖ͬͨαϯϓϧͷ঺հ!! @tosuri13
14. @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
15. @tosuri13 ͜Μͳײ͡ͷϦϦοΫΞϓϦ͕࡞Ε·͢!! ϦϦοΫΞϓϦͷαϯϓϧಈը (Spe a kerdeckͰ͸ݟΕ·ͤΜ!!)
16. @tosuri13 গ͚ͩ͠ίʔυͷղઆ ԻָͱҰॹʹ༳Ε͍ͯΔগঁͷ෦෼͚ͩղઆ͠·͢!! TextAliveͰ͸Ϗʔτͷִ͕ؒऔಘͰ͖ΔͷͰɺͦΕΛΞχϝʔγϣϯͷִؒͱ͠ ͯઃఆ͢Δ͜ͱͰɺԻָͱಉظͨ͠Ξχϝʔγϣϯ͕࡞੒Ͱ͖·͢!! ָۂ৘ใΛऔಘ HookͰ؅ཧ ΞχϝʔγϣϯΛߦ͏ TextAlive Re a ct Fr a mer Motion
17. @tosuri13 Իָʹ༳ΕΔগঁͷίʔυ ᶃ ᶄ ᶃ MusicContext͸TextAliveͷղੳ৘ใΛ֨ೲͯ͠ ͍ΔίϯςΩετͰɺuseContextΛ࢖ͬͯάϩʔ όϧʹҾ͖ճͤΔΑ͏ʹ͍ͯ͠·͢ɻ ᶄ ·ͣuseE ff ectͰϏʔτͷมߋΛΩϟονͯ͠ॲ ཧΛ૸Βͤ·͢ɻ Ϗʔτ͕มߋ͞ΕͨΒɺTextAlive͔Βऔಘͨ͠Ϗʔ τͷִؒɾΠϯσοΫεΛ࢖ͬͯɺը૾Λࠨӈʹϩ ʔςʔγϣϯͤ͞·͢ɻ ͨͬͨ਺ߦͰԻָͱಉظͨ͠ՄѪ͍Ξχϝʔγϣϯ ͷ׬੒Ͱ͢!!
18. ·ͱΊ @tosuri13
19. @tosuri13 ·ͱΊͱײ૝ ࠓճ࡞੒ͨ͠Α͏ͳϦϦοΫΞϓϦέʔγϣϯͰ͸ɺ୯७ʹMVΛެ։͢ΔҎ্ ͷΠϯλϥΫγϣϯΛ౥ࡌ͢Δ͜ͱ͕Ͱ͖·͢!! ࣗ਎ͰԻָΛ࡞ΒΕ͍ͯΔΑ͏ͳํ΍ԻָΛ࢖ͬͨWebΞϓϦʹڵຯͷ͋Δํ͸ ͥͻ৮ͬͯΈͯ΄͍͠Ͱ͢!!
20. @tosuri13 ࠷ޙʹએ఻!! ຖ೥TextAliveΛ࢖༻ͨ͠ϦϦοΫΞϓϦΛ࡞੒͢Δϓϩάϥϛϯάίϯςετ͕ ։࠵͞Ε͍ͯ·͢!!ڵຯͷ͋Δํ͸νΣοΫͯ͠Έ͍ͯͩ͘͞!! https://m a gic a lmir a i.com/2024/procon ࠓ೥͸༏ल৆Λ͍͚ͨͩ·ͨ͠!!
21. @tosuri13 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!!