Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Ruby on Browser

Ruby on Browser

ruby.wasm で作ったページの紹介と ruby.wasm の使い方

スライド内のリンク
- 文字化けを復元するよ https://tmtms.net/mojibake/
- シャッフル https://tmtms.net/shuffle.html?list=Ruby,Perl,Python,PHP,Go
- MySQL Parameters https://mysql-params.tmtms.net/statement/?vers=8.0.11,8.4.0&diff=true
- Rabbit on Firefox https://tmtms.net/rabbit/

とみたまさひろ

June 22, 2024
Tweet

More Decks by とみたまさひろ

Other Decks in Technology

Transcript

  1. Rabbit on Firefox Firefox で PDF / Reveal.js / Speaker

    Deck のスライドを表示していると きにブックマークレットを実行するとウサギが表示される Reveal.js用↑ ブックマークレットはJavaScriptで書かないといけない。残念。 https://tmtms.net/rabbit/ javascript:(()=>{if(typeof rubyVM!='undefined'){rubyVM.eval('start');return}; var d=document;var h=d.getElementsByTagName('head')[0];var s=d.createElement('script'); s.src='https://cdn.jsdelivr.net/npm/@ruby/[email protected]/dist/browser.script.iife.js'; h.appendChild(s);s=d.createElement('script');s.src='https://tmtms.net/rabbit/rabbit_revealjs.rb'; s.type='text/ruby';h.appendChild(s);var x=setInterval(()=>{if(typeof rubyVM!='undefined') {try{rubyVM.eval('start');clearInterval(x)}catch(e){}}},500)})() 14
  2. <script>にRubyを書く 簡単! <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/@ruby/[email protected]/dist/browser.script.iife.js"> </script> <script type="text/ruby">

    # ここがRubyスクリプト p Time.now #=> 出力はブラウザのコンソール puts "Hello, world!" </script> </html> 16
  3. JavaScript の値を Ruby から見るとすべて JS::Object Ruby では扱いにくいので to_i や to_s

    等で変換できる n = JS.eval('return 123') #=> JS::Object (123) n.typeof #=> "number" s = JS.eval('return "hoge"') #=> JS::Object ("hoge") s.typeof #=> "string" JS.eval('return 123').to_i #=> 123 JS.eval('return "hoge"').to_s #=> "hoge" 19
  4. JS::Object#[] でプロパティ取得&設定 JS::Object#call で JavaScript の関数呼び出し JS::Object#func でも呼び出せる s =

    JS.eval('return "hoge"') #=> JS::Object ("hoge") s[:length] #=> JS::Object (4) s.call(:charAt, 2) #=> JS::Object ("g") s.charAT(2) #=> JS::Object ("g") 20
  5. JavaScript の null や undefined も JS::Object のインスタンス Ruby で真偽値として評価すると当然真になるので注意

    JS.eval('return null') #=> JS::Object (JS::Null) JS.eval('return undefined') #=> JS::Object (JS::Undefined) !!JS::Null #=> true !!JS::Undefined #=> true 21
  6. Promise / await JavaScript の Proimse は await で待てる data-eval="async"

    の指定が必要 <script type="text/ruby" data-eval="async"> promise = JS.global.fetch("https://tmtms.net") #=> JS::Object (Promise) resp = promise.await #=> JS::Object (Response) promise = resp.text #=> JS::Object (Promise) promise.await #=> JS::Object ("<!DOCTYPE html>\n<html>\n ....") </script> 22
  7. DOM ほぼ JavaScript のまんま document = JS.global[:document] hoge = document.getElementById('hoge')

    fuga = document.createElement('div') fuga[:id] = 'fuga' hoge.appendChild(fuga) 23
  8. HTML 要素にイベントを設定するには addEventListener() を使う HTML の onclick 等は JavaScript を呼んでしまうので(それはそう)

    <input id="b" type="button"> <script type="text/ruby"> require 'js' document = JS.global[:document] document.getElementById('b').addEventListener('click') do |ev| JS.global.alert('hoge') end </script> 24
  9. require_relative が動く! 呼び出し元の rb ファイルの URL からの相対パスで サーバーから rb ファイルを読み込む

    サーバー上に rb ファイルを置いておくだけでいい めっちゃ便利! module Kernel def require_relative(path) JS::RequireRemote.instance.load(path) end end 29