ruby.wasmで多人数リアルタイム通信ゲームを作ろう

「ruby.wasmで多人数リアルタイム通信ゲームを作ろう」
関西Ruby会議08 前夜祭 RejectKaigi での登壇資料です。

Transcript

1. #kanrk08_preparty @Lni_T / ϧχ ruby.wasmͰ ଟਓ਺ϦΞϧλΠϜ ௨৴ήʔϜΛ࡞Ζ͏ʂ
2. ࣗݾ঺հ 5XJUUFS 9
   *%
   !-OJ@5
   
   ϧχ
   ग़਎
   ࿨Վࢁ
   +BWBΛ3BJMTʹҠߦͨ͠Γ
   1)1Λ3BJMTʹҠߦͨ͠Γɹͱ͍ͬͨ
   αʔόҾͬӽ͠ۀͰੜܭΛཱ͍ͯͯΔ ʘΑΖ͘͠Ͷʗ
5. աڈͭͬͨ͘΋ͷ SVCZXBTNͰ3VCZίʔυ͔Β
   Ի੠೾ܗΛੜ੒͢Δ
   SVCZXBTNTZOUIFTJ[FS
   ೥։࠵
   େࡕ3VCZձٞ
   ʹͯൃද
6. * NOTICE * ຊ೔ͷτʔΫ͸੒Ռ෺ͷσϞؚ͕·Ε·͢ɻ
   ͥͻ͓खݩʹ1$
   
   εϚʔτϑΥϯΛ͝༻ҙͷ্ɺ͝ཡ͍ͩ͘͞ɻ
7. দࢁʂ দࢁʂ দࢁʂ ݄ͷ3VCZ,BJHJ
   
   ͓ർΕ༷Ͱͨ͠ʂ
8. ڵຯਂ͍ొஃ
   ΍ʜ
9. ٱʑʹձ͏3VCJFTUͨͪʜ
10. ܹࢗΛड͚ͯ΍Δؾ61ʂ
11. ͦͷ··ͷྲྀΕͰؔ੢3VCZ΁
12. εέδϡʔϧΛߟ͑ͣʹCFPԠืͨ݁͠Ռ… Πϕϯτཌ೔ʹຊ൪ϦϦʔεΛ͢ΔӋ໨ʹ
13. ຊ೔͸ඍྗͳ͕Β
    ੝Γ্͛ʹߩݙͰ͖Ε͹ʂ
14. ຊ೔ͷτʔΫςʔϚ ruby.wasm
15. ruby.wasm ͓͞Β͍ গʑ͓෇͖߹͍͍ͩ͘͞
16. WebAssembly
17. WebAssembly(Wasm) Ϟμϯϒϥ΢βͰಈ࡞͢Δ
    όΠφϦίʔυͷ৽͍͠ϑΥʔϚοτ
    ಛ௃
    ✤ )JHI
    1FSGPSNBODF
    
    ✤ 4FDVSF
    4BOECPY؀ڥͰಈ࡞͢Δ
    
    ✤ -BOHVBHF*OEFQFOEFOU
    ಛఆͷݴޠʹґଘ͠ͳ͍
    ✤ 1PSUBCMF
18. WebAssembly(Wasm) )JHI
    1FSGPSNBODF
    ✤ αΠζͱಡΈࠐΈ࣌ؒΛޮ཰Α͘અ໿Ͱ͖Δ
    όΠφϦܗࣜͰΤϯίʔυ
    ✤ ωΠςΟϒ଎౓Ͱͷಈ࡞Λ໨ࢦ͍ͯ͠Δ
    4FDVSF
    ✤ 8BTNόΠφϦ͸4BOECPY؀ڥͰಈ࡞͢Δ
    ✤ ࢀߟ
    IUUQTXFCBTTFNCMZPSHEPDTTFDVSJUZ
