ブラウザで「今すぐ」gemを読み込む方法 / Load-gem-from-browser-JUST-NOW

"ブラウザで「今すぐ」gemを読み込む方法"
大阪Ruby会議03での登壇資料です。
https://rubykansai.github.io/osaka03/

当日使用したデモページはこちら
https://lnit.github.io/ruby-wasm-synthesizer/wave/

Transcript

1. ϒϥ΢βͰʮࠓ͙͢ʯ HFNΛಡΈࠐΉํ๏ 
   େࡕ3VCZձٞ
   !MOJ@5
   
   ϧχ
2. ࣗݾ঺հ w5XJUUFS 9
   *%
   !MOJ@5
   wډॅ஍
   ౦ژ
   wग़਎஍
   ࿨Վࢁ
   wࠓ೔͸ͻ͞ͼ͞ʹؔ੢ʹؼ͖͍ͬͯͯ·͢
7. ͓͠͝ͱ  .FE1FFS
   αʔόʔαΠυ
   ϦʔυΤϯδχΞ
    ۀ຿಺༰
    SBJMT
   OFX
   ͔ΒσϓϩΠอक·ͰରԠ
    ୂ௕͕ෆ଍͍ͯ͠Δࣄۀʹೖͬͯ 
 ͳΜ͔ྑ͍ײ͡ʹՐফ͠Λͯ͠ϦϦʔε
    ศར԰͞Μঢ়ଶʂ
8. ͭͬͨ͘΋ͷ  ϒϥ΢βͰ3VCZΛ࢖͏ͱʜͨͷ͍͠ʂʂʂ
    SVCZXBTN੡ήʔϜΛެ։ͨ͠Γ͍ͯ͠·͢
9. SVCZXBTN
   ͓͞Β͍
10. SVCZXBTN
    ͱ͸  ϒϥ΢β্Ͱ3VCZ͕ಈ͘
     ͦͷଞ8FC"TTFNCMZϥϯλΠϜͰ΋3VCZ͕ಈ͘
11. 3VCZ,BJHJ
    
    ͓͞Β͍ IUUQTTQFBLFSEFDLDPNMFETVOMPBEHFNGSPNCSPXTS
12. 8BTNͰHFN͸࢖͑Δ͔  $47΍:".-ͳͲͷHFN͸࢖͑Δ
     ಉࠝ͞ΕͨGVMM
    CVJME൛͕ެ։͞Ε͍ͯΔ
     SE
    QBSUZ
    HFN͸࢖͑ͳ͍
     ˞ࣗྗͰϏϧυ͢Ε͹࢖͑Δ΋ͷ΋༗
     Ͱ΋HFN࢖͍͍ͨΑͶʂʂʂ
13. +BWB4DSJQUͷྺ࢙ʹֶͿ  +BWB4DSJQU΋ಉ͡໰୊Λ๊͍͑ͯͨ
     OQNͷύοέʔδΛ 
 OPEFKT
    
    ϒϥ΢βͲͪΒͰ΋࢖͍͍ͨ
14. +BWB4DSJQUͷྺ࢙ʹֶͿ  /PEFKT 
     +BWB4DSJQUʹNPEVMF͕࣋ͪࠐ·Εͨ
     #SPXTFSJGZ 
     શͯͷґଘ+4ΛϑΝΠϧʹ·ͱΊΔ
     *NQPSUNBQT 
     ໊લͱύε 63- Λඥ͚ͮͯϩʔυͰ͖ΔΑ͏ʹ
15. Ξϓϩʔνํ๏ " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
16. Ξϓϩʔνํ๏ " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
    w #Λ࠾༻ͯ͠
    SFRVJSF@SFMBUJWF
    SFRVJSFͳͲͷ 
 ࣮૷ΛਐΊ͍ͯ͘ʜ
    w ͱ͍͏ͷ͕3VCZ,BJHJ
    ͷ͓࿩Ͱͨ͠ɻ
17. ͦͷޙͷ࿩  3VCZ,BJHJ
    
    GPMMPX
    VQ
     SFRVJSF@SFMBUJWF
    ͕ಈ͘Α͏ʹͳͬͨͱͷ͜ͱ IUUQTTQFBLFSEFDLDPNMFETVOSVCZEPUXBTNOJHVBOTVSVKJOCVCBPHBP
