Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Search
lni_T
June 27, 2025
Programming
3
580
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
「ruby.wasmで多人数リアルタイム通信ゲームを作ろう」
関西Ruby会議08 前夜祭 RejectKaigi での登壇資料です。
lni_T
June 27, 2025
Tweet
Share
More Decks by lni_T
See All by lni_T
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
210
ruby.wasmとWebSocketで遊ぼう!
lnit
0
170
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
6
2.9k
ruby.wasm × Service Workerでサーバーのいらないモックサーバーを作る
lnit
0
350
Railsアプリの仕様書を一瞬で作りたい話 - Omotesando.rb #99
lnit
1
330
ruby.wasm 最前線 2024 - wasmでMockServerをつくる #rubykaigi
lnit
2
3.9k
Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術 / Kaigi on Rails 2023
lnit
4
5.8k
ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi
lnit
0
1.6k
ブラウザで「今すぐ」gemを読み込む方法 / Load-gem-from-browser-JUST-NOW
lnit
0
1.3k
Other Decks in Programming
See All in Programming
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
450
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
720
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
180
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
240
Reactの歴史を振り返る
tutinoko
1
170
実践 Dev Containers × Claude Code
touyu
1
160
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
340
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
580
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
290
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
440
QA x AIエコシステム段階構築作戦
osu
0
250
画像コンペでのベースラインモデルの育て方
tattaka
3
1.4k
Featured
See All Featured
Fireside Chat
paigeccino
38
3.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Statistics for Hackers
jakevdp
799
220k
A designer walks into a library…
pauljervisheath
207
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
KATA
mclloyd
32
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Unsuck your backbone
ammeep
671
58k
Practical Orchestrator
shlominoach
190
11k
Side Projects
sachag
455
43k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Transcript
#kanrk08_preparty @Lni_T / ϧχ ruby.wasmͰ ଟਓϦΞϧλΠϜ ௨৴ήʔϜΛ࡞Ζ͏ʂ
ࣗݾհ 5XJUUFS 9 *%!-OJ@5 ϧχ ग़Վࢁ +BWBΛ3BJMTʹҠߦͨ͠Γ 1)1Λ3BJMTʹҠߦͨ͠Γɹͱ͍ͬͨ αʔόҾͬӽ͠ۀͰੜܭΛཱ͍ͯͯΔ
ʘΑΖ͘͠Ͷʗ
None
None
աڈͭͬͨ͘ͷ SVCZXBTNͰ3VCZίʔυ͔Β ԻܗΛੜ͢Δ SVCZXBTNTZOUIFTJ[FS ։࠵ େࡕ3VCZձٞʹͯൃද
* NOTICE * ຊͷτʔΫՌͷσϞؚ͕·Ε·͢ɻ ͥͻ͓खݩʹ1$εϚʔτϑΥϯΛ͝༻ҙͷ্ɺ͝ཡ͍ͩ͘͞ɻ
দࢁʂ দࢁʂ দࢁʂ ݄ͷ3VCZ,BJHJ ͓ർΕ༷Ͱͨ͠ʂ
ڵຯਂ͍ొஃʜ
ٱʑʹձ͏3VCJFTUͨͪʜ
ܹΛड͚ͯΔؾ61ʂ
ͦͷ··ͷྲྀΕͰؔ3VCZ
εέδϡʔϧΛߟ͑ͣʹCFPԠืͨ݁͠Ռ… Πϕϯτཌʹຊ൪ϦϦʔεΛ͢ΔӋʹ
ຊඍྗͳ͕Β Γ্͛ʹߩݙͰ͖Εʂ
ຊͷτʔΫςʔϚ ruby.wasm
ruby.wasm ͓͞Β͍ গʑ͓͖߹͍͍ͩ͘͞
WebAssembly
WebAssembly(Wasm) ϞμϯϒϥβͰಈ࡞͢Δ όΠφϦίʔυͷ৽͍͠ϑΥʔϚοτ ಛ ✤ )JHI1FSGPSNBODF ✤ 4FDVSF 4BOECPYڥͰಈ࡞͢Δ
✤ -BOHVBHF*OEFQFOEFOU ಛఆͷݴޠʹґଘ͠ͳ͍ ✤ 1PSUBCMF
WebAssembly(Wasm) )JHI1FSGPSNBODF ✤ αΠζͱಡΈࠐΈ࣌ؒΛޮΑ͘અͰ͖Δ όΠφϦܗࣜͰΤϯίʔυ ✤ ωΠςΟϒͰͷಈ࡞Λࢦ͍ͯ͠Δ 4FDVSF ✤ 8BTNόΠφϦ4BOECPYڥͰಈ࡞͢Δ
✤ ࢀߟIUUQTXFCBTTFNCMZPSHEPDTTFDVSJUZ
Language-Independent ಛఆͷݴޠʹґଘ͠ͳ͍ $$ 4XJGU 3VTU (PͳͲͷ༷ʑͳϓϩάϥϛϯάݴޠ͔Β 8BTNόΠφϦΛੜͰ͖Δ ✤ 3VCZؒೖΓͨ͠ʂ
Portable ࠷ॳʹʮϞμϯϒϥβͰಈ࡞͢Δʜʯͱհ͠·͕ͨ͠ʜ ಛఆͷϓϥοτϑΥʔϜʹґଘͤͣಈ࡞͢Δʂ ✤ ݩʑ8FCϒϥβͰͷར༻͕ओత͕ͩͬͨ 8BTNͷϥϯλΠϜ͕͋ΕϒϥβҎ֎Ͱಈ͘
Portable 8BTNϥϯλΠϜ͕͋ΕϒϥβҎ֎Ͱಈ͘ ✤ $%/ͷ&EHFڥ ✤ 'BB4ڥ ✤ ͦͷଞ8BTNϥϯλΠϜ XBTNUJNF XBTNFS
ͨͩ͠ɺ8BTNݱࡏ༷͕Ճ͞Ε͓ͯΓ ϥϯλΠϜʹΑͬͯαϙʔτ͍ͯ͠Δ͔Ͳ͏͔͕ҟͳΔ
WASI
ʮ༷ʑͳڥʯͰ ʮ҆શʯ͔ͭʮޮతʯʹ ϓϩάϥϜΛಈ͔͍ͨ͠ !
WASI 8FC"TTFNCMZ4ZTUFN*OUFSGBDF 04ʹґଘ͢ΔγεςϜίʔϧΛநԽ͢Δ༷ ✤ ϑΝΠϧγεςϜΞΫηε ✤ ωοτϫʔΫΞΫηε ✤ FUD 8BTN3VOUJNF
7. )PTU4ZTUFN 8"4*
WASI 8BTNࣗମγεςϜΠϯλʔϑΣΠεΛ࣋ͨͳ͍ 7.ͷ্Ͱ࣮ߦ͞ΕΔ 8"4*͜ΕΛن֨Խ͢Δ 8BTN3VOUJNF 7. )PTU4ZTUFN 8"4*
͔͜͜ΒRubyͷ
Ruby / WebAssembly 3VCZ8"4*ϕʔεͷ8FC"TTFNCMZαϙʔτ ✤ 8BTNڥͰ$3VCZ͕ಈ࡞͢ΔΑ͏ʹͳͬͨ
ҰൠతͳWasm࣮ߦϑϩʔ ֤ݴޠͷϓϩάϥϜΛ8BTNόΠφϦʹίϯύΠϧ XBTN ϒϥβ $$ 4XJGU 3VTU (P
RubyͷWasm࣮ߦϑϩʔ 3VCZ*OUFSQSFUFSΛ8BTNόΠφϦʹίϯύΠϧ ✤ ͦͷόΠφϦΛར༻ͯ͠3VCZίʔυ͕ಈ͘ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ ϒϥβ BQQSC
WASI / VFS ԾϑΝΠϧγεςϜ 7'4 Λ8"4*্ʹ࣮ ✤ ϑΝΠϧૢ࡞͕Ͱ͖ͳ͍ڥͰ ϑΝΠϧγεςϜ͔ΒͷಡΈࠐΈ͕Ͱ͖ΔΑ͏ʹ 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ
WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ BQQSC SVCZXBTN SVCZίʔυΛ࣮ߦՄೳ
WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ BQQSC XBTJWGTͰύοέʔδʂ
WASI / VFS 7'4ʹʮSCʯΛຒΊࠐΉ͜ͱͰ୯ҰϑΝΠϧʹύοέʔδԽՄೳ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ NZBQQXBTN BQQSC XBTJWGTͰύοέʔδʂ
ruby.wasm ͷ ͡Ί͔ͨ
github.com/ruby/ruby.wasm
ruby.wasm npm package OQNQBDLBHFͰ͞Ε͍ͯΔͷΛ͏ͱΒ͘Β͘ ✤ 8BTNόΠφϦϏϧυෆཁʂ
ruby_wasm gem SVCZXBTNόΠφϦΛੜͰ͖ΔHFN ✤ SCXBTN$-*Λ༻͍ͯɺHFN3VCZεΫϦϓτΛؚΜͩ 8BTNόΠφϦ͕ϏϧυͰ͖Δ
ruby.wasm ͦͷଞɺDIFBU@TIFFUNEΛಡ͏ʂ ✤ IUUQTHJUIVCDPNSVCZSVCZXBTNCMPCNBJOEPDTDIFBU@TIFFUNE
͔͜͜Β ʮϦΞϧλΠϜ௨৴ʯ ·ͰḷΓண͘ʹʁ
RubyKaigi 2025 Ͱ
dRuby on Browser Again! Ҿ༻IUUQTTMJEFZPVDIBOBQQTOFU
dRuby ࢄΦϒδΣΫτϓϩάϥϛϯάͷͨΊͷϥΠϒϥϦ 3VCZ͔Βଞͷ3VCZϓϩηεͷΦϒδΣΫτͷϝιουΛ ݺͼͩ͢͜ͱ͕Ͱ͖Δ 5$1TPDLFUͷΑ͏ͳ3VCZຊମ͕ఏڙ͢Δ௨৴खஈ͕͋Ε ՃͷΠϯετʔϧͳ͠ʹར༻Մೳ
dRuby on Browser αʔόʔɾΫϥΠΞϯτؒͰ3VCZΦϒδΣΫτ͕ڞ༗Ͱ͖Δʂ ✤ ෦తʹʮ8FC4PDLFU௨৴ʯΛ͍ͬͯΔͱͷ͜ͱ 8FC4PDLFU ✤ )551ͱҟͳΔ௨৴खஈ ✤
αʔόʔɾΫϥΠΞϯτํͷϦΞϧλΠϜ௨৴
TCPSocket on Browser? 3VCZͷ5$14PDLFU͕ͦͷ··ϒϥβͰಈ͘༁Ͱͳ͍༷ SVCZXBTNͰSFRVJSFTPDLFUࣦͯ͠ഊͯ͠͠·͏
ͳͥϒϥβͰಈ͘ͷ͔
ͳͥಈ͘ͷ͔ ιʔείʔυΛഈݟ
None
+4NPEVMFΛ͍ͬͯΔ
JS module KTHFNʹΑΓఏڙ͞ΕΔ 8"4*8BTNϞδϡʔϧΛ +BWB4DSJQUͷ8FC"TTFNCMZϥϯλΠϜͱඥ͚ͮ ✤ ͜ΕͷྗͰSVCZXBTN͕ϒϥβͰ࣮ߦՄೳʹͳΔ +BWB4DSJQUͷϝιουݺͼग़ͤΔΑ͏ʹͳΔ
Sample
ϒϥβͷWebSocket APIΛ ruby.wasm͔Β׆༻ͯͦ͠͏ʂ
SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔ʁ
SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ +4HFNΛར༻ͯ͠ ϒϥβͷ"1*ͱXBTNͷڮ͠ɹ ؾ߹Ͱ࣮͢Εಈ͘ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔ʁ
SVCZXBTNͰಛఆػೳʹରԠ͍ͨ͠ ͏Μɻ͖ͬͱͦ͏ʂ XBTN ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹΛɹ ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹͷ͔ʁ +4HFNΛར༻ͯ͠ ϒϥβͷ"1*ͱXBTNͷڮ͠ɹ ؾ߹Ͱ࣮͢Εಈ͘ 💪
࣮ફ WebSocket
࠲ֶ͕ଓ͍ͨͷͰ ଈ demo
ࢹௌऀࢀՃܕ IUUQTEFNPMOJMBCOFUDPOUFOUT
ँࡑ J04J1BE04ͷಈ࡞͕͍͋͠🙇🙇🙇
dRuby? /05E3VCZ 3VCZ,BJHJͱಉ͡ωλΛ ͯ͠͠ΐ͏͕ͳ͍ͷͰʜ
Rubyʹ ৺ڧ͍ຯํ͕
Rails
৺ڧ͍ຯํ Rails ʮ"DUJPO$BCMFʯʹΑΓ 8FC4PDLFU͕αϙʔτ͞Ε͍ͯΔʂ "DUJPO$BCMF ✤ 3BJMTʹ8FC4PDLFUΛಋೖ ✤ 3VCZ+4྆ํͷ'8Λఏڙ
ؾ߹ SVCZXBTNͷ7.ʹϝοηʔδΛ͛Δ
(΄΅)શ෦RubyͰॻ͚Δʂ
தͰԿΛ͍ͯ͠Δ͔
<canvas></canvas>
CanvasͰࣗ༝ʹඳը 8FC"TTFNCMZʹը໘දࣔͷػೳͳ͍͕ʜ ✤ ϒϥβʹ͋Δʂ
CanvasͰࣗ༝ʹඳը )5.-$BOWBT&MFNFOUHFU$POUFYU Λ࣮ߦ͢Δ
CanvasͰࣗ༝ʹඳը ը໘ඳը༻ͷϝιου͕͑ΔΑ͏ʹͳΔ
ruby.wasm ʮը໘ʯΛ ͯʹ͍Εͨʂ
Web Audio API
Web Audio API 8FC"TTFNCMZʹԻ࠶ੜυϥΠόͳ͍͕ʜʜ ✤ ϒϥβʹ͋Δʂ 8FC"VEJP"1* ✤ Σϒ্ͰԻΛѻ͏ͨΊͷڧྗͳγεςϜΛఏڙ Իͷ߹ɺಛघޮՌ
Τίʔͱ͔ ͳͲ͕Ͱ͖Δ ✤ BVEJPλάΑΓߴػೳ
Web Audio API +4Ͱʜ
Web Audio API 3VCZʹOFXԋࢉࢠແ͍ͷͰʂʁ
newԋࢉࢠ ҆͝৺͍ͩ͘͞ ↑new͕͑·͢
Web Audio API ͯ͞ɺGFUDIͰԻσʔλΛμϯϩʔυʜ
Web Audio API 3VCZʹ1SPNJTFແ͍ͷͰʂʁ
Promise ͏͓͔ΓͰ͢Ͷ ↑await͍͚·͢
Ի͕໐Δʂ 8FC"VEJP"1*͕ѻ͑Δ ԻσʔλΛμϯϩʔυɾσίʔυͰ͖Δ
ruby.wasm ʮԻʯΛ ͯʹ͍Εͨʂ
ଟਓ௨৴
ଟਓ௨৴ 1VC4VCϝοηʔδ 1VCMJTI4VCTDSJCF ✤ ૹ৴ऀநΫϥεʹϝοηʔδΛૹ৴ ✤ ड৴ऀΫϥεʹಧ͘ϝοηʔδΛߪಡ ૹ৴ऀड৴ऀ͓ޓ͍ΛΔඞཁ͕ͳ͍
Pub/Sub ࣗͷݱࡏҐஔΛ1VCMJTI ࢀՃऀͷҐஔΛ4VCTDSJCF
Pub/Sub ԆಉظͳͲ͋·Γؾʹ͠ͳ͍ ΏΔ͍ϦΞϧλΠϜ௨৴͕࣮ݱʂ
ruby.wasm ʮ௨৴ରઓʯΛ ͯʹ͍Εͨʂ
ࠓޙͷ՝
ήʔϜΤϯδϯΆ͘ ͳ͖ͬͯͨ
ར༻ऀͷײ ػೳ͕ͨΓͳ͍
WebSocket × Game
WebSocket × Game 8FC4PDLFU5$1্Ͱ௨৴͢Δ ✤ ॱংอূͷͨΊɺԆ͢Δͱޙଓύέοτ͕٧·ͬͯ͠·͏ ✤ ήʔϜʹ͔ͳ͍͔ʂ 8FC5SBOTQPSU͕࣍ظٕज़ͱͯ͠ ✤
ͨͩϓϩτίϧ͕26*$ͳͷͰԿΘ͔Βͳ͍ʜ
ͳʹͱ͋Ε
rubyͰ࡞ΕΔͷ͕૿͑Δͱ ͨͷ͍͠Ͷʂ
͓͠·͍