19. Language-Independent ಛఆͷݴޠʹґଘ͠ͳ͍
    $$
    4XJGU
    3VTU
    (P
    ͳͲͷ༷ʑͳϓϩάϥϛϯάݴޠ͔Β
    8BTNόΠφϦΛੜ੒Ͱ͖Δ
    ✤ 3VCZ΋஥ؒೖΓͨ͠ʂ
20. Portable ࠷ॳʹʮϞμϯϒϥ΢βͰಈ࡞͢Δʜʯͱ঺հ͠·͕ͨ͠ʜ
    ಛఆͷϓϥοτϑΥʔϜʹґଘͤͣಈ࡞͢Δʂ
    ✤ ݩʑ8FCϒϥ΢βͰͷར༻͕ओ໨త͕ͩͬͨ
    8BTNͷϥϯλΠϜ͕͋Ε͹ϒϥ΢βҎ֎Ͱ΋ಈ͘
21. Portable 8BTNϥϯλΠϜ͕͋Ε͹ϒϥ΢βҎ֎Ͱ΋ಈ͘
    ✤ $%/ͷ&EHF؀ڥ
    ✤ 'BB4؀ڥ
    ✤ ͦͷଞ8BTNϥϯλΠϜ XBTNUJNF
    XBTNFS
    ͨͩ͠ɺ8BTN͸ݱࡏ΋࢓༷͕௥Ճ͞Ε͓ͯΓ
    ϥϯλΠϜʹΑͬͯαϙʔτ͍ͯ͠Δ͔Ͳ͏͔͕ҟͳΔ
22. WASI
23. ʮ༷ʑͳ؀ڥʯͰ ʮ҆શʯ͔ͭʮޮ཰తʯʹ ϓϩάϥϜΛಈ͔͍ͨ͠ !
24. WASI 8FC"TTFNCMZ
    4ZTUFN
    *OUFSGBDF
    04ʹґଘ͢ΔγεςϜίʔϧΛந৅Խ͢Δ࢓༷
    ✤ ϑΝΠϧγεςϜΞΫηε
    ✤ ωοτϫʔΫΞΫηε
    ✤ FUD 8BTN
    3VOUJNF 7. )PTU
    4ZTUFN 8"4*
25. WASI 8BTNࣗମ͸γεςϜΠϯλʔϑΣΠεΛ࣋ͨͳ͍
    7.ͷ্Ͱ࣮ߦ͞ΕΔ
    8"4*͸͜ΕΛن֨Խ͢Δ 8BTN
    3VOUJNF 7. )PTU
    4ZTUFN 8"4*
26. ͔͜͜ΒRubyͷ࿩
27. Ruby / WebAssembly 3VCZ
    8"4*ϕʔεͷ8FC"TTFNCMZαϙʔτ
    ✤ 8BTN؀ڥͰ$3VCZ͕ಈ࡞͢ΔΑ͏ʹͳͬͨ
28. ҰൠతͳWasm࣮ߦϑϩʔ ֤ݴޠͷϓϩάϥϜΛ8BTNόΠφϦʹίϯύΠϧ XBTN ϒϥ΢β $
    
    $
    4XJGU
    3VTU
    (P
    
29. RubyͷWasm࣮ߦϑϩʔ 3VCZ
    *OUFSQSFUFSΛ8BTNόΠφϦʹίϯύΠϧ
    ✤ ͦͷόΠφϦΛར༻ͯ͠3VCZίʔυ͕ಈ͘ SVCZXBTN 3VCZΠϯλϓϦλ
    $3VCZ ϒϥ΢β BQQSC
30. WASI / VFS Ծ૝ϑΝΠϧγεςϜ 7'4 Λ8"4*্ʹ࣮૷
    ✤ ϑΝΠϧૢ࡞͕Ͱ͖ͳ͍؀ڥͰ΋
    ϑΝΠϧγεςϜ͔ΒͷಡΈࠐΈ͕Ͱ͖ΔΑ͏ʹ
    7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ
31. WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ
    $3VCZ BQQSC SVCZXBTN͸
    SVCZίʔυΛ࣮ߦՄೳ
32. WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ
    $3VCZ BQQSC XBTJWGTͰύοέʔδʂ
33. WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ
    $3VCZ NZBQQXBTN BQQSC XBTJWGTͰύοέʔδʂ
34. ruby.wasm ͷ ͸͡Ί͔ͨ
35. github.com/ruby/ruby.wasm
36. ruby.wasm npm package OQN
    QBDLBHFͰ഑෍͞Ε͍ͯΔ΋ͷΛ࢖͏ͱΒ͘Β͘
    ✤ 8BTNόΠφϦϏϧυෆཁʂ
37. ruby_wasm gem SVCZXBTNόΠφϦΛੜ੒Ͱ͖ΔHFN
    ✤ SCXBTN
    $-*
    Λ༻͍ͯɺHFN΍3VCZεΫϦϓτΛؚΜͩ
    8BTNόΠφϦ͕ϏϧυͰ͖Δ
38. ruby.wasm ͦͷଞɺDIFBU@TIFFUNE
    Λಡ΋͏ʂ
    ✤ IUUQTHJUIVCDPNSVCZSVCZXBTNCMPCNBJOEPDTDIFBU@TIFFUNE
    
39. ͔͜͜Β ʮϦΞϧλΠϜ௨৴ʯ ·ͰḷΓண͘ʹ͸ʁ
40. RubyKaigi 2025 Ͱ͸
41. dRuby on Browser Again! Ҿ༻
    IUUQTTMJEFZPVDIBOBQQTOFU
42. dRuby ෼ࢄΦϒδΣΫτϓϩάϥϛϯάͷͨΊͷϥΠϒϥϦ
    3VCZ͔Βଞͷ3VCZϓϩηεͷΦϒδΣΫτͷϝιουΛ
    ݺͼͩ͢͜ͱ͕Ͱ͖Δ
    5$1
    TPDLFU
    ͷΑ͏ͳ
    3VCZ
    ຊମ͕ఏڙ͢Δ௨৴खஈ͕͋Ε͹
    ௥ՃͷΠϯετʔϧ෺ͳ͠ʹར༻Մೳ
43. dRuby on Browser αʔόʔɾΫϥΠΞϯτؒͰ3VCZΦϒδΣΫτ͕ڞ༗Ͱ͖Δʂ
    ✤ ಺෦తʹ͸ʮ8FC4PDLFU௨৴ʯΛ࢖͍ͬͯΔͱͷ͜ͱ
    8FC4PDLFU
    ✤ )551ͱ͸ҟͳΔ௨৴खஈ
    ✤ αʔόʔɾΫϥΠΞϯτ૒ํ޲ͷϦΞϧλΠϜ௨৴
