ruby.wasm で作る MIDI コントローラー

দߐ3VCZձٞ SVCZXBTNͰ࡞Δ .*%*ίϯτϩʔϥʔ !OBHBDIJLB

8)0".* w !OBHBDIJLB w $3VCZ$PNNJUUFS$3VCZTFSJFTNBJOUBJOFS w SVCZUSVOLDIBOHFT w "/%1"%'VLVPLBSC w
4PVOE1SPHSBNNFS8BOOBCF

"HFOEB w ։ൃಈػ w .*%*ͷϚοϐϯά w 8FC.*%*"1* w ϒϥ΢βͷαϙʔτঢ়گ w
ແઢରԠ w 8FC$PNQPOFOUTԽ

։ൃಈػ

QVSJ fi FETZOUI w SVCZXBTN 8FC"VEJP"1*Ͱ։ൃ͍ͯ͠Δ७ਖ਼཯γʔέϯαʔ w 3VCZ,BJHJͷηογϣϯͰ঺հ w ֨ࢠਤΤσΟλͰ࿨ԻΛߏ੒

QVSJ fi FETZOUIͷ֨ࢠਤΤσΟλ w جԻ ֨ࢠͷதԝ ͔Β9࣠ Y ɺ:࣠ Y
Y Y ͷप೾਺ൺ ֨ࢠͷҐஔͰԻߴ͕ܾ·Δ w 1"%ܕͷίϯτϩʔϥʔͰೖྗ͍ͨ͠ Y Y

1BEܕͷ.*%*ίϯτϩʔϥʔ w ࢢൢͷ1BEίϯτϩʔϥʔ͸΄΅͢΂ͯY Y YͳͲ ۮ਺Yۮ਺ͷύου͕഑ஔ͞Ε͍ͯΔ΋ͷ

ح਺Yح਺͕ཉ͍͠ w QVSJ fi FETZOUIͷ֨ࢠΤσΟλ͸جԻΛத৺ʹ্Լࠨӈରশ ˠح਺Yح਺ͷ֨ࢠʹରԠͨ͠1BE഑ஔͷίϯτϩϥʔ͕ཉ͍͠ w ͳ͍ͳΒ࡞Δ͔͠ͳ͍ w ෺ཧσόΠε
w QVSJ fi FETZOUIͷΑ͏ʹ8FCΛ࢖ͬͯεϚϗ΍λϒϨοτͰಈ͔ͤ͹͍ ͍͍Μ͡ΌͶ

PEEQBE w IUUQTOBHBDIJLBHJUIVCJPPEEQBE w SVCZXBTN 8FC.*%*"1*Ͱಈ͘Yͷύουίϯτϩʔϥʔ w QVSJ fi FETZOUIͷૢ࡞ʹಛԽͨ͠.*%*Ϛοϐϯάઃఆ

.*%*Ϛοϐϯά

.*%* .VTJDBM*OTUSVNFOU%JHJUBM*OUFSGBDF w ָثͷʮԋ૗σʔλʯΛػثؒͰ௨৴͢ΔͨΊͷن֨ w ʮԋ૗σʔλʯ㲈ʮԻߴʯʮൃԻͷ௕͞ʯʮԻͷڧ͞ʯFUDʜ w ʮԋ૗σʔλʯ㱠ʮԻ੠σʔλʯԻͦͷ΋ͷͰ͸ͳ͍ w CZUF
CJUT ͷόΠφϦσʔλΛෳ਺ ଟ͘͸ͭ ·ͱΊͨ΋ͷΛ .*%*ϝοηʔδͱݺͿ w ୅දతʹ͸ʮεςʔλενϟϯωϧʯʮϊʔτ൪߸ʯʮϕϩγςΟʯ ͷͭΛૹ৴͢Δ

.*%*ϝοηʔδͷϚοϐϯά w όΠτͷϝοηʔδΛͲ͏ղऍ͢Δ͔͸ϗετʹΑΔ w Ұൠతͳ.*%*ίϯτϩʔϥʔ΋%"8Ͱͭ·Έ΍εϥΠμʔΛԿͷૢ࡞ʹ ׂΓ౰ͯΔ͔ઃఆ͢Δ͜ͱ͕Ͱ͖Δ w QVSJ fi FETZOUI͸֨ࢠΤσΟλ༻ʹಠࣗͷεςʔλεͷׂΓ౰ͯΛߦͳ͏

QVSJ fi FETZOUIͷ.*%*Ϛοϐϯά w OPUF൪߸ CZUF໨ Λ֨ࢠͷҐஔʹׂΓ౰ͯΔ w $POUSPM$IBOHF $$
w ࣍ݩมߋ w ΦΫλʔϒมߋ w ϚελʔϘϦϡʔϜ

