ruby.wasmでブラウザを酷使してみよう / 2023-MatsueRubyKaigi

by lni_T

Slide 1

Slide 1 text

SVCZXBTNͰϒϥ΢βΛ ࠅ࢖ͯ͠ΈΑ͏ দߐ3VCZձٞ !MOJ@5ϧχ

Slide 2

Slide 2 text

ࣗݾ঺հ w 5XJUUFS 9 *%!MOJ@5 w ډॅ஍౦ژ w 3VCZྺ೥ʙݱࡏ w 3VCZd3VCZ w 3VCZ೥࢖ͬͯΔ͚ͲদߐʹདྷΔͷ͸ॳͰ͢ʂ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

͓͠͝ͱ .FE1FFSαʔόʔαΠυϦʔυΤϯδχΞ ۀ຿಺༰ SBJMTOFX͔ΒσϓϩΠอक·ͰରԠ ୂ௕͕ෆ଍͍ͯ͠Δࣄۀʹೖͬͯ   ͳΜ͔ྑ͍ײ͡ʹՐফ͠Λͯ͠ϦϦʔε ศར԰͞Μঢ়ଶʂ

Slide 6

Slide 6 text

ࠓ೔͸SVCZXBTNͷ ࿩Λ͠·͢

Slide 7

Slide 7 text

SVCZXBTN͓͞Β͍

Slide 8

Slide 8 text

SVCZXBTN͓͞Β͍ IUUQTSVCZLBJHJPSHQSFTFOUBUJPOTLBUFJOPJHBLVLVOIUNM

Slide 9

Slide 9 text

SVCZXBTNͱ͸ ϒϥ΢β্Ͱ3VCZ͕ಈ͘ ͦͷଞ8FC"TTFNCMZϥϯλΠϜͰ΋3VCZ͕ಈ͘

Slide 10

Slide 10 text

3VCZͷ8BTN࣮ߦϑϩʔ SVCZXBTN 3VCZΠϯλϓϦλ $3VCZ ϒϥ΢β BQQSC

Slide 11

Slide 11 text

3VCZͱڞʹॳϦϦʔε

Slide 12

Slide 12 text

SVCZXBTN WϦϦʔε "1*௥Ճ΍҆ఆੑ޲্

Slide 13

Slide 13 text

SVCZXBTN WϦϦʔε ػೳ௥ՃɺTUBDLTJ[Fؔ࿈Τϥʔͷվળ

Slide 14

Slide 14 text

͓͞Β͍ɹ͓ΘΓ

Slide 15

Slide 15 text

ࠓ೔ͷ͓୊

Slide 16

Slide 16 text

SVCZXBTNͰϒϥ΢βΛ ࠅ࢖ͯ͠ΈΑ͏

Slide 17

Slide 17 text

ͳͥࠅ࢖͢Δͷ͔

Slide 18

Slide 18 text

SVCZXBTN "1*ͷ௥Ճͱɺ҆ఆੑͷվળͱɺόάमਖ਼

Slide 19

Slide 19 text

SVCZXBTN "1*ͷ௥Ճͱɺ҆ఆੑͷվળͱɺόάमਖ਼ ;ʔΜͦ͏ͳͷ͔ʜʜ

Slide 20

Slide 20 text

Կ͕มΘ͔ͬͨ   ෼͔Βͳ͍

Slide 21

Slide 21 text

ͨΊͦ͏ʂ

Slide 22

Slide 22 text

%FNP

Slide 23

Slide 23 text

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w Ξχϝʔγϣϯ Τϥʔେྔ w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP MBUFTUIUNM w Ξχϝʔγϣϯ Τϥʔݮগ

Slide 24

Slide 24 text

࣮ݧ݁Ռ 3VCZ,BJHJ౰࣌ͷSVCZXBTN େྔʹFWBM͢Δͱͳ͔ͥΤϥʔ͕ൃੜ͢Δ

Slide 25

Slide 25 text

࣮ݧ݁Ռ ࠷৽൛ʹ͢Δ͚ͩͰվળ͞ΕͯΔʂ ҆ఆੑͷ޲্

Slide 26

Slide 26 text

ࠅ࢖͢Δͱ ෼͔Δ͜ͱ͕͋Δ

Slide 27

Slide 27 text

෼͔Βͳ͍͜ͱ͕ ෼͔Δͱʜʜ ͨͷ͍͠ʂ

Slide 28

Slide 28 text

࢖͍ࠐΜͰΈΑ͏

Slide 29

Slide 29 text

SVCZXBTNೖ໳

Slide 30

Slide 30 text

νϡʔτϦΞϧ IUUQTHJUIVCDPNSVCZSVCZXBTN

Slide 31

Slide 31 text

νϡʔτϦΞϧ w OQNͰఏڙ͞Ε͍ͯΔTDSJQUΛಡΈࠐΉ w TDSJQUλά಺ʹSVCZΛॻ͘ɹҎ্ʂ puts "Hello, world!"

Slide 32

Slide 32 text

νϡʔτϦΞϧ SCϑΝΠϧΛTSDʹ͢Δ͜ͱ΋Մೳ

Slide 33

Slide 33 text

3VCZ͔Β+4ͷੈքΛૢ࡞ SFRVJSFKT͢Δ require "js" window = JS.global[:window] window.alert "Hello, world!"

Slide 34

Slide 34 text

४උສ୺ʂ ͍Ζ͍Ζ΍ͬͯΈΑ͏

Slide 35

Slide 35 text

ϒϥ΢βͷΠϕϯτΛ रͬͯΈΑ͏

Slide 36

Slide 36 text

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w JOQVUͷDIBOHFΠϕϯτΛर͏σϞ

Slide 37

Slide 37 text

ೖྗʹ൓Ԡ͢Δ όϦσʔγϣϯ͕Ͱ͖ͨ

Slide 38

Slide 38 text

EPDVNFOUΛ࢖͏ ʮEPDVNFOUʯʹΞΫηεͰ͖ΔΑ͏ʹ͢Δ +4HMPCBM<EPDVNFOU>

Slide 39

Slide 39 text

BEE&WFOU-JTUFOFS EPDVNFOUܦ༝Ͱऔಘͨ͠ΦϒδΣΫτʹ   BEE&WFOU-JTUFOFSͰ͖Δ

Slide 40

Slide 40 text

BEE&WFOU-JTUFOFS όϦσʔγϣϯॲཧΛ࣮૷͢Ε͹׬੒ʂ

Slide 41

Slide 41 text

·ͩ·ͩংͷޱ

Slide 42

Slide 42 text

ϒϥ΢βͷ"1*Λ ୟ͍ͯΈΑ͏

Slide 43

Slide 43 text

ϒϥ΢βͷ"1*Λ࣮ߦ

Slide 44

Slide 44 text

DBOWBTΛѻ͏ʹ͸ )5.-$BOWBT&MFNFOUHFU$POUFYU   Λ࣮ߦ͢Δඞཁ͕͋Δ

