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

by lni_T

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ 5XJUUFS 9 *%!-OJ@5 ϧχ ग़਎࿨Վࢁ +BWBΛ3BJMTʹҠߦͨ͠Γ 1)1Λ3BJMTʹҠߦͨ͠Γɹͱ͍ͬͨ αʔόҾͬӽ͠ۀͰੜܭΛཱ͍ͯͯΔ ʘΑΖ͘͠Ͷʗ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

աڈͭͬͨ͘΋ͷ SVCZXBTNͰ3VCZίʔυ͔Β Ի੠೾ܗΛੜ੒͢Δ SVCZXBTNTZOUIFTJ[FS ೥։࠵ େࡕ3VCZձٞʹͯൃද

Slide 6

Slide 6 text

* NOTICE * ຊ೔ͷτʔΫ͸੒Ռ෺ͷσϞؚ͕·Ε·͢ɻ ͥͻ͓खݩʹ1$εϚʔτϑΥϯΛ͝༻ҙͷ্ɺ͝ཡ͍ͩ͘͞ɻ

Slide 7

Slide 7 text

দࢁʂ দࢁʂ দࢁʂ ݄ͷ3VCZ,BJHJ ͓ർΕ༷Ͱͨ͠ʂ

Slide 8

Slide 8 text

ڵຯਂ͍ొஃ΍ʜ

Slide 9

Slide 9 text

ٱʑʹձ͏3VCJFTUͨͪʜ

Slide 10

Slide 10 text

ܹࢗΛड͚ͯ΍Δؾ61ʂ

Slide 11

Slide 11 text

ͦͷ··ͷྲྀΕͰؔ੢3VCZ΁

Slide 12

Slide 12 text

εέδϡʔϧΛߟ͑ͣʹCFPԠืͨ݁͠Ռ… Πϕϯτཌ೔ʹຊ൪ϦϦʔεΛ͢ΔӋ໨ʹ

Slide 13

Slide 13 text

ຊ೔͸ඍྗͳ͕Β ੝Γ্͛ʹߩݙͰ͖Ε͹ʂ

Slide 14

Slide 14 text

ຊ೔ͷτʔΫςʔϚ ruby.wasm

Slide 15

Slide 15 text

ruby.wasm ͓͞Β͍ গʑ͓෇͖߹͍͍ͩ͘͞

Slide 16

Slide 16 text

WebAssembly

Slide 17

Slide 17 text

WebAssembly(Wasm) Ϟμϯϒϥ΢βͰಈ࡞͢Δ όΠφϦίʔυͷ৽͍͠ϑΥʔϚοτ ಛ௃ ✤ )JHI1FSGPSNBODF ✤ 4FDVSF 4BOECPY؀ڥͰಈ࡞͢Δ ✤ -BOHVBHF*OEFQFOEFOU ಛఆͷݴޠʹґଘ͠ͳ͍ ✤ 1PSUBCMF

Slide 18

Slide 18 text

WebAssembly(Wasm) )JHI1FSGPSNBODF ✤ αΠζͱಡΈࠐΈ࣌ؒΛޮ཰Α͘અ໿Ͱ͖Δ όΠφϦܗࣜͰΤϯίʔυ ✤ ωΠςΟϒ଎౓Ͱͷಈ࡞Λ໨ࢦ͍ͯ͠Δ 4FDVSF ✤ 8BTNόΠφϦ͸4BOECPY؀ڥͰಈ࡞͢Δ ✤ ࢀߟIUUQTXFCBTTFNCMZPSHEPDTTFDVSJUZ

Slide 19

Slide 19 text

