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
680
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
230
ruby.wasmとWebSocketで遊ぼう!
lnit
0
180
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
6
2.9k
ruby.wasm × Service Workerでサーバーのいらないモックサーバーを作る
lnit
0
370
Railsアプリの仕様書を一瞬で作りたい話 - Omotesando.rb #99
lnit
1
340
ruby.wasm 最前線 2024 - wasmでMockServerをつくる #rubykaigi
lnit
2
4k
Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術 / Kaigi on Rails 2023
lnit
4
5.8k
ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi
lnit
0
1.7k
ブラウザで「今すぐ」gemを読み込む方法 / Load-gem-from-browser-JUST-NOW
lnit
0
1.4k
Other Decks in Programming
See All in Programming
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
590
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
dynamic!
moro
9
6.3k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
380
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
170
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.7k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
190
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
180
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Writing Fast Ruby
sferik
629
62k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Mobile First: as difficult as doing things right
swwweet
224
10k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Optimizing for Happiness
mojombo
379
70k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
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Ͱ࡞ΕΔͷ͕૿͑Δͱ ͨͷ͍͠Ͷʂ
͓͠·͍