Slide 45

Slide 45 text

DBOWBTΛѻ͏ʹ͸ ͜ΕͰඳը༻ͷϝιου͕͍Ζ͍Ζ࢖͑ΔΑ͏ʹͳΔ

Slide 46

Slide 46 text

ը໘ඳը͠์୊

Slide 47

Slide 47 text

ผͷ"1*΋ ୟ͍ͯΈΑ͏

Slide 48

Slide 48 text

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTEFNP w Ի͕ͳΔϘλϯ

Slide 49

Slide 49 text

3VCZͰԻΛ໐Β͢

Slide 50

Slide 50 text

8FC"VEJP"1* 8FC"VEJP"1* ΢Σϒ্ͰԻ੠Λѻ͏ͨΊͷڧྗͳγεςϜΛఏڙ Ի੠ͷ߹੒ɺಛघޮՌ ΤίʔͳͲ ͳͲ͕Ͱ͖Δ BVEJPλάΑΓߴػೳ

Slide 51

Slide 51 text

8FC"VEJP"1* +BWB4DSJQUͰ࢖͏৔߹ɺ   "VEJP$POUFYUͷΠϯελϯε͕ඞཁʹͳΔ const ctx = new AudioContext();

Slide 52

Slide 52 text

͔͠͠ࠔͬͨ͜ͱ͕

Slide 53

Slide 53 text

8FC"VEJP"1* +BWB4DSJQUͰ࢖͏৔߹ɺ   OFXԋࢉࢠͰΠϯελϯεΛ࡞੒͢Δ ͔͠͠ɺ3VCZʹ͸OFX͕ͳ͍ʂ const ctx = new AudioContext();

Slide 54

Slide 54 text

͞Βʹࠔͬͨ͜ͱ͕

Slide 55

Slide 55 text

Ի੠Λμ΢ϯϩʔυ +BWB4DSJQUͷ৔߹͸Ի੠σʔλΛ   'FUDIͯ͠σίʔυ͢Δ͜ͱͰ࠶ੜՄೳ const response = await fetch("sound.mp3"); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await ctx.decodeAudioData(arrayBuffer);

Slide 56

Slide 56 text

Ի੠Λμ΢ϯϩʔυ +BWB4DSJQUͷ৔߹͸Ի੠σʔλΛ   'FUDIͯ͠σίʔυ͢Δ͜ͱͰ࠶ੜՄೳ ɹɹˢ+BWB4DSJQUʹ͸1SPNJTF͕͋Δ͕   ɹɹɹ3VCZʹ͸1SPNJTF͕ͳ͍ʂ const response = await fetch("sound.mp3");

Slide 57

Slide 57 text

3VCZੈքͱ+4ੈքͷ ִͨΓ͕ͭΒ͍

Slide 58

Slide 58 text

ղܾ͍ͯ͘͠

Slide 59

Slide 59 text

3VCZͰAOFXA͢Δ +4FWBMΛ࢖͏͜ͱͰ+4ͷΠϯελϯεΛऔಘՄೳ OFXແ͍໰୊͸͜ΕͰճආՄೳ @ctx = JS.eval('return new AudioContext')

Slide 60

Slide 60 text

