$30 off During Our Annual Pro Sale. View Details »

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

lni_T
September 16, 2023

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

"ruby.wasmでブラウザを酷使してみよう "
松江Ruby会議10での登壇資料です。
https://matsue.rubyist.net/matrk10/

当日使用したデモページはこちら
https://lnit.github.io/ruby-wasm-pages/engine/

lni_T

September 16, 2023
Tweet

More Decks by lni_T

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ w 5XJUUFS 9 *%!MOJ@5 w ډॅ஍౦ژ w 3VCZྺ೥ʙݱࡏ w

    3VCZd3VCZ w 3VCZ೥࢖ͬͯΔ͚ͲদߐʹདྷΔͷ͸ॳͰ͢ʂ
  2. % FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w Ξχϝʔγϣϯ Τϥʔେྔ  w

    IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP MBUFTUIUNM w Ξχϝʔγϣϯ Τϥʔݮগ
  3. Ի੠Λμ΢ϯϩʔυ  +BWB4DSJQUͷ৔߹͸Ի੠σʔλΛ 
 'FUDIͯ͠σίʔυ͢Δ͜ͱͰ࠶ੜՄೳ const response = await fetch("sound.mp3");

    const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
  4. ࠷৽ػೳ͸࠷৽ϦϦʔεʹ  63-Ͱλά໊Λࢦఆͯ͠ར༻͢Δ͜ͱͰɺ 
 ৗʹ࠷৽൛Λ࢖͏͜ͱ͕Ͱ͖Δ  MBUFTUW ຊ೔࣌఺  

    OFYU࠷৽ϦϦʔεόʔδϣϯ <script src="https://cdn.jsdelivr.net/npm/ ruby-head-wasm-wasi@latest/dist/ browser.script.iife.js"></script>
  5. গ͚ͩ͠ੜKTΛར༻  Ξχϝʔγϣϯ͢ΔΑ͏ϒϥ΢βʹ఻͑Δ͜ͱͰ 
 ϝΠϯϧʔϓΛ࣮૷ async function main( tFrame )

    { const stopMain = window.requestAnimationFrame( main ); vm.eval(` $scene.main `) }