ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi

SVCZXBTNͰϒϥ΢βΛ ࠅ࢖ͯ͠ΈΑ͏ দߐ3VCZձٞ !MOJ@5ϧχ

ࣗݾ঺հ w 5XJUUFS 9 *%!MOJ@5 w ډॅ஍౦ژ w 3VCZྺ೥ʙݱࡏ w
3VCZd3VCZ w 3VCZ೥࢖ͬͯΔ͚ͲদߐʹདྷΔͷ͸ॳͰ͢ʂ

͓͠͝ͱ .FE1FFSαʔόʔαΠυϦʔυΤϯδχΞ ۀ຿಺༰ SBJMTOFX͔ΒσϓϩΠอक·ͰରԠ ୂ௕͕ෆ଍͍ͯ͠Δࣄۀʹೖͬͯ  
ͳΜ͔ྑ͍ײ͡ʹՐফ͠Λͯ͠ϦϦʔε ศར԰͞Μঢ়ଶʂ

ࠓ೔͸SVCZXBTNͷ ࿩Λ͠·͢

SVCZXBTN͓͞Β͍

SVCZXBTN͓͞Β͍ IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTLBUFJOPJHBLVLVOIUNM

SVCZXBTNͱ͸ ϒϥ΢β্Ͱ3VCZ͕ಈ͘ ͦͷଞ8FC"TTFNCMZϥϯλΠϜͰ΋3VCZ͕ಈ͘

3VCZͷ8BTN࣮ߦϑϩʔ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ ϒϥ΢β BQQSC

3VCZͱڞʹॳϦϦʔε

SVCZXBTN WϦϦʔε "1*௥Ճ΍҆ఆੑ޲্

SVCZXBTN WϦϦʔε ػೳ௥ՃɺTUBDLTJ[Fؔ࿈Τϥʔͷվળ

͓͞Β͍ɹ͓ΘΓ

ࠓ೔ͷ͓୊

SVCZXBTNͰϒϥ΢βΛ ࠅ࢖ͯ͠ΈΑ͏

ͳͥࠅ࢖͢Δͷ͔

SVCZXBTN "1*ͷ௥Ճͱɺ҆ఆੑͷվળͱɺόάमਖ਼

SVCZXBTN "1*ͷ௥Ճͱɺ҆ఆੑͷվળͱɺόάमਖ਼ ;ʔΜͦ͏ͳͷ͔ʜʜ

Կ͕มΘ͔ͬͨ   ෼͔Βͳ͍

ͨΊͦ͏ʂ

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w Ξχϝʔγϣϯ Τϥʔେྔ w
IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP MBUFTUIUNM w Ξχϝʔγϣϯ Τϥʔݮগ

࣮ݧ݁Ռ 3VCZ,BJHJ౰࣌ͷSVCZXBTN େྔʹFWBM͢Δͱͳ͔ͥΤϥʔ͕ൃੜ͢Δ

࣮ݧ݁Ռ ࠷৽൛ʹ͢Δ͚ͩͰվળ͞ΕͯΔʂ ҆ఆੑͷ޲্

ࠅ࢖͢Δͱ ෼͔Δ͜ͱ͕͋Δ

෼͔Βͳ͍͜ͱ͕ ෼͔Δͱʜʜ ͨͷ͍͠ʂ

࢖͍ࠐΜͰΈΑ͏

SVCZXBTNೖ໳

νϡʔτϦΞϧ IUUQTHJUIVCDPNSVCZSVCZXBTN

νϡʔτϦΞϧ w OQNͰఏڙ͞Ε͍ͯΔTDSJQUΛಡΈࠐΉ w TDSJQUλά಺ʹSVCZΛॻ͘ɹҎ্ʂ <html> <script src="https://cdn.jsdelivr.net/npm/  [email protected]/dist/  browser.script.iife.js"></script>
<script type="text/ruby"> puts "Hello, world!" </script> </html>

νϡʔτϦΞϧ SCϑΝΠϧΛTSDʹ͢Δ͜ͱ΋Մೳ <html> <script src="https://cdn.jsdelivr.net/npm/  [email protected]/dist/  browser.script.iife.js"></script> <script type="text/ruby"
src="main.rb"></script> </html>

3VCZ͔Β+4ͷੈքΛૢ࡞ SFRVJSFKT͢Δ require "js" window = JS.global[:window] window.alert "Hello,
world!"

४උສ୺ʂ ͍Ζ͍Ζ΍ͬͯΈΑ͏

ϒϥ΢βͷΠϕϯτΛ रͬͯΈΑ͏

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w JOQVUͷDIBOHFΠϕϯτΛर͏σϞ

ೖྗʹ൓Ԡ͢Δ όϦσʔγϣϯ͕Ͱ͖ͨ

EPDVNFOUΛ࢖͏ ʮEPDVNFOUʯʹΞΫηεͰ͖ΔΑ͏ʹ͢Δ +4HMPCBM<EPDVNFOU>

BEE&WFOU-JTUFOFS EPDVNFOUܦ༝Ͱऔಘͨ͠ΦϒδΣΫτʹ   BEE&WFOU-JTUFOFSͰ͖Δ

BEE&WFOU-JTUFOFS όϦσʔγϣϯॲཧΛ࣮૷͢Ε͹׬੒ʂ

·ͩ·ͩংͷޱ

ϒϥ΢βͷ"1*Λ ୟ͍ͯΈΑ͏

ϒϥ΢βͷ"1*Λ࣮ߦ <canvas></canvas>

DBOWBTΛѻ͏ʹ͸ )5.-$BOWBT&MFNFOUHFU$POUFYU   Λ࣮ߦ͢Δඞཁ͕͋Δ