8FC.*%*"1*

8FC.*%*"1*ͷجૅ w OBWJHBUPSSFRVFTU.*%*"DDFTT .*%*ར༻ͷݖݶཁ੥ w NJEJ"DDFTTJOQVUTೖྗϙʔτϦετ w NJEJ"DDFTTPVUQVUTग़ྗϙʔτϦετ w NJEJ*OQVUPO.*%*.FTTBHFϝοηʔδड৴࣌ίʔϧόοΫ
w NJEJ0VUQVUTFOE .*%*ϝοηʔδૹ৴ w Ҏ্ɻ࢖͏͚ͩͳΒΊͬͪΌγϯϓϧ

ϒϥ΢βͷαϙʔτঢ়گ

8FC.*%*ͷࠔ೉ͳ఺ w ϒϥ΢βͷαϙʔτঢ়گ

8FC.*%*ͷࠔ೉ͳ఺ w ϒϥ΢βͷαϙʔτঢ়گ w 4BGBSJະαϙʔτ w J044BGBSJ'JSFGPY$ISPNF͍ͣΕ΋ະαϙʔτ w αʔυύʔςΟʔͷΞϓϦ 8FC.*%*
.*%*8FC ͸͋Δ͕ಈ࡞ෆ҆ఆ w "OESPJE$ISPNF0QFSB͸αϙʔτ'JSFGPY͸ະαϙʔτ ະ֬ೝ

ϞόΠϧ୺຤Ͱͷ8FC.*%*αϙʔτঢ়گ w J04΄΅ར༻ෆՄ αʔυύʔςΟʔϒϥ΢β͸͋Δ͕සൟʹΫϥογϡ w "OESPJE$ISPNFͰ҆ఆͯ͠ಈ࡞͢Δ ࢒೦ͳ͕ΒJ1BEͰ͸ಈ࡞͠ͳ͍ "OESPJEλϒϨοτΛಋೖ

8FC.*%*"1*ར༻ͷϋʔυϧ w ϢʔβʔΞΫγϣϯ ΫϦοΫ ʹ൓Ԡ͢ΔΠϕϯτத͔͠ॳظԽͰ͖ͳ͍ w Ϣʔβʔͷ֬ೝμΠΞϩάͰͷೝՄ͕ඞਢ ϚΠΫ΍Χϝϥͱಉ༷ w
ޡͬͯڋ൱͢ΔͱϦηοτ͢Δͷ͕ࠔ೉ "OESPJE൛$ISPNFͰ͸αΠτຖ ೝՄϦετʹ.*%*͕ग़ݱ͠ͳ͍ͨΊ௚ۙͷαΠτ৘ใશ࡟আ͕ඞཁ w 5-4઀ଓ͕ඞਢ ΋͘͠͸DISPNFTFUUJOHT͔Βྫ֎ొ࿥ w 64#έʔϒϧ઀ଓ࣌ʹຖճ༻్Λࢦఆ͢Δඞཁ͕͋Δ

ແઢରԠ

ແઢ઀ଓରԠ w 8FC#MVFUPPUI"1* #MVFUPPUI.*%* w ϞόΠϧ୺຤ଆͰೝࣝͤ͞Δ͜ͱ͕Ͱ͖ͣஅ೦ w 8FC4PDLFU .*%**"$υϥΠό w
1SPT.*%*ͷ࢖͑ͳ͍J04 J1BE Ͱ΋࢖͑Δ w $POT8FC.*%*"1*Λ࢖ͬͯͳ͍ʜʜ ίϯτϩʔϥʔଆ͸

8FC4PDLFU .*%**"$υϥΠό w .*%**"$υϥΠόNBD04্Ͱ.*%*৴߸Λ஥հ͢ΔԾ૝σόΠε 4PVOE fl PXFSͷ.*%*൛ͱ͍͑͹Θ͔Δਓʹ͸Θ͔Δ Bridge server odd-pad
purified- synth 8FC4PDLFU .*%*ϝοηʔδ

8FC$PNQPOFOUTԽ

8FC$PNQPOFOUTԽ w QVSJ fi FETZOUIͰ͸ը໘ίϯϙʔωϯτ͸)5.- +4Ͱॻ͍ͨ w 8FC$PNQPOFOUT w 3FBDU΍7VFͷΑ͏ʹ+4ͰΧελϜίϯϙʔωϯτΛఆٛͰ͖Δ
w SVCZXBTNΛར༻ͯ͠3VCZͷΫϥεͰίϯϙʔωϯτ͕ॻ͚ͦ͏

