🦊

Rabbit on Firefox

2023/03/01に公開

Rabbit というプレゼンツールがある。画面の下の方でウサギとカメが追いかけっこをしてるプレゼンツールで、Ruby で作られててまつもとさんがよく使ってる。

https://www.youtube.com/watch?v=m_LW5WIYJ9Q

PDF 表示時にもこれと同じようなウサギとカメを表示できないかなーと思っていろいろいじってたらできたのでメモ。

Firefox のブックマークレットを使って ruby.wasm で rb ファイルを読み込む形で実装してみた。最近自分の中で ruby.wasm が流行りなので、JavaScript でできることをわざわざ Ruby でやってる。

ブックマークレットはこんな感じ:

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-3_2-wasm-wasi@1.0.1/dist/browser.script.iife.js';h.appendChild(s);s=d.createElement('script');s.src='https://tmtms.net/rabbit/rabbit_firefox_pdf.rb';s.type='text/ruby';h.appendChild(s);var x=setInterval(()=>{if(typeof rubyVM != 'undefined'){try{rubyVM.eval('start');clearInterval(x)}catch(e){}}},500)})()

このブックマークレットの中で https://tmtms.net/rabbit/rabbit_firefox_pdf.rb を読み込んで実行してる。

Firefox で PDF を表示してる状態でブックマークレットを実行するとウサギが表示される。

ウサギは現在表示されてるページの位置を表してる。

PDF の URL に ?allotted_time=n をつけるとカメが現れる。

最初は止まってるけど、2ページ目以降を表示するとカメが動き出す。allotted_time は時間(分)を表していて、カメはその時間を掛けて画面の左端から右端に進む。

ウサギがカメよりも遅れてたら時間内に発表を終えられない可能性がある。

もう一度ブックマークレットを実行するとカメの位置がリセットされる。

Linux で作ってたんだけど Mac の Firefox でも動くことは確認した。Windows はわからない。

信頼できない第三者の外部ファイルを読み込むブックマークレットというのはセキュリティ的に危ない気がするので、もし試してみたいという奇特な人は、ファイルをローカルにコピーして中身をよく読んでから実行する方がいいと思う。

ついでに Google Slides 用のブックマークレットも作ってみた。使い方は PDF と同じ。スライドショーを実行しないとウサギは現れない。これはちょっと動きが怪しい気もする。

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-3_2-wasm-wasi@1.0.1/dist/browser.script.iife.js';h.appendChild(s);s=d.createElement('script');s.src='https://tmtms.net/rabbit/rabbit_google_slides.rb';s.type='text/ruby';h.appendChild(s);var x=setInterval(()=>{if(typeof rubyVM != 'undefined'){try{rubyVM.eval('start');clearInterval(x)}catch(e){}}},500)})()

Discussion