tryruby の中身
Posted by yoosee on Web at 2005-12-19 23:42 JST
1
Try Ruby の裏側
Ruby のチュートリアルを Webページ上でキーボード・インタラクティブに行うことができる Try Ruby と言うページがあるのだが、IRC で「チュートリアルでの問題間の遷移などをどう制御しているのかな」と言う話が出たので調べてみた。問題も解答も全ページが index.html の中に書かれていて、それを JavaScript で寸断するパターンのようだ。ざっと見てみると、
<dev class="stretcher">...</dev>と言う要素内がページのワンセットで、ページの読み込み時に document.getElementsByClassName("stretcher"); のようにして配列として保持している。その中に包含された要素として <dev class="answer">...</dev> または <dev class="stdout">...</dev> があり、これがページ遷移を判断するキーワード (Tutorial 各ページの解答) として機能している。/js/mouseIrb.js が irb を実行するサーバと asynchronous に通信 (所謂 Ajax) をしており、その戻り値に対して if ( str.match( new RegExp('^\s*=> ' + match + '\s*$','m') ) )と言う感じで answer ないし stdout と正規表現マッチを見て、マッチすれば次のページに進むと言った仕組みになっている。この方式のメリットは html を書き換えるだけで好きなだけチュートリアルページを作れること。日本語にするのも文章だけならなにも考えずに html を書き換えるだけだな。非常に良くできてる。