44. TCPSocket on Browser? 3VCZͷ
    5$14PDLFU
    ͕ͦͷ··ϒϥ΢βͰಈ͘༁Ͱ͸ͳ͍໛༷
    SVCZXBTNͰ
    SFRVJSF
    TPDLFU
    ͯ͠΋ࣦഊͯ͠͠·͏
45. ͳͥϒϥ΢βͰಈ͘ͷ͔
46. ͳͥಈ͘ͷ͔ ιʔείʔυΛഈݟ
48. +4
    NPEVMFΛ࢖͍ͬͯΔ
49. JS module KT
    HFN
    ʹΑΓఏڙ͞ΕΔ
    8"4*
    8BTNϞδϡʔϧΛ
    +BWB4DSJQUͷ8FC"TTFNCMZϥϯλΠϜͱඥ͚ͮ
    ✤ ͜ΕͷྗͰSVCZXBTN͕ϒϥ΢βͰ࣮ߦՄೳʹͳΔ
    +BWB4DSJQUͷϝιου΋ݺͼग़ͤΔΑ͏ʹͳΔ
50. Sample
51. ϒϥ΢βͷWebSocket APIΛ ruby.wasm͔Β׆༻ͯͦ͠͏ʂ
52. SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ
    ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔΋ʁ
53. SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ +4
    HFNΛར༻ͯ͠
    ϒϥ΢βͷ"1*
    ͱ
    XBTN
    ͷڮ౉͠໾ɹ
    ؾ߹Ͱ࣮૷͢Ε͹ಈ͘ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ
    ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔΋ʁ
54. SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ ͏Μɻ͖ͬͱͦ͏ʂ XBTN ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ
    ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔΋ʁ +4
    HFNΛར༻ͯ͠
    ϒϥ΢βͷ"1*
    ͱ
    XBTN
    ͷڮ౉͠໾ɹ
    ؾ߹Ͱ࣮૷͢Ε͹ಈ͘ 💪
55. ࣮ફ WebSocket
56. ࠲ֶ͕ଓ͍ͨͷͰ ଈ demo
57. ࢹௌऀࢀՃܕ IUUQTEFNPMOJMBCOFUDPOUFOUT
58. ँࡑ J04J1BE04ͷಈ࡞͕͋΍͍͠🙇🙇🙇
59. dRuby? /05
    E3VCZ
    
    3VCZ,BJHJ
    ͱಉ͡ωλΛ
    ࿩ͯ͠΋͠ΐ͏͕ͳ͍ͷͰʜ
60. Rubyʹ͸ ৺ڧ͍ຯํ͕
61. Rails
62. ৺ڧ͍ຯํ Rails ʮ"DUJPO$BCMFʯʹΑΓ
    8FC4PDLFU͕αϙʔτ͞Ε͍ͯΔʂ
    "DUJPO$BCMF
    ✤ 3BJMTʹ8FC4PDLFUΛಋೖ
    ✤ 3VCZ+4
    ྆ํͷ'8Λఏڙ
