ブラウザで「今すぐ」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ϧχ
   

   View Slide

2. ࣗݾ঺հ
   w5XJUUFS 9
   *%!MOJ@5
   wډॅ஍౦ژ
   wग़਎஍࿨Վࢁ
   wࠓ೔͸ͻ͞ͼ͞ʹؔ੢ʹؼ͖͍ͬͯͯ·͢
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. ͓͠͝ͱ
   .FE1FFSαʔόʔαΠυϦʔυΤϯδχΞ
   ۀ຿಺༰
   SBJMTOFX͔ΒσϓϩΠอक·ͰରԠ
   ୂ௕͕ෆ଍͍ͯ͠Δࣄۀʹೖͬͯ
   

   ͳΜ͔ྑ͍ײ͡ʹՐফ͠Λͯ͠ϦϦʔε
   ศར԰͞Μঢ়ଶʂ
   

   View Slide

8. ͭͬͨ͘΋ͷ
   ϒϥ΢βͰ3VCZΛ࢖͏ͱʜͨͷ͍͠ʂʂʂ
   SVCZXBTN੡ήʔϜΛެ։ͨ͠Γ͍ͯ͠·͢
   

   View Slide

9. SVCZXBTN͓͞Β͍
   

   View Slide

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

    View Slide

11. 3VCZ,BJHJ͓͞Β͍
    IUUQTTQFBLFSEFDLDPNMFETVOMPBEHFNGSPNCSPXTS
    

    View Slide

12. 8BTNͰHFN͸࢖͑Δ͔
    $47΍:".-ͳͲͷHFN͸࢖͑Δ
    ಉࠝ͞ΕͨGVMMCVJME൛͕ެ։͞Ε͍ͯΔ
    SEQBSUZHFN͸࢖͑ͳ͍
    ˞ࣗྗͰϏϧυ͢Ε͹࢖͑Δ΋ͷ΋༗
    Ͱ΋HFN࢖͍͍ͨΑͶʂʂʂ
    

    View Slide

13. +BWB4DSJQUͷྺ࢙ʹֶͿ
    +BWB4DSJQU΋ಉ͡໰୊Λ๊͍͑ͯͨ
    OQNͷύοέʔδΛ
    

    OPEFKTϒϥ΢βͲͪΒͰ΋࢖͍͍ͨ
    

    View Slide

14. +BWB4DSJQUͷྺ࢙ʹֶͿ
    /PEFKT
    
    +BWB4DSJQUʹNPEVMF͕࣋ͪࠐ·Εͨ
    #SPXTFSJGZ
    
    શͯͷґଘ+4ΛϑΝΠϧʹ·ͱΊΔ
    *NQPSUNBQT
    
    ໊લͱύε 63-
    Λඥ͚ͮͯϩʔυͰ͖ΔΑ͏ʹ
    

    View Slide

15. Ξϓϩʔνํ๏
    " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
    

    View Slide

16. Ξϓϩʔνํ๏
    " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
    w #Λ࠾༻ͯ͠SFRVJSF@SFMBUJWF SFRVJSFͳͲͷ
    

    ࣮૷ΛਐΊ͍ͯ͘ʜ
    w ͱ͍͏ͷ͕3VCZ,BJHJͷ͓࿩Ͱͨ͠ɻ
    

    View Slide

17. ͦͷޙͷ࿩
    3VCZ,BJHJGPMMPXVQ
    SFRVJSF@SFMBUJWF͕ಈ͘Α͏ʹͳͬͨͱͷ͜ͱ
    IUUQTTQFBLFSEFDLDPNMFETVOSVCZEPUXBTNOJHVBOTVSVKJOCVCBPHBP
    

    View Slide

18. ͦͷޙͷ࿩
    ࠓޙଓใ͕དྷΔʜ͔΋ʜʁ
    

    View Slide

19. ͓͞Β͍ɹ͓ΘΓ
    

    View Slide

20. ࠓ೔ͷ͓୊
    

    View Slide

21. ϒϥ΢βͰʮࠓ͙͢ʯ
    HFNΛಡΈࠐΉํ๏
    

    View Slide

22. Ξϓϩʔνํ๏
    " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
    

    View Slide