18. ͦͷޙͷ࿩  ࠓޙଓใ͕དྷΔʜ͔΋ʜʁ
19. ͓͞Β͍ɹ͓ΘΓ
20. ࠓ೔ͷ͓୊
21. ϒϥ΢βͰʮࠓ͙͢ʯ HFNΛಡΈࠐΉํ๏
22. Ξϓϩʔνํ๏ " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
23. Ξϓϩʔνํ๏ " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
    w ʮࠓ͙͢ʯಡΈࠐΉͳΒʲϓϥϯ"ʳͳͷͰ͸ʁ
24. 3VCZίʔυΛ
    #VOEMJOH͍ͨ͠
25. SCϑΝΠϧΛ·ͱΊ͍ͨ NBJOSC MJCSC MJCSC CVOEMFESC
26. ૄ݁߹ͳ؀ڥʹͳΔͷͰ͸ CVOEMFESC SVCZXBTN ϒϥ΢β ެࣜఏڙ 
 Ϗϧυ൛ ඞཁͳ
    HFN
27. Ұॹʹ΍ͬͯΈΑ͏ʂ
28. ґଘؔ܎͕෼͔Ε͹ʜ NBJOSC ʘ
    SFRVJSF
    ʗ MJCSC
29. ,FSOFMDBMMFS@MPDBUJPOT  όοΫτϨʔεΛऔಘͰ͖Δϝιου
30. ,FSOFMDBMMFS@MPDBUJPOT  SFRVJSF࣌ʹDBMMFS@MPDBUJPOTΛऔಘ͢Ε͹ 
 ґଘؔ܎͕Θ͔ΔͷͰ͸ʁ
31. ,FSOFMDBMMFS@MPDBUJPOT  SFRVJSF࣌ʹDBMMFS@MPDBUJPOTΛऔಘ͢Ε͹ 
 ґଘؔ܎͕Θ͔ΔͷͰ͸ʁ
     SFRVJSFΛվ଄ͯ͠ॲཧΛ௥Ճ͠Α͏ʂʂ
     BMJBT@NFUIPE
     QSFQFOE
32. BMJBT@NFUIPE  SFRVJSFϝιουʹผ໊Λ͚͓ͭͯ͘
     ৽SFRVJSF͔ΒچSFRVJSFΛݺͿ͜ͱͰSFRVJSFΛ֦ு
33. QSFQFOE  SFRVJSFΛ্ॻ͖ͭͭ͠TVQFSͰݩͷڍಈΛݺͼग़͠
34. SFRVJSFͷґଘ͕ḷΕΔ  SFRVJSF
    KTPO
    ͷྫ
35. /&95
    SFRVJSF@SFMBUJWF
36. SFRVJSF@SFMBUJWFͷ໰୊఺  MJC
    
    
     CBTFSC
     NPEVMFTSC
     SFRVJSF@SFMBUJWF
     ݱࡏͷϑΝΠϧ͔Βͷ૬ରύεͰ
    SFRVJSF͢Δ SFRVJSF@SFMBUJWF
    NPEVMFTSC
37. SFRVJSF@SFMBUJWFͷ໰୊఺  MJC
    
    
     CBTFSC
     NPEVMFTSC
     QBUDISC
     QBUDISCͰ
    SFRVJSF@SFMBUJWFΛॻ͖׵͑Δͱʁ SFRVJSF@SFMBUJWF
    NPEVMFTSC
38. SFRVJSF@SFMBUJWFͷ໰୊఺  MJC
    
    
     CBTFSC
     NPEVMFTSC
     QBUDISC
     SFRVJSF@SFMBUJWF
    NPEVMFTSC
39. SFRVJSF@SFMBUJWFͷ໰୊఺  MJC
    
    
     CBTFSC
     NPEVMFTSC
     QBUDISC
     SFRVJSF@SFMBUJWF
    NPEVMFTSC DBOOPU
    MPBE
    TVDI
    fi MF
40. SFRVJSF@SFMBUJWFͷ໰୊఺  SFRVJSF@SFMBUJWF
     ݱࡏͷϑΝΠϧ͔Βͷ૬ରύεͰ
    SFRVJSF͢Δ
     ୯७ͳΦʔόʔϥΠυͩͱڍಈ͕มΘͬͯ͠·͏ʂ
     ͜·ͬͨ🤔