3VCZͰAOFXA͢Δ ͜ͷ໰୊͸SVCZXBTNWͰղফ͞Εͯ   FWBMͳ͠Ͱ΋OFXͰ͖ΔΑ͏ʹͳΓ·ͨ͠ʂ @ctx = JS.global[:AudioContext].new

Slide 61

Slide 61 text

3VCZͰABXBJUA͢Δ +BWB4DSJQU͔ΒFWBM"TZODͰ࣮ߦ͢Δ͜ͱͰ   ʮBXBJUʯ͕Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ ͕ɺΊΜͲ͏͍͘͞ʜ window.rubyVM.evalAsync(` path = "sound.mp3" JS.global.fetch(path).await `)

Slide 62

Slide 62 text

3VCZͰABXBJUA͢Δ SVCZXBTNͰ͸   TDSJQUʹEBUBFWBMBTZODΛ͚ͭΔ͜ͱͰ   BXBJU͕࢖͑ΔΑ͏ʹͳͬͨʂ

Slide 63

Slide 63 text

ͱ͍͏͜ͱͰ

Slide 64

Slide 64 text

3VCZͰԻ͕໐ΒͤΔʂ "VEJP$POUFYUͷΠϯελϯεΛ   OFXϝιουͰ࡞੒

Slide 65

Slide 65 text

3VCZͰԻ͕໐ΒͤΔʂ BXBJUΛ࢖ͬͯԻ੠σʔλΛGFUDIͯ͠σίʔυ

Slide 66

Slide 66 text

3VCZͰԻ͕໐ΒͤΔʂ σίʔυͨ͠Ի੠Λग़ྗʹܨ͍Ͱ࠶ੜ͢Ε͹׬ྃʂ

Slide 67

Slide 67 text

SVCZXBTN͸೔ʹ೔ʹ ػೳ͕૿͍͑ͯ·͢

Slide 68

Slide 68 text

࠷৽ػೳ͸࠷৽ϦϦʔεʹ 63-Ͱλά໊Λࢦఆͯ͠ར༻͢Δ͜ͱͰɺ   ৗʹ࠷৽൛Λ࢖͏͜ͱ͕Ͱ͖Δ MBUFTUW ຊ೔࣌఺ OFYU࠷৽ϦϦʔεόʔδϣϯ

Slide 69

Slide 69 text

OFYUΛ࢖͏͜ͱͰ ࠷େݶͷࠅ࢖͕Մೳʹʂ &EHFWFSTJPO࠷ߴʂ

Slide 70

Slide 70 text

͜Ε·Ͱ࣮ݱͨ͠΋ͷ Ϣʔβʔૢ࡞Λड͚औΔ ը૾Λग़ྗ͢Δ Ի੠Λग़ྗ͢Δ

Slide 71

Slide 71 text

૊Έ߹ΘͤΔͱʜʜ

Slide 72

Slide 72 text

% FN P w IUUQTMOJUHJUIVCJPSVCZXBTNQBHFTFOHJOF w SVCZXBTN੡ͷήʔϜʂ

Slide 73

Slide 73 text

গ͚ͩ͠ੜKTΛར༻ Ξχϝʔγϣϯ͢ΔΑ͏ϒϥ΢βʹ఻͑Δ͜ͱͰ   ϝΠϯϧʔϓΛ࣮૷ async function main( tFrame ) { const stopMain = window.requestAnimationFrame( main ); vm.eval(` $scene.main `) }

Slide 74

Slide 74 text

ϒϥ΢βº3VCZͰ ͍Ζ͍ΖͰ͖Δʂ

Slide 75

Slide 75 text

͓ΘΓʹ

Slide 76

Slide 76 text

ϒϥ΢βͷࠅ࢖ͷͨΊʹ ·ͣ͸3&"%.&ʹैͬͯ   ϒϥ΢βͰ3VCZ͕ಈ͘Α͏ʹͯ͠ΈΑ͏ʂ SVCZίʔυ্ͰSFRVJSFKT͠Α͏ʂ ࠷৽൛ͷػೳΛ׆༻͠Α͏ʂ 3VCZͰ޷͖ͳॲཧΛ࣮૷͠Α͏ʂ

Slide 77

Slide 77 text

ϒϥ΢βͰ3VCZΛ࢖͏ͱ ͨͷ͍͠ʂ

Slide 78

Slide 78 text

એ఻ʂ ࠓޙͷొஃ༧ఆ ,BJHJPO3BJMT ۚ ౔ 5VSCPͰਝ଎ʹαʔϏεΛ্ཱͪ͛Δ࿩

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

ΤϯδχΞ৬ͷํɹੵۃ࠾༻தʂ ҰॹʹϝυϐΞͷࣄۀΛ৳͹͍͖͍ͯͨ͠ΤϯδχΞͷํɺ͓଴͓ͪͯ͠Γ·͢ʂ ςοΫϒϩά IUUQTISNPTDPQBHFTNFEQFFSKPCT ϦʔυΤϯδχΞʢαʔόʔαΠυʣ ΤϯδχΞ঺հ IUUQTFOHJOFFSNFEQFFSDPKQ IUUQTUFDINFEQFFSDPKQ ٻਓ ϒϩά