23. Ξϓϩʔνํ๏
    " #VOEMJOHͯ͠εΫϦϓτΛϑΝΠϧʹ·ͱΊΔ
    # ࣮ߦ࣌ʹύεͷඥ෇͚Λ༻͍ͯ୳͠ʹߦ͘
    w ʮࠓ͙͢ʯಡΈࠐΉͳΒʲϓϥϯ"ʳͳͷͰ͸ʁ
    

    View Slide

24. 3VCZίʔυΛ
    #VOEMJOH͍ͨ͠
    

    View Slide

25. SCϑΝΠϧΛ·ͱΊ͍ͨ
    NBJOSC
    MJCSC
    MJCSC
    CVOEMFESC
    

    View Slide

26. ૄ݁߹ͳ؀ڥʹͳΔͷͰ͸
    CVOEMFESC
    SVCZXBTN ϒϥ΢β
    ެࣜఏڙ
    

    Ϗϧυ൛
    ඞཁͳ
    HFN
    

    View Slide

27. Ұॹʹ΍ͬͯΈΑ͏ʂ
    

    View Slide

28. ґଘؔ܎͕෼͔Ε͹ʜ
    NBJOSC
    ʘSFRVJSFʗ
    MJCSC
    

    View Slide

29. ,FSOFMDBMMFS@MPDBUJPOT
    όοΫτϨʔεΛऔಘͰ͖Δϝιου
    

    View Slide

30. ,FSOFMDBMMFS@MPDBUJPOT
    SFRVJSF࣌ʹDBMMFS@MPDBUJPOTΛऔಘ͢Ε͹
    

    ґଘؔ܎͕Θ͔ΔͷͰ͸ʁ
    

    View Slide

31. ,FSOFMDBMMFS@MPDBUJPOT
    SFRVJSF࣌ʹDBMMFS@MPDBUJPOTΛऔಘ͢Ε͹
    

    ґଘؔ܎͕Θ͔ΔͷͰ͸ʁ
    SFRVJSFΛվ଄ͯ͠ॲཧΛ௥Ճ͠Α͏ʂʂ
    BMJBT@NFUIPE
    QSFQFOE
    

    View Slide

32. BMJBT@NFUIPE
    SFRVJSFϝιουʹผ໊Λ͚͓ͭͯ͘
    ৽SFRVJSF͔ΒچSFRVJSFΛݺͿ͜ͱͰSFRVJSFΛ֦ு
    

    View Slide

33. QSFQFOE
    SFRVJSFΛ্ॻ͖ͭͭ͠TVQFSͰݩͷڍಈΛݺͼग़͠
    

    View Slide

34. SFRVJSFͷґଘ͕ḷΕΔ
    SFRVJSFKTPOͷྫ
    

    View Slide

35. /&95SFRVJSF@SFMBUJWF
    

    View Slide

36. SFRVJSF@SFMBUJWFͷ໰୊఺
    MJC
    CBTFSC
    NPEVMFTSC
    SFRVJSF@SFMBUJWF
    ݱࡏͷϑΝΠϧ͔Βͷ૬ରύεͰSFRVJSF͢Δ
    SFRVJSF@SFMBUJWFNPEVMFTSC
    

    View Slide

37. SFRVJSF@SFMBUJWFͷ໰୊఺
    MJC
    CBTFSC
    NPEVMFTSC
    QBUDISC
    QBUDISCͰSFRVJSF@SFMBUJWFΛॻ͖׵͑Δͱʁ
    SFRVJSF@SFMBUJWFNPEVMFTSC
    

    View Slide

38. SFRVJSF@SFMBUJWFͷ໰୊఺
    MJC
    CBTFSC
    NPEVMFTSC
    QBUDISC
    
    SFRVJSF@SFMBUJWFNPEVMFTSC
    

    View Slide

39. SFRVJSF@SFMBUJWFͷ໰୊఺
    MJC
    CBTFSC
    NPEVMFTSC
    QBUDISC
    
    SFRVJSF@SFMBUJWFNPEVMFTSC
    DBOOPUMPBETVDI
    fi
    MF
    

    View Slide

