$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. SVCZXBTNͰϒϥ΢βΛ
    ࠅ࢖ͯ͠ΈΑ͏
    দߐ3VCZձٞ
    !MOJ@5ϧχ

    View Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. ͓͠͝ͱ
    .FE1FFSαʔόʔαΠυϦʔυΤϯδχΞ
    ۀ຿಺༰
    SBJMTOFX͔ΒσϓϩΠอक·ͰରԠ
    ୂ௕͕ෆ଍͍ͯ͠Δࣄۀʹೖͬͯ

    ͳΜ͔ྑ͍ײ͡ʹՐফ͠Λͯ͠ϦϦʔε
    ศར԰͞Μঢ়ଶʂ

    View Slide

  6. ࠓ೔͸SVCZXBTNͷ
    ࿩Λ͠·͢

    View Slide

  7. SVCZXBTN͓͞Β͍

    View Slide

  8. SVCZXBTN͓͞Β͍
    IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTLBUFJOPJHBLVLVOIUNM

    View Slide

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

    View Slide

  10. 3VCZͷ8BTN࣮ߦϑϩʔ
    SVCZXBTN
    3VCZΠϯλϓϦλ
    $3VCZ

    ϒϥ΢β
    BQQSC

    View Slide

  11. 3VCZͱڞʹॳϦϦʔε

    View Slide

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

    View Slide

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

    View Slide

  14. ͓͞Β͍ɹ͓ΘΓ

    View Slide

  15. ࠓ೔ͷ͓୊

    View Slide

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

    View Slide

  17. ͳͥࠅ࢖͢Δͷ͔

    View Slide

  18. SVCZXBTN
    "1*ͷ௥Ճͱɺ҆ఆੑͷվળͱɺόάमਖ਼

    View Slide

  19. SVCZXBTN
    "1*ͷ௥Ճͱɺ҆ఆੑͷվળͱɺόάमਖ਼
    ;ʔΜͦ͏ͳͷ͔ʜʜ

    View Slide

  20. Կ͕มΘ͔ͬͨ

    ෼͔Βͳ͍

    View Slide

  21. ͨΊͦ͏ʂ

    View Slide

  22. %FNP

    View Slide

  23. %
    FN
    P
    w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
    w Ξχϝʔγϣϯ Τϥʔେྔ

    w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP
    MBUFTUIUNM
    w Ξχϝʔγϣϯ Τϥʔݮগ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. ࢖͍ࠐΜͰΈΑ͏

    View Slide

  29. SVCZXBTNೖ໳

    View Slide

  30. νϡʔτϦΞϧ
    IUUQTHJUIVCDPNSVCZSVCZXBTN

    View Slide

  31. νϡʔτϦΞϧ
    w OQNͰఏڙ͞Ε͍ͯΔTDSJQUΛಡΈࠐΉ
    w TDSJQUλά಺ʹSVCZΛॻ͘ɹҎ্ʂ


    <br/>puts "Hello, world!"<br/>

    View Slide

  32. νϡʔτϦΞϧ
    SCϑΝΠϧΛTSDʹ͢Δ͜ͱ΋Մೳ




    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. BEE&WFOU-JTUFOFS
    EPDVNFOUܦ༝Ͱऔಘͨ͠ΦϒδΣΫτʹ

    BEE&WFOU-JTUFOFSͰ͖Δ

    View Slide

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

    View Slide

  41. ·ͩ·ͩংͷޱ

    View Slide

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

    View Slide

  43. ϒϥ΢βͷ"1*Λ࣮ߦ

    View Slide

  44. DBOWBTΛѻ͏ʹ͸
    )5.-$BOWBT&MFNFOUHFU$POUFYU


    Λ࣮ߦ͢Δඞཁ͕͋Δ

    View Slide

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

    View Slide

  46. ը໘ඳը͠์୊

    View Slide

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

    View Slide

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

    View Slide

  49. 3VCZͰԻΛ໐Β͢

    View Slide

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

    View Slide

  51. 8FC"VEJP"1*
    +BWB4DSJQUͰ࢖͏৔߹ɺ

    "VEJP$POUFYUͷΠϯελϯε͕ඞཁʹͳΔ

    const ctx = new AudioContext();

    View Slide

  52. ͔͠͠ࠔͬͨ͜ͱ͕

    View Slide

  53. 8FC"VEJP"1*
    +BWB4DSJQUͰ࢖͏৔߹ɺ

    OFXԋࢉࢠͰΠϯελϯεΛ࡞੒͢Δ
    ͔͠͠ɺ3VCZʹ͸OFX͕ͳ͍ʂ
    const ctx = new AudioContext();

    View Slide

  54. ͞Βʹࠔͬͨ͜ͱ͕

    View Slide

  55. Ի੠Λμ΢ϯϩʔυ
    +BWB4DSJQUͷ৔߹͸Ի੠σʔλΛ

    'FUDIͯ͠σίʔυ͢Δ͜ͱͰ࠶ੜՄೳ
    const response =
    await fetch("sound.mp3");
    const arrayBuffer =
    await response.arrayBuffer();
    const audioBuffer =
    await ctx.decodeAudioData(arrayBuffer);

    View Slide

  56. Ի੠Λμ΢ϯϩʔυ
    +BWB4DSJQUͷ৔߹͸Ի੠σʔλΛ

    'FUDIͯ͠σίʔυ͢Δ͜ͱͰ࠶ੜՄೳ
    ɹɹˢ+BWB4DSJQUʹ͸1SPNJTF͕͋Δ͕

    ɹɹɹ3VCZʹ͸1SPNJTF͕ͳ͍ʂ
    const response =
    await fetch("sound.mp3");

    View Slide

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

    View Slide

  58. ղܾ͍ͯ͘͠

    View Slide

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

    View Slide

  60. 3VCZͰAOFXA͢Δ
    ͜ͷ໰୊͸SVCZXBTNWͰղফ͞Εͯ

    FWBMͳ͠Ͱ΋OFXͰ͖ΔΑ͏ʹͳΓ·ͨ͠ʂ
    @ctx = JS.global[:AudioContext].new

    View Slide

  61. 3VCZͰABXBJUA͢Δ
    +BWB4DSJQU͔ΒFWBM"TZODͰ࣮ߦ͢Δ͜ͱͰ

    ʮBXBJUʯ͕Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ
    ͕ɺΊΜͲ͏͍͘͞ʜ
    window.rubyVM.evalAsync(`
    path = "sound.mp3"
    JS.global.fetch(path).await
    `)

    View Slide

  62. 3VCZͰABXBJUA͢Δ
    SVCZXBTNͰ͸

    TDSJQUʹEBUBFWBMBTZODΛ͚ͭΔ͜ͱͰ

    BXBJU͕࢖͑ΔΑ͏ʹͳͬͨʂ
    data-eval="async">

    View Slide

  63. ͱ͍͏͜ͱͰ

    View Slide

  64. 3VCZͰԻ͕໐ΒͤΔʂ
    "VEJP$POUFYUͷΠϯελϯεΛ

    OFXϝιουͰ࡞੒

    View Slide

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

    View Slide

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

    View Slide

  67. SVCZXBTN͸೔ʹ೔ʹ
    ػೳ͕૿͍͑ͯ·͢

    View Slide

  68. ࠷৽ػೳ͸࠷৽ϦϦʔεʹ
    63-Ͱλά໊Λࢦఆͯ͠ར༻͢Δ͜ͱͰɺ

    ৗʹ࠷৽൛Λ࢖͏͜ͱ͕Ͱ͖Δ
    MBUFTUW ຊ೔࣌఺

    OFYU࠷৽ϦϦʔεόʔδϣϯ

    View Slide

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

    View Slide

  70. ͜Ε·Ͱ࣮ݱͨ͠΋ͷ
    Ϣʔβʔૢ࡞Λड͚औΔ
    ը૾Λग़ྗ͢Δ
    Ի੠Λग़ྗ͢Δ

    View Slide

  71. ૊Έ߹ΘͤΔͱʜʜ

    View Slide

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

    View Slide

  73. গ͚ͩ͠ੜKTΛར༻
    Ξχϝʔγϣϯ͢ΔΑ͏ϒϥ΢βʹ఻͑Δ͜ͱͰ

    ϝΠϯϧʔϓΛ࣮૷
    async function main( tFrame ) {
    const stopMain =
    window.requestAnimationFrame( main );
    vm.eval(`
    $scene.main
    `)
    }

    View Slide

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

    View Slide

  75. ͓ΘΓʹ

    View Slide

  76. ϒϥ΢βͷࠅ࢖ͷͨΊʹ
    ·ͣ͸3&"%.&ʹैͬͯ

    ϒϥ΢βͰ3VCZ͕ಈ͘Α͏ʹͯ͠ΈΑ͏ʂ
    SVCZίʔυ্ͰSFRVJSFKT͠Α͏ʂ
    ࠷৽൛ͷػೳΛ׆༻͠Α͏ʂ
    3VCZͰ޷͖ͳॲཧΛ࣮૷͠Α͏ʂ

    View Slide

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

    View Slide

  78. એ఻ʂ
    ࠓޙͷొஃ༧ఆ
    ,BJHJPO3BJMT ۚ


    5VSCPͰਝ଎ʹαʔϏεΛ্ཱͪ͛Δ࿩

    View Slide

  79. View Slide

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

    View Slide