DBOWBTΛѻ͏ʹ͸ ͜ΕͰඳը༻ͷϝιου͕͍Ζ͍Ζ࢖͑ΔΑ͏ʹͳΔ

ը໘ඳը͠์୊

ผͷ"1*΋ ୟ͍ͯΈΑ͏

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w Ի͕ͳΔϘλϯ

3VCZͰԻΛ໐Β͢

8FC"VEJP"1* 8FC"VEJP"1* ΢Σϒ্ͰԻ੠Λѻ͏ͨΊͷڧྗͳγεςϜΛఏڙ Ի੠ͷ߹੒ɺಛघޮՌ ΤίʔͳͲ ͳͲ͕Ͱ͖Δ
BVEJPλάΑΓߴػೳ

8FC"VEJP"1* +BWB4DSJQUͰ࢖͏৔߹ɺ   "VEJP$POUFYUͷΠϯελϯε͕ඞཁʹͳΔ const ctx = new
AudioContext();

͔͠͠ࠔͬͨ͜ͱ͕

8FC"VEJP"1* +BWB4DSJQUͰ࢖͏৔߹ɺ   OFXԋࢉࢠͰΠϯελϯεΛ࡞੒͢Δ ͔͠͠ɺ3VCZʹ͸OFX͕ͳ͍ʂ const ctx =
new AudioContext();

͞Βʹࠔͬͨ͜ͱ͕

Ի੠Λμ΢ϯϩʔυ +BWB4DSJQUͷ৔߹͸Ի੠σʔλΛ   'FUDIͯ͠σίʔυ͢Δ͜ͱͰ࠶ੜՄೳ const response = await fetch("sound.mp3");
const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await ctx.decodeAudioData(arrayBuffer);

Ի੠Λμ΢ϯϩʔυ +BWB4DSJQUͷ৔߹͸Ի੠σʔλΛ   'FUDIͯ͠σίʔυ͢Δ͜ͱͰ࠶ੜՄೳ ɹɹˢ+BWB4DSJQUʹ͸1SPNJTF͕͋Δ͕   ɹɹɹ3VCZʹ͸1SPNJTF͕ͳ͍ʂ const
response = await fetch("sound.mp3");

3VCZੈքͱ+4ੈքͷ ִͨΓ͕ͭΒ͍

ղܾ͍ͯ͘͠

3VCZͰAOFXA͢Δ +4FWBMΛ࢖͏͜ͱͰ+4ͷΠϯελϯεΛऔಘՄೳ OFXແ͍໰୊͸͜ΕͰճආՄೳ @ctx = JS.eval('return new AudioContext')

3VCZͰAOFXA͢Δ ͜ͷ໰୊͸SVCZXBTNWͰղফ͞Εͯ   FWBMͳ͠Ͱ΋OFXͰ͖ΔΑ͏ʹͳΓ·ͨ͠ʂ @ctx = JS.global[:AudioContext].new