41. ઌਓʹֶͿ  SVCZMJCTZOUBY@TVHHFTUDPSF@FYUSC SFRVJSF
    छʹBMJBT@NFUIPE͍ͯ͠Δ
42. ઌਓʹֶͿ  SFRVJSF@SFMBUJWF
    ͸ʜʁ ݺͼग़͠ݩͷઈରύε
    
    ର৅ύε
    Λ૊Έཱͯ
43. SFRVJSF@SFMBUJWF΋ḷΕΔʂ
44. ͜ΕͰ3VCZϑΝΠϧͷ
    ґଘؔ܎͕ྻڍͰ͖Δʂ
45. ࣮ࡏͷHFNͰࢼ͢
46. ࣮ࡏͷHFN  ͓୊͸
    WJDUPS
    HFN
47. SFRVJSFΛḷΔ
48. SFRVJSFΛḷΔ
49. ඪ४ϥΠϒϥϦ͸ল͘ GPSXBSEBCMF͸ඪ४ఴ෇ͳͷͰCVOEMFෆཁ
50. ґଘݩͱґଘઌͷ
    ه࿥͕׬ྃ
51. ιʔείʔυΛల։ ϑΝΠϧʹCVOEMF׬ྃʂ
52. ϒϥ΢β͔Βϩʔυ  )5.-ʹߦॻ͚ͩ͘ʂ <script type="text/ruby" src="victor.rb"></script>
53. 🎉
    ಈ͍ͨʂ
    🎉
54. 3VCZͷ#VOEMF
    ׬ʁ
55. ͱ͍͏༁ʹ΋͍͔ͳ͍
56. ఢ͸SFRVJSF͚ͩʹඇͣ
57. 'JMFSFBEಈ͔ͳ͍  ಺෦Ͱ3VCZεΫϦϓτҎ֎Λࢀর͍ͯ͠Δ
     ύε͕ಈతʹมΘΔͷͰల։΋Ͱ͖ͳ͍
58. ղܾ๏  +4Ͱ'FUDIͯ͠ɺXBTNͷϑΝΠϧγεςϜ಺ʹ 
 อ͓࣋ͯ͘͠ͱಈ͘ʂ
59. 🎉
    ࠓ౓ͦ͜ಈ͍ͨʂ
    🎉