8FC$PNQPOFOUTԽ w ͜Μͳײ͡Ͱ8FC$PNQPOFOUϞδϡʔϧΛఆٛ module WebComponent module ClassMethods def register(tag_name) ruby_class_name
= name js_code = <<~JS (() => { class RubyComponent extends HTMLElement { connectedCallback() { const id = App.eval(` inst = #{ruby_class_name}.new id = WebComponent::WC_REGISTRY.size WebComponent::WC_REGISTRY[id] = inst inst.connected_callback(this_elem) `).toJS(); this.__rubyId = id; } } customElements.define('#{tag_name}', RubyComponent); })(); JS JS.eval(js_code) end end end

8FC$PNQPOFOUTԽ w 8FC$PNQPOFOUΛJODMVEFͯ͠ίϯϙʔωϯτΫϥεΛఆٛ class PadGrid include WebComponent def connected_callback(js_element) @element
= js_element render_grid attach_events end def render_grid doc = JS.global[:document] @grid = doc.call(:createElement, "div") @grid[:className] = "grid" VIEW_YS.reverse_each do |y| VIEW_XS.each do |x| btn = doc.call(:createElement, "button") btn[:dataset][:x] = x btn[:dataset][:y] = y btn[:textContent] = note.to_s @grid.call(:appendChild, btn) end end @shadow.call(:appendChild, @grid) end

ࠓޙͷల๬

ࠓޙͷల๬ w PEEQBE୯ମͰԻΛ໐Β͍ͨ͠ w ιϯάػೳ γʔέϯαʔػೳΛ෇͚͍ͨ w ࣗಈϘΠγϯά ԻߴͷΦΫλʔϒࣗಈௐ੔
w ʜʜ͋ΕɺQVSJ fi FETZOUI͍Βͳ͍ࢠ w ࡞Γ͍ͨ΋ͷ͕ͲΜͲΜ༙͍ͯ͘Δ

ruby.wasm で作る MIDI コントローラー

ruby.wasm で作る MIDI コントローラー

nagachika

More Decks by nagachika

Other Decks in Technology

Featured

Transcript

দߐ3VCZձٞ SVCZXBTNͰ࡞Δ .%ίϯτϩʔϥʔ !OBHBDIJLB

8)0".* w !OBHBDIJLB w $3VCZ$PNNJUUFS$3VCZTFSJFTNBJOUBJOFS w SVCZUSVOLDIBOHFT w "/%1"%'VLVPLBSC w

"HFOEB w ։ൃಈػ w .%ͷϚοϐϯά w 8FC.%"1* w ϒϥ΢βͷαϙʔτঢ়گ w

։ൃಈػ

QVSJ fi FETZOUI w SVCZXBTN 8FC"VEJP"1*Ͱ։ൃ͍ͯ͠Δ७ਖ਼཯γʔέϯαʔ w 3VCZ,BJHJͷηογϣϯͰ঺հ w ֨ࢠਤΤσΟλͰ࿨ԻΛߏ੒

QVSJ fi FETZOUIͷ֨ࢠਤΤσΟλ w جԻ ֨ࢠͷதԝ ͔Β9࣠ Y ɺ:࣠ Y

1BEܕͷ.%ίϯτϩʔϥʔ w ࢢൢͷ1BEίϯτϩʔϥʔ͸΄΅͢΂ͯY Y YͳͲ ۮ਺Yۮ਺ͷύου͕഑ஔ͞Ε͍ͯΔ΋ͷ

ح਺Yح਺͕ཉ͍͠ w QVSJ fi FETZOUIͷ֨ࢠΤσΟλ͸جԻΛத৺ʹ্Լࠨӈରশ ˠح਺Yح਺ͷ֨ࢠʹରԠͨ͠1BE഑ஔͷίϯτϩϥʔ͕ཉ͍͠ w ͳ͍ͳΒ࡞Δ͔͠ͳ͍ w ෺ཧσόΠε

PEEQBE w IUUQTOBHBDIJLBHJUIVCJPPEEQBE w SVCZXBTN 8FC.%"1Ͱಈ͘Yͷύουίϯτϩʔϥʔ w QVSJ fi FETZOUIͷૢ࡞ʹಛԽͨ͠.%*Ϛοϐϯάઃఆ

.%Ϛοϐϯά

.% .VTJDBMOTUSVNFOU%JHJUBMOUFSGBDF w ָثͷʮԋ૗σʔλʯΛػثؒͰ௨৴͢ΔͨΊͷن֨ w ʮԋ૗σʔλʯ㲈ʮԻߴʯʮൃԻͷ௕͞ʯʮԻͷڧ͞ʯFUDʜ w ʮԋ૗σʔλʯ㱠ʮԻ੠σʔλʯԻͦͷ΋ͷͰ͸ͳ͍ w CZUF

