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

Transcript

1. #kanrk08_preparty @Lni_T / ϧχ ruby.wasmͰ ଟਓ਺ϦΞϧλΠϜ ௨৴ήʔϜΛ࡞Ζ͏ʂ

2. ࣗݾ঺հ 5XJUUFS 9 *%!-OJ@5 ϧχ ग़਎࿨Վࢁ +BWBΛ3BJMTʹҠߦͨ͠Γ 1)1Λ3BJMTʹҠߦͨ͠Γɹͱ͍ͬͨ αʔόҾͬӽ͠ۀͰੜܭΛཱ͍ͯͯΔ

   ʘΑΖ͘͠Ͷʗ
3. None
4. None

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) Ϟμϯϒϥ΢βͰಈ࡞͢Δ όΠφϦίʔυͷ৽͍͠ϑΥʔϚοτ ಛ௃ ✤ )JHI1FSGPSNBODF ✤ 4FDVSF 4BOECPY؀ڥͰಈ࡞͢Δ

    ✤ -BOHVBHF*OEFQFOEFOU ಛఆͷݴޠʹґଘ͠ͳ͍ ✤ 1PSUBCMF

18. WebAssembly(Wasm) )JHI1FSGPSNBODF ✤ αΠζͱಡΈࠐΈ࣌ؒΛޮ཰Α͘અ໿Ͱ͖Δ όΠφϦܗࣜͰΤϯίʔυ ✤ ωΠςΟϒ଎౓Ͱͷಈ࡞Λ໨ࢦ͍ͯ͠Δ 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"TTFNCMZ4ZTUFN*OUFSGBDF 04ʹґଘ͢ΔγεςϜίʔϧΛந৅Խ͢Δ࢓༷ ✤ ϑΝΠϧγεςϜΞΫηε ✤ ωοτϫʔΫΞΫηε ✤ FUD 8BTN3VOUJNF

    7. )PTU4ZTUFN 8"4*

25. WASI 8BTNࣗମ͸γεςϜΠϯλʔϑΣΠεΛ࣋ͨͳ͍ 7.ͷ্Ͱ࣮ߦ͞ΕΔ 8"4*͸͜ΕΛن֨Խ͢Δ 8BTN3VOUJNF 7. )PTU4ZTUFN 8"4*

26. ͔͜͜ΒRubyͷ࿩

27. Ruby / WebAssembly 3VCZ8"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 OQNQBDLBHFͰ഑෍͞Ε͍ͯΔ΋ͷΛ࢖͏ͱΒ͘Β͘ ✤ 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$1TPDLFUͷΑ͏ͳ3VCZຊମ͕ఏڙ͢Δ௨৴खஈ͕͋Ε͹ ௥ՃͷΠϯετʔϧ෺ͳ͠ʹར༻Մೳ

43. dRuby on Browser αʔόʔɾΫϥΠΞϯτؒͰ3VCZΦϒδΣΫτ͕ڞ༗Ͱ͖Δʂ ✤ ಺෦తʹ͸ʮ8FC4PDLFU௨৴ʯΛ࢖͍ͬͯΔͱͷ͜ͱ 8FC4PDLFU ✤ )551ͱ͸ҟͳΔ௨৴खஈ ✤

    αʔόʔɾΫϥΠΞϯτ૒ํ޲ͷϦΞϧλΠϜ௨৴

44. TCPSocket on Browser? 3VCZͷ5$14PDLFU͕ͦͷ··ϒϥ΢βͰಈ͘༁Ͱ͸ͳ͍໛༷ SVCZXBTNͰSFRVJSFTPDLFUͯ͠΋ࣦഊͯ͠͠·͏

45. ͳͥϒϥ΢βͰಈ͘ͷ͔

46. ͳͥಈ͘ͷ͔ ιʔείʔυΛഈݟ

47. None

48. +4NPEVMFΛ࢖͍ͬͯΔ

49. JS module KTHFNʹΑΓఏڙ͞ΕΔ 8"4*8BTNϞδϡʔϧΛ +BWB4DSJQUͷ8FC"TTFNCMZϥϯλΠϜͱඥ͚ͮ ✤ ͜ΕͷྗͰSVCZXBTN͕ϒϥ΢βͰ࣮ߦՄೳʹͳΔ +BWB4DSJQUͷϝιου΋ݺͼग़ͤΔΑ͏ʹͳΔ

50. Sample

51. ϒϥ΢βͷWebSocket APIΛ ruby.wasm͔Β׆༻ͯͦ͠͏ʂ

52. SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔΋ʁ

53. SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ +4HFNΛར༻ͯ͠ ϒϥ΢βͷ"1*ͱXBTNͷڮ౉͠໾ɹ ؾ߹Ͱ࣮૷͢Ε͹ಈ͘ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔΋ʁ

54. SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ ͏Μɻ͖ͬͱͦ͏ʂ XBTN ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔΋ʁ +4HFNΛར༻ͯ͠ ϒϥ΢βͷ"1*ͱXBTNͷڮ౉͠໾ɹ ؾ߹Ͱ࣮૷͢Ε͹ಈ͘ 💪

55. ࣮ફ WebSocket

56. ࠲ֶ͕ଓ͍ͨͷͰ ଈ demo

57. ࢹௌऀࢀՃܕ IUUQTEFNPMOJMBCOFUDPOUFOUT

58. ँࡑ J04J1BE04ͷಈ࡞͕͋΍͍͠🙇🙇🙇

59. dRuby? /05E3VCZ 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&MFNFOUHFU$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ϝοηʔδ 1VCMJTI4VCTDSJCF ✤ ૹ৴ऀ͸ந৅ΫϥεʹϝοηʔδΛૹ৴ ✤ ड৴ऀ͸Ϋϥεʹಧ͘ϝοηʔδΛߪಡ ૹ৴ऀड৴ऀ͸͓ޓ͍Λ஌Δඞཁ͕ͳ͍

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. ͓͠·͍