Language-Independent ಛఆͷݴޠʹґଘ͠ͳ͍ $$ 4XJGU 3VTU (PͳͲͷ༷ʑͳϓϩάϥϛϯάݴޠ͔Β 8BTNόΠφϦΛੜ੒Ͱ͖Δ ✤ 3VCZ΋஥ؒೖΓͨ͠ʂ

Slide 20

Slide 20 text

Portable ࠷ॳʹʮϞμϯϒϥ΢βͰಈ࡞͢Δʜʯͱ঺հ͠·͕ͨ͠ʜ ಛఆͷϓϥοτϑΥʔϜʹґଘͤͣಈ࡞͢Δʂ ✤ ݩʑ8FCϒϥ΢βͰͷར༻͕ओ໨త͕ͩͬͨ 8BTNͷϥϯλΠϜ͕͋Ε͹ϒϥ΢βҎ֎Ͱ΋ಈ͘

Slide 21

Slide 21 text

Portable 8BTNϥϯλΠϜ͕͋Ε͹ϒϥ΢βҎ֎Ͱ΋ಈ͘ ✤ $%/ͷ&EHF؀ڥ ✤ 'BB4؀ڥ ✤ ͦͷଞ8BTNϥϯλΠϜ XBTNUJNF XBTNFS ͨͩ͠ɺ8BTN͸ݱࡏ΋࢓༷͕௥Ճ͞Ε͓ͯΓ ϥϯλΠϜʹΑͬͯαϙʔτ͍ͯ͠Δ͔Ͳ͏͔͕ҟͳΔ

Slide 22

Slide 22 text

WASI

Slide 23

Slide 23 text

ʮ༷ʑͳ؀ڥʯͰ ʮ҆શʯ͔ͭʮޮ཰తʯʹ ϓϩάϥϜΛಈ͔͍ͨ͠ !

Slide 24

Slide 24 text

WASI 8FC"TTFNCMZ4ZTUFN*OUFSGBDF 04ʹґଘ͢ΔγεςϜίʔϧΛந৅Խ͢Δ࢓༷ ✤ ϑΝΠϧγεςϜΞΫηε ✤ ωοτϫʔΫΞΫηε ✤ FUD 8BTN3VOUJNF 7. )PTU4ZTUFN 8"4*

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

͔͜͜ΒRubyͷ࿩

Slide 27

Slide 27 text

Ruby / WebAssembly 3VCZ8"4*ϕʔεͷ8FC"TTFNCMZαϙʔτ ✤ 8BTN؀ڥͰ$3VCZ͕ಈ࡞͢ΔΑ͏ʹͳͬͨ

Slide 28

Slide 28 text

ҰൠతͳWasm࣮ߦϑϩʔ ֤ݴޠͷϓϩάϥϜΛ8BTNόΠφϦʹίϯύΠϧ XBTN ϒϥ΢β $$ 4XJGU 3VTU (P

Slide 29

Slide 29 text

RubyͷWasm࣮ߦϑϩʔ 3VCZ*OUFSQSFUFSΛ8BTNόΠφϦʹίϯύΠϧ ✤ ͦͷόΠφϦΛར༻ͯ͠3VCZίʔυ͕ಈ͘ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ ϒϥ΢β BQQSC

Slide 30

Slide 30 text

WASI / VFS Ծ૝ϑΝΠϧγεςϜ 7'4 Λ8"4*্ʹ࣮૷ ✤ ϑΝΠϧૢ࡞͕Ͱ͖ͳ͍؀ڥͰ΋ ϑΝΠϧγεςϜ͔ΒͷಡΈࠐΈ͕Ͱ͖ΔΑ͏ʹ 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ

Slide 31

Slide 31 text

WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ BQQSC SVCZXBTN͸ SVCZίʔυΛ࣮ߦՄೳ

Slide 32

Slide 32 text

WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ BQQSC XBTJWGTͰύοέʔδʂ

Slide 33

Slide 33 text

WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ NZBQQXBTN BQQSC XBTJWGTͰύοέʔδʂ

Slide 34

Slide 34 text

ruby.wasm ͷ ͸͡Ί͔ͨ

Slide 35

Slide 35 text

github.com/ruby/ruby.wasm

Slide 36

Slide 36 text

ruby.wasm npm package OQNQBDLBHFͰ഑෍͞Ε͍ͯΔ΋ͷΛ࢖͏ͱΒ͘Β͘ ✤ 8BTNόΠφϦϏϧυෆཁʂ

Slide 37

Slide 37 text

ruby_wasm gem SVCZXBTNόΠφϦΛੜ੒Ͱ͖ΔHFN ✤ SCXBTN$-*Λ༻͍ͯɺHFN΍3VCZεΫϦϓτΛؚΜͩ 8BTNόΠφϦ͕ϏϧυͰ͖Δ

Slide 38

Slide 38 text

ruby.wasm ͦͷଞɺDIFBU@TIFFUNEΛಡ΋͏ʂ ✤ IUUQTHJUIVCDPNSVCZSVCZXBTNCMPCNBJOEPDTDIFBU@TIFFUNE

Slide 39

Slide 39 text

͔͜͜Β ʮϦΞϧλΠϜ௨৴ʯ ·ͰḷΓண͘ʹ͸ʁ

Slide 40

Slide 40 text

RubyKaigi 2025 Ͱ͸

Slide 41

Slide 41 text

dRuby on Browser Again! Ҿ༻IUUQTTMJEFZPVDIBOBQQTOFU

Slide 42

Slide 42 text

dRuby ෼ࢄΦϒδΣΫτϓϩάϥϛϯάͷͨΊͷϥΠϒϥϦ 3VCZ͔Βଞͷ3VCZϓϩηεͷΦϒδΣΫτͷϝιουΛ ݺͼͩ͢͜ͱ͕Ͱ͖Δ 5$1TPDLFUͷΑ͏ͳ3VCZຊମ͕ఏڙ͢Δ௨৴खஈ͕͋Ε͹ ௥ՃͷΠϯετʔϧ෺ͳ͠ʹར༻Մೳ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

ͳͥϒϥ΢βͰಈ͘ͷ͔

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

+4NPEVMFΛ࢖͍ͬͯΔ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Sample

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

࣮ફ WebSocket

Slide 56

Slide 56 text

࠲ֶ͕ଓ͍ͨͷͰ ଈ demo

Slide 57

Slide 57 text

ࢹௌऀࢀՃܕ IUUQTEFNPMOJMBCOFUDPOUFOUT

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

dRuby? /05E3VCZ 3VCZ,BJHJͱಉ͡ωλΛ ࿩ͯ͠΋͠ΐ͏͕ͳ͍ͷͰʜ

Slide 60

Slide 60 text

Rubyʹ͸ ৺ڧ͍ຯํ͕

Slide 61

Slide 61 text

Rails

Slide 62

Slide 62 text

৺ڧ͍ຯํ Rails ʮ"DUJPO$BCMFʯʹΑΓ 8FC4PDLFU͕αϙʔτ͞Ε͍ͯΔʂ "DUJPO$BCMF ✤ 3BJMTʹ8FC4PDLFUΛಋೖ ✤ 3VCZ+4྆ํͷ'8Λఏڙ

Slide 63

Slide 63 text

ؾ߹ SVCZXBTNͷ7.ʹϝοηʔδΛ౤͛Δ

Slide 64

Slide 64 text

(΄΅)શ෦RubyͰॻ͚Δʂ

Slide 65

Slide 65 text

தͰԿΛ͍ͯ͠Δ͔

Slide 66

Slide 66 text

Slide 67

Slide 67 text

CanvasͰࣗ༝ʹඳը 8FC"TTFNCMZʹը໘දࣔͷػೳ͸ͳ͍͕ʜ ✤ ϒϥ΢βʹ͸͋Δʂ

Slide 68

Slide 68 text

CanvasͰࣗ༝ʹඳը )5.-$BOWBT&MFNFOUHFU$POUFYU Λ࣮ߦ͢Δ

Slide 69

Slide 69 text

CanvasͰࣗ༝ʹඳը ը໘ඳը༻ͷϝιου͕࢖͑ΔΑ͏ʹͳΔ

Slide 70

Slide 70 text

ruby.wasm͸ ʮը໘ʯΛ ͯʹ͍Εͨʂ

Slide 71

Slide 71 text

Web Audio API

Slide 72

Slide 72 text

Web Audio API 8FC"TTFNCMZʹԻ੠࠶ੜυϥΠό͸ͳ͍͕ʜʜ ✤ ϒϥ΢βʹ͸͋Δʂ 8FC"VEJP"1* ✤ ΢Σϒ্ͰԻ੠Λѻ͏ͨΊͷڧྗͳγεςϜΛఏڙ Ի੠ͷ߹੒ɺಛघޮՌ Τίʔͱ͔ ͳͲ͕Ͱ͖Δ ✤ BVEJPλάΑΓߴػೳ

Slide 73

Slide 73 text

Web Audio API +4Ͱ͸ʜ

Slide 74

Slide 74 text

Web Audio API 3VCZʹOFXԋࢉࢠ͸ແ͍ͷͰ͸ʂʁ

Slide 75

Slide 75 text

newԋࢉࢠ ҆͝৺͍ͩ͘͞ ↑new͕࢖͑·͢

Slide 76

Slide 76 text

Web Audio API ͯ͞ɺGFUDIͰԻ੠σʔλΛμ΢ϯϩʔυʜ

Slide 77

Slide 77 text

Web Audio API 3VCZʹ͸1SPNJTF΋ແ͍ͷͰ͸ʂʁ

Slide 78

Slide 78 text

Promise ΋͏͓෼͔ΓͰ͢Ͷ ↑await΋͍͚·͢

Slide 79

Slide 79 text

Ի͕໐Δʂ 8FC"VEJP"1*͕ѻ͑Δ Ի੠σʔλΛμ΢ϯϩʔυɾσίʔυͰ͖Δ

Slide 80

Slide 80 text

ruby.wasm͸ ʮԻ੠ʯΛ ͯʹ͍Εͨʂ

Slide 81

Slide 81 text

ଟਓ਺௨৴

Slide 82

Slide 82 text

ଟਓ਺௨৴ 1VC4VCϝοηʔδ 1VCMJTI4VCTDSJCF ✤ ૹ৴ऀ͸ந৅ΫϥεʹϝοηʔδΛૹ৴ ✤ ड৴ऀ͸Ϋϥεʹಧ͘ϝοηʔδΛߪಡ ૹ৴ऀड৴ऀ͸͓ޓ͍Λ஌Δඞཁ͕ͳ͍

Slide 83

Slide 83 text

Pub/Sub ࣗ਎ͷݱࡏҐஔΛ1VCMJTI ࢀՃऀͷҐஔΛ4VCTDSJCF

Slide 84

Slide 84 text

Pub/Sub ஗ԆಉظͳͲ͸͋·Γؾʹ͠ͳ͍ ΏΔ͍ϦΞϧλΠϜ௨৴͕࣮ݱʂ

Slide 85

Slide 85 text

ruby.wasm͸ ʮ௨৴ରઓʯΛ ͯʹ͍Εͨʂ

Slide 86

Slide 86 text

ࠓޙͷ՝୊

Slide 87

Slide 87 text

ήʔϜΤϯδϯΆ͘ ͳ͖ͬͯͨ

Slide 88

Slide 88 text

ར༻ऀͷײ૝ ػೳ͕ͨΓͳ͍

Slide 89

Slide 89 text

WebSocket × Game

Slide 90

Slide 90 text

WebSocket × Game 8FC4PDLFU͸5$1্Ͱ௨৴͢Δ ✤ ॱংอূͷͨΊɺ஗Ԇ͢Δͱޙଓύέοτ͕٧·ͬͯ͠·͏ ✤ ήʔϜʹ͸޲͔ͳ͍͔΋ʂ 8FC5SBOTQPSU͕࣍ظٕज़ͱͯ͠஫໨ ✤ ͨͩϓϩτίϧ͕26*$ͳͷͰԿ΋Θ͔Βͳ͍ʜ