40. SFRVJSF@SFMBUJWFͷ໰୊఺
    SFRVJSF@SFMBUJWF
    ݱࡏͷϑΝΠϧ͔Βͷ૬ରύεͰSFRVJSF͢Δ
    ୯७ͳΦʔόʔϥΠυͩͱڍಈ͕มΘͬͯ͠·͏ʂ
    ͜·ͬͨ🤔
    

    View Slide

41. ઌਓʹֶͿ
    SVCZMJCTZOUBY@TVHHFTUDPSF@FYUSC
    SFRVJSFछʹBMJBT@NFUIPE͍ͯ͠Δ
    

    View Slide

42. ઌਓʹֶͿ
    SFRVJSF@SFMBUJWF͸ʜʁ
    ݺͼग़͠ݩͷઈରύεର৅ύεΛ૊Έཱͯ
    

    View Slide

43. SFRVJSF@SFMBUJWF΋ḷΕΔʂ
    

    View Slide

44. ͜ΕͰ3VCZϑΝΠϧͷ
    ґଘؔ܎͕ྻڍͰ͖Δʂ
    

    View Slide

45. ࣮ࡏͷHFNͰࢼ͢
    

    View Slide

46. ࣮ࡏͷHFN
    ͓୊͸WJDUPSHFN
    

    View Slide

47. SFRVJSFΛḷΔ
    

    View Slide

48. SFRVJSFΛḷΔ
    

    View Slide

49. ඪ४ϥΠϒϥϦ͸ল͘
    GPSXBSEBCMF͸ඪ४ఴ෇ͳͷͰCVOEMFෆཁ
    

    View Slide

50. ґଘݩͱґଘઌͷ
    ه࿥͕׬ྃ
    

    View Slide

51. ιʔείʔυΛల։
    ϑΝΠϧʹCVOEMF׬ྃʂ
    

    View Slide

52. ϒϥ΢β͔Βϩʔυ
    )5.-ʹߦॻ͚ͩ͘ʂ
    
    

    View Slide

53. 🎉ಈ͍ͨʂ🎉
    

    View Slide

54. 3VCZͷ#VOEMF׬ʁ
    

    View Slide

55. ͱ͍͏༁ʹ΋͍͔ͳ͍
    

    View Slide

56. ఢ͸SFRVJSF͚ͩʹඇͣ
    

    View Slide

57. 'JMFSFBEಈ͔ͳ͍
    ಺෦Ͱ3VCZεΫϦϓτҎ֎Λࢀর͍ͯ͠Δ
    ύε͕ಈతʹมΘΔͷͰల։΋Ͱ͖ͳ͍
    

    View Slide

58. ղܾ๏
    +4Ͱ'FUDIͯ͠ɺXBTNͷϑΝΠϧγεςϜ಺ʹ
    

    อ͓࣋ͯ͘͠ͱಈ͘ʂ
    

    View Slide

59. 🎉ࠓ౓ͦ͜ಈ͍ͨʂ🎉
    

    View Slide

60. %FNP
    

    View Slide