.%ϝοηʔδͷϚοϐϯά w όΠτͷϝοηʔδΛͲ͏ղऍ͢Δ͔͸ϗετʹΑΔ w Ұൠతͳ.%ίϯτϩʔϥʔ΋%"8Ͱͭ·Έ΍εϥΠμʔΛԿͷૢ࡞ʹ ׂΓ౰ͯΔ͔ઃఆ͢Δ͜ͱ͕Ͱ͖Δ w QVSJ fi FETZOUI͸֨ࢠΤσΟλ༻ʹಠࣗͷεςʔλεͷׂΓ౰ͯΛߦͳ͏

QVSJ fi FETZOUIͷ.%Ϛοϐϯά w OPUF൪߸ CZUF໨ Λ֨ࢠͷҐஔʹׂΓ౰ͯΔ w $POUSPM$IBOHF $$

8FC.%"1*

8FC.%"1ͷجૅ w OBWJHBUPSSFRVFTU.%"DDFTT .%ར༻ͷݖݶཁ੥ w NJEJ"DDFTTJOQVUTೖྗϙʔτϦετ w NJEJ"DDFTTPVUQVUTग़ྗϙʔτϦετ w NJEJOQVUPO.%.FTTBHFϝοηʔδड৴࣌ίʔϧόοΫ

ϒϥ΢βͷαϙʔτঢ়گ

8FC.%ͷࠔ೉ͳ఺ w ϒϥ΢βͷαϙʔτঢ়گ

8FC.%ͷࠔ೉ͳ఺ w ϒϥ΢βͷαϙʔτঢ়گ w 4BGBSJະαϙʔτ w J044BGBSJ'JSFGPY$ISPNF͍ͣΕ΋ະαϙʔτ w αʔυύʔςΟʔͷΞϓϦ 8FC.%

ϞόΠϧ୺຤Ͱͷ8FC.%αϙʔτঢ়گ w J04΄΅ར༻ෆՄ αʔυύʔςΟʔϒϥ΢β͸͋Δ͕සൟʹΫϥογϡ w "OESPJE$ISPNFͰ҆ఆͯ͠ಈ࡞͢Δ ࢒೦ͳ͕ΒJ1BEͰ͸ಈ࡞͠ͳ͍ "OESPJEλϒϨοτΛಋೖ

8FC.%"1*ར༻ͷϋʔυϧ w ϢʔβʔΞΫγϣϯ ΫϦοΫ ʹ൓Ԡ͢ΔΠϕϯτத͔͠ॳظԽͰ͖ͳ͍ w Ϣʔβʔͷ֬ೝμΠΞϩάͰͷೝՄ͕ඞਢ ϚΠΫ΍Χϝϥͱಉ༷ w

ແઢରԠ

ແઢ઀ଓରԠ w 8FC#MVFUPPUI"1* #MVFUPPUI.% w ϞόΠϧ୺຤ଆͰೝࣝͤ͞Δ͜ͱ͕Ͱ͖ͣஅ೦ w 8FC4PDLFU .*%**"$υϥΠό w

8FC4PDLFU .*%**"$υϥΠό w .*%**"$υϥΠόNBD04্Ͱ.%৴߸Λ஥հ͢ΔԾ૝σόΠε 4PVOE fl PXFSͷ.%൛ͱ͍͑͹Θ͔Δਓʹ͸Θ͔Δ Bridge server odd-pad

8FC$PNQPOFOUTԽ

8FC$PNQPOFOUTԽ w QVSJ fi FETZOUIͰ͸ը໘ίϯϙʔωϯτ͸)5.- +4Ͱॻ͍ͨ w 8FC$PNQPOFOUT w 3FBDU΍7VFͷΑ͏ʹ+4ͰΧελϜίϯϙʔωϯτΛఆٛͰ͖Δ

8FC$PNQPOFOUTԽ w ͜Μͳײ͡Ͱ8FC$PNQPOFOUϞδϡʔϧΛఆٛ module WebComponent module ClassMethods def register(tag_name) ruby_class_name

8FC$PNQPOFOUTԽ w 8FC$PNQPOFOUΛJODMVEFͯ͠ίϯϙʔωϯτΫϥεΛఆٛ class PadGrid include WebComponent def connected_callback(js_element) @element

ࠓޙͷల๬

ࠓޙͷల๬ w PEEQBE୯ମͰԻΛ໐Β͍ͨ͠ w ιϯάػೳ γʔέϯαʔػೳΛ෇͚͍ͨ w ࣗಈϘΠγϯά ԻߴͷΦΫλʔϒࣗಈௐ੔