60. %FNP
61. SVCZXBTNTZOUIFTJ[FS
62. % FN P %FNP
    
    IUUQTMOJUHJUIVCJPSVCZXBTNTZOUIFTJ[FSXBWF
63. SVCZXBTNTZOUIFTJ[FS
    ಺෦ղઆ
64. 3VCZͰԻΛ໐Β͢
65. 8FC
    "VEJP
    "1*  8FC
    "VEJP
    "1*
     ΢Σϒ্ͰԻ੠Λѻ͏ͨΊͷڧྗͳγεςϜΛఏ ڙ
     Ի੠ͷ߹੒ɺಛघޮՌ ΤίʔͳͲ ͳͲ͕Ͱ͖Δ
     BVEJPλάΑΓߴػೳ
66. 8FC
    "VEJP
    "1*  +BWB4DSJQUͰ࢖͏৔߹ɺ 
 "VEJP$POUFYUͷΠϯελϯε͕ඞཁʹͳΔ
     ͔͠͠ɺ3VCZ্Ͱ͸OFX͕Ͱ͖ͳ͍ʂ const ctx = new AudioContext();
67. 3VCZͰAOFXA͢Δ  +4FWBM
    Λ࢖͏͜ͱͰ+4ͷΠϯελϯεΛऔಘՄೳ
     OFXແ͍໰୊͸͜ΕͰճආՄೳ @ctx = JS.eval('return new AudioContext')
68. 3VCZͰAOFXA͢Δ  ͜ͷ໰୊͸SVCZXBTN
    W
    Ͱղফ͞Εͯ 
 FWBMͳ͠Ͱ΋OFXͰ͖ΔΑ͏ʹͳΓ·ͨ͠ʂ @ctx = JS.global[:AudioContext].new
69. 3VCZͰ೾ܗΛੜ੒͢Δ
70. ϧʔϓΛճͯ͠
    पظͷ൒෼͸ 
    ΋͏൒෼͸
    ͱͳΔ഑ྻΛੜ੒
71. 3VCZͰ೾ܗΛੜ੒͢Δ "VEJP$POUFYU͔ΒԻ੠όοϑΝΛੜ੒ͯ͠ʜ ೾ܗσʔλΛॻ͖ࠐΊ͹׬ྃ
72. ೾ͷߴ͞Λඳը  ઌఔల։ͨ͠7JDUPSͷίʔυͰ೾ܗΛՄࢹԽ
73. ԻݯΛ࠶ੜ "VEJP$POUFYU͔ΒԻݯΛ࡞੒ ग़ྗʹͭͳ͛Δ ࠶ੜ͢Ε͹Ի͕໐Δʂ
74. LFZEPXOΛर͏ LFZEPXOΠϕϯτΛरͬͯ
    ΩʔʹԠͨ͡ԻΛ໐Β͢ʂ
75. Ի֊Λͭ͘Δ
76. 8FC
    "VEJPͰԻ֊  EFUVOF
    ϓϩύςΟΛࢦఆ͢Ε͹Մೳ
     ൒Ի্ͷԻΛग़͢
    ʮʯΛࢦఆ
     PDU্ͷԻΛग़͢
    ʮʯΛࢦఆ
     ୯Ґ͸ʮηϯτʯ
     ηϯτˠ
    ൒Իҧ͍
    υˠυ
77. 8FC
    "VEJPͰԻ֊  ͔ΜͨΜʂ
     LFZ͝ͱͷԻ֊Λه࿥͓͍ͯͯ͠ 
 EFUVOFʹઃఆ͢Δ͚ͩʂ
78. ,FZೖྗ,FZCPBSE׬੒  ΩʔϘʔυ 1$ ͰΩʔϘʔυ ָث Λ࣮૷ʂ
     ͜ͷ伴൫΋WJDUPS੡
79. ϑϧ3VCZͰ
    ͍Ζ͍ΖͰ͖Δʂ
80. ͓ΘΓʹ
81. ͓ΘΓʹ  ґଘؔ܎Λల։ͯ͠HFNͷίʔυΛ·ͱΊͯΈͨ
     ϒϥ΢βͰHFN͕͏͘͝ʂʂ
     ͔͠͠ɺ׬ᘳʹ·ͱΊΔͨΊʹ͸՝୊͕ଟ͍
     ಈతʹGFUDIͰ͖ͨํ͕خ͍͜͠ͱ͕ଟͦ͏
82. ະରԠͷ՝୊  BVUPMPBE DPOTU@OBNF
    GFBUVSF
     ఆ਺
    DPOTU@OBNF
    Λ࠷ॳʹࢀরͨ࣌͠ʹ 
 GFBUVSF
    Λ
    ,FSOFMSFRVJSF
     ͪ͜Β΋௥੻͢Δඞཁ͕͋Γͦ͏
83. ະରԠͷ՝୊  ͜͏͍͏΍΍͍͜͠SFRVJSF ['Alice', 'Bob', 'Eve'].each do |klass_name| k_down = klass_name.downcase.intern require "modules/#{k_down}" end
84. ϒϥ΢βͰ3VCZΛ࢖͏ͱ
    ͨͷ͍͠ʂ
85. એ఻ʂ  ࠓޙͷొஃ༧ఆ
     দߐ3VCZձٞ
    
    ʢ౔ʣ
     SVCZXBTNͰ࡞ͬͨ΋ͷͨ͘͞Μ
     ,BJHJ
    PO
    3BJMT
    
    
    ۚ
    
    
    ౔
     5VSCPͰਝ଎ʹαʔϏεΛ্ཱͪ͛Δ࿩
87. ΤϯδχΞ৬ͷํɹੵۃ࠾༻தʂ ҰॹʹϝυϐΞͷࣄۀΛ৳͹͍͖͍ͯͨ͠ΤϯδχΞͷํɺ͓଴͓ͪͯ͠Γ·͢ʂ ςοΫϒϩά IUUQTISNPTDPQBHFTNFEQFFSKPCT ϦʔυΤϯδχΞʢαʔόʔαΠυʣ ΤϯδχΞ঺հ IUUQTFOHJOFFSNFEQFFSDPKQ IUUQTUFDINFEQFFSDPKQ ٻਓ ϒϩά