61. SVCZXBTNTZOUIFTJ[FS
    

    View Slide

62. %
    FN
    P
    %FNP
    IUUQTMOJUHJUIVCJPSVCZXBTNTZOUIFTJ[FSXBWF
    

    View Slide

63. SVCZXBTNTZOUIFTJ[FS
    ಺෦ղઆ
    

    View Slide

64. 3VCZͰԻΛ໐Β͢
    

    View Slide

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

    View Slide

66. 8FC"VEJP"1*
    +BWB4DSJQUͰ࢖͏৔߹ɺ
    

    "VEJP$POUFYUͷΠϯελϯε͕ඞཁʹͳΔ
    ͔͠͠ɺ3VCZ্Ͱ͸OFX͕Ͱ͖ͳ͍ʂ
    const ctx = new AudioContext();
    

    View Slide

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

    View Slide

68. 3VCZͰAOFXA͢Δ
    ͜ͷ໰୊͸SVCZXBTNWͰղফ͞Εͯ
    

    FWBMͳ͠Ͱ΋OFXͰ͖ΔΑ͏ʹͳΓ·ͨ͠ʂ
    @ctx = JS.global[:AudioContext].new
    

    View Slide

69. 3VCZͰ೾ܗΛੜ੒͢Δ
    

    View Slide

70. ϧʔϓΛճͯ͠
    पظͷ൒෼͸΋͏൒෼͸
    ͱͳΔ഑ྻΛੜ੒
    

    View Slide

71. 3VCZͰ೾ܗΛੜ੒͢Δ
    "VEJP$POUFYU͔ΒԻ੠όοϑΝΛੜ੒ͯ͠ʜ
    ೾ܗσʔλΛॻ͖ࠐΊ͹׬ྃ
    

    View Slide

72. ೾ͷߴ͞Λඳը
    ઌఔల։ͨ͠7JDUPSͷίʔυͰ೾ܗΛՄࢹԽ
    

    View Slide

73. ԻݯΛ࠶ੜ
    "VEJP$POUFYU͔ΒԻݯΛ࡞੒
    ग़ྗʹͭͳ͛Δ
    ࠶ੜ͢Ε͹Ի͕໐Δʂ
    

    View Slide

74. LFZEPXOΛर͏
    LFZEPXOΠϕϯτΛरͬͯ
    ΩʔʹԠͨ͡ԻΛ໐Β͢ʂ
    

    View Slide

75. Ի֊Λͭ͘Δ
    

    View Slide

76. 8FC"VEJPͰԻ֊
    EFUVOFϓϩύςΟΛࢦఆ͢Ε͹Մೳ
    ൒Ի্ͷԻΛग़͢ʮʯΛࢦఆ
    PDU্ͷԻΛग़͢ʮʯΛࢦఆ
    ୯Ґ͸ʮηϯτʯ
    ηϯτˠ൒Իҧ͍ υˠυ
    
    

    View Slide

77. 8FC"VEJPͰԻ֊
    ͔ΜͨΜʂ
    LFZ͝ͱͷԻ֊Λه࿥͓͍ͯͯ͠
    

    EFUVOFʹઃఆ͢Δ͚ͩʂ
    

    View Slide

78. ,FZೖྗ,FZCPBSE׬੒
    ΩʔϘʔυ 1$
    ͰΩʔϘʔυ ָث
    Λ࣮૷ʂ
    ͜ͷ伴൫΋WJDUPS੡
    

    View Slide

79. ϑϧ3VCZͰ
    ͍Ζ͍ΖͰ͖Δʂ
    

    View Slide

80. ͓ΘΓʹ
    

    View Slide

81. ͓ΘΓʹ
    ґଘؔ܎Λల։ͯ͠HFNͷίʔυΛ·ͱΊͯΈͨ
    ϒϥ΢βͰHFN͕͏͘͝ʂʂ
    ͔͠͠ɺ׬ᘳʹ·ͱΊΔͨΊʹ͸՝୊͕ଟ͍
    ಈతʹGFUDIͰ͖ͨํ͕خ͍͜͠ͱ͕ଟͦ͏
    

    View Slide

82. ະରԠͷ՝୊
    BVUPMPBE DPOTU@OBNF GFBUVSF
    
    ఆ਺DPOTU@OBNFΛ࠷ॳʹࢀরͨ࣌͠ʹ
    

    GFBUVSFΛ,FSOFMSFRVJSF
    ͪ͜Β΋௥੻͢Δඞཁ͕͋Γͦ͏
    

    View Slide

83. ະରԠͷ՝୊
    ͜͏͍͏΍΍͍͜͠SFRVJSF
    ['Alice', 'Bob', 'Eve'].each do |klass_name|
    k_down = klass_name.downcase.intern
    require "modules/#{k_down}"
    end
    

    View Slide

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

    View Slide

85. એ఻ʂ
    ࠓޙͷొஃ༧ఆ
    দߐ3VCZձٞʢ౔ʣ
    SVCZXBTNͰ࡞ͬͨ΋ͷͨ͘͞Μ
    ,BJHJPO3BJMT ۚ
    ౔
    
    5VSCPͰਝ଎ʹαʔϏεΛ্ཱͪ͛Δ࿩
    

    View Slide

86. View Slide

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

    View Slide