3VCZͰABXBJUA͢Δ +BWB4DSJQU͔ΒFWBM"TZODͰ࣮ߦ͢Δ͜ͱͰ   ʮBXBJUʯ͕Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ ͕ɺΊΜͲ͏͍͘͞ʜ window.rubyVM.evalAsync(` path =
"sound.mp3" JS.global.fetch(path).await `)

3VCZͰABXBJUA͢Δ SVCZXBTNͰ͸   TDSJQUʹEBUBFWBMBTZODΛ͚ͭΔ͜ͱͰ   BXBJU͕࢖͑ΔΑ͏ʹͳͬͨʂ <script type="text/ruby" data-eval="async">

ͱ͍͏͜ͱͰ

3VCZͰԻ͕໐ΒͤΔʂ "VEJP$POUFYUͷΠϯελϯεΛ   OFXϝιουͰ࡞੒

3VCZͰԻ͕໐ΒͤΔʂ BXBJUΛ࢖ͬͯԻ੠σʔλΛGFUDIͯ͠σίʔυ

3VCZͰԻ͕໐ΒͤΔʂ σίʔυͨ͠Ի੠Λग़ྗʹܨ͍Ͱ࠶ੜ͢Ε͹׬ྃʂ

SVCZXBTN͸೔ʹ೔ʹ ػೳ͕૿͍͑ͯ·͢

࠷৽ػೳ͸࠷৽ϦϦʔεʹ 63-Ͱλά໊Λࢦఆͯ͠ར༻͢Δ͜ͱͰɺ   ৗʹ࠷৽൛Λ࢖͏͜ͱ͕Ͱ͖Δ MBUFTUW ຊ೔࣌఺
OFYU࠷৽ϦϦʔεόʔδϣϯ <script src="https://cdn.jsdelivr.net/npm/ ruby-head-wasm-wasi@latest/dist/ browser.script.iife.js"></script>

OFYUΛ࢖͏͜ͱͰ ࠷େݶͷࠅ࢖͕Մೳʹʂ &EHFWFSTJPO࠷ߴʂ

͜Ε·Ͱ࣮ݱͨ͠΋ͷ Ϣʔβʔૢ࡞Λड͚औΔ ը૾Λग़ྗ͢Δ Ի੠Λग़ྗ͢Δ

૊Έ߹ΘͤΔͱʜʜ

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTFOHJOF w SVCZXBTN੡ͷήʔϜʂ

গ͚ͩ͠ੜKTΛར༻ Ξχϝʔγϣϯ͢ΔΑ͏ϒϥ΢βʹ఻͑Δ͜ͱͰ   ϝΠϯϧʔϓΛ࣮૷ async function main( tFrame )
{ const stopMain = window.requestAnimationFrame( main ); vm.eval(` $scene.main `) }

ϒϥ΢βº3VCZͰ ͍Ζ͍ΖͰ͖Δʂ

͓ΘΓʹ

ϒϥ΢βͷࠅ࢖ͷͨΊʹ ·ͣ͸3&"%.&ʹैͬͯ   ϒϥ΢βͰ3VCZ͕ಈ͘Α͏ʹͯ͠ΈΑ͏ʂ SVCZίʔυ্ͰSFRVJSFKT͠Α͏ʂ ࠷৽൛ͷػೳΛ׆༻͠Α͏ʂ
3VCZͰ޷͖ͳॲཧΛ࣮૷͠Α͏ʂ

ϒϥ΢βͰ3VCZΛ࢖͏ͱ ͨͷ͍͠ʂ

એ఻ʂ ࠓޙͷొஃ༧ఆ ,BJHJPO3BJMT ۚ ౔
5VSCPͰਝ଎ʹαʔϏεΛ্ཱͪ͛Δ࿩

ΤϯδχΞ৬ͷํɹੵۃ࠾༻தʂ ҰॹʹϝυϐΞͷࣄۀΛ৳͹͍͖͍ͯͨ͠ΤϯδχΞͷํɺ͓଴͓ͪͯ͠Γ·͢ʂ ςοΫϒϩά IUUQTISNPTDPQBHFTNFEQFFSKPCT ϦʔυΤϯδχΞʢαʔόʔαΠυʣ ΤϯδχΞ঺հ IUUQTFOHJOFFSNFEQFFSDPKQ IUUQTUFDINFEQFFSDPKQ ٻਓ ϒϩά

ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi

ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi

More Decks by lni_T

Other Decks in Programming

Featured

Transcript