63. ؾ߹ SVCZXBTNͷ7.ʹϝοηʔδΛ౤͛Δ
64. (΄΅)શ෦RubyͰॻ͚Δʂ
65. தͰԿΛ͍ͯ͠Δ͔
66. <canvas></canvas>
67. CanvasͰࣗ༝ʹඳը 8FC"TTFNCMZʹը໘දࣔͷػೳ͸ͳ͍͕ʜ
    ✤ ϒϥ΢βʹ͸͋Δʂ
68. CanvasͰࣗ༝ʹඳը )5.-$BOWBT&MFNFOU
    HFU$POUFYU
    
    Λ࣮ߦ͢Δ
69. CanvasͰࣗ༝ʹඳը ը໘ඳը༻ͷϝιου͕࢖͑ΔΑ͏ʹͳΔ
70. ruby.wasm͸ ʮը໘ʯΛ ͯʹ͍Εͨʂ
71. Web Audio API
72. Web Audio API 8FC"TTFNCMZʹԻ੠࠶ੜυϥΠό͸ͳ͍͕ʜʜ
    ✤ ϒϥ΢βʹ͸͋Δʂ
    8FC
    "VEJP
    "1*
    ✤ ΢Σϒ্ͰԻ੠Λѻ͏ͨΊͷڧྗͳγεςϜΛఏڙ
    Ի੠ͷ߹੒ɺಛघޮՌ Τίʔͱ͔ ͳͲ͕Ͱ͖Δ
    ✤ BVEJPλάΑΓߴػೳ
73. Web Audio API +4
    Ͱ͸ʜ
74. Web Audio API 3VCZʹOFXԋࢉࢠ͸ແ͍ͷͰ͸ʂʁ
75. newԋࢉࢠ ҆͝৺͍ͩ͘͞ ↑new͕࢖͑·͢
76. Web Audio API ͯ͞ɺGFUDIͰԻ੠σʔλΛμ΢ϯϩʔυʜ
77. Web Audio API 3VCZʹ͸1SPNJTF΋ແ͍ͷͰ͸ʂʁ
78. Promise ΋͏͓෼͔ΓͰ͢Ͷ ↑await΋͍͚·͢
79. Ի͕໐Δʂ 8FC
    "VEJP
    "1*͕ѻ͑Δ
    Ի੠σʔλΛμ΢ϯϩʔυɾσίʔυͰ͖Δ
80. ruby.wasm͸ ʮԻ੠ʯΛ ͯʹ͍Εͨʂ
81. ଟਓ਺௨৴
82. ଟਓ਺௨৴ 1VC4VC
    ϝοηʔδ
    1VCMJTI
    
    4VCTDSJCF
    ✤ ૹ৴ऀ͸ந৅ΫϥεʹϝοηʔδΛૹ৴
    ✤ ड৴ऀ͸Ϋϥεʹಧ͘ϝοηʔδΛߪಡ
    ૹ৴ऀड৴ऀ͸͓ޓ͍Λ஌Δඞཁ͕ͳ͍
    
83. Pub/Sub ࣗ਎ͷݱࡏҐஔΛ1VCMJTI
    ࢀՃऀͷҐஔΛ4VCTDSJCF
84. Pub/Sub ஗ԆಉظͳͲ͸͋·Γؾʹ͠ͳ͍
    ΏΔ͍ϦΞϧλΠϜ௨৴͕࣮ݱʂ
    
85. ruby.wasm͸ ʮ௨৴ରઓʯΛ ͯʹ͍Εͨʂ
86. ࠓޙͷ՝୊
87. ήʔϜΤϯδϯΆ͘ ͳ͖ͬͯͨ
88. ར༻ऀͷײ૝ ػೳ͕ͨΓͳ͍
89. WebSocket × Game
90. WebSocket × Game 8FC4PDLFU͸5$1্Ͱ௨৴͢Δ
    ✤ ॱংอূͷͨΊɺ஗Ԇ͢Δͱޙଓύέοτ͕٧·ͬͯ͠·͏
    ✤ ήʔϜʹ͸޲͔ͳ͍͔΋ʂ
    8FC5SBOTQPSU͕࣍ظٕज़ͱͯ͠஫໨
    ✤ ͨͩϓϩτίϧ͕26*$ͳͷͰԿ΋Θ͔Βͳ͍ʜ
91. ͳʹ͸ͱ΋͋Ε
92. rubyͰ࡞ΕΔ΋ͷ͕૿͑Δͱ ͨͷ͍͠Ͷʂ
93. ͓͠·͍