Wordleという、いくつかのヒントをもとに5文字の英単語を当てるゲームがあります。
ヒントには次のような物があります。
- 正解の単語に含まれない文字
- 正解の単語に含まれる文字
- 正解の単語に含まれて、位置が一致した文字
これらの情報を元に英単語の辞書から候補となる単語を検索するアプリケーションを作りました。
次にスクリーンショットを表示します。
上から
- 正解の単語に含まれない文字
- 正解の単語に含まれる文字
- 正解の単語に含まれて、位置が一致した文字
を入力して検索すると、候補になる文字列を表示します。
このアプリケーションは辞書を検索するだけです。
辞書も5文字の英単語に限定されているので、せいぜい4500語です。
ブラウザに配信するスクリプトに埋め込める分量です。
つまり辞書と検索機能の両方をブラウザだけで完了出来る小さなアプリケーションです。
現在RubyのWebAssemblyバイナリが開発されています。
RubyKaigi 2022の一日目のKeyNoteで発表されていました。
このテクノロジーをつかうとブラウザだけで完了出来る小さなアプリケーションをRubyで書くことが出来ます。
とういうわけで、先ほどのアプリケーションはRubyスクリプトで実装しています。
Google Chroemの開発ツールで見てみます。
wordle_search.rbとmain.rbというRubyスクリプトをダウンロードしている事が確認出来ます。
HTMLはこんな感じです。
<script src="https://cdn.tailwindcss.com"></script>
<script defer
src="https://cdn.jsdelivr.net/npm/ruby-head-wasm-wasi@0.4.0/dist/browser.script.iife.js"></script>
<script type="text/ruby" src="wordle_search.rb"></script>
<script type="text/ruby" src="main.rb"></script>
ruby.wasmを実行するためのbrowser.script.iife.jsを読み込みます。
それからtype="text/ruby"属性をもつscriptタグで、実行したいRubyスクリプトを読み込みます。
RubyKaigiで発表された時点では、browser.script.iife.jsはsrc属性に対応していませんでした。
次のようにscriptタグにインラインで書いたRubyスクリプトを実行していました。
<script type="text/ruby">
puts "Hello, world!"
</script>
これは開発時にエディタのシンタックスハイライトが効かない点が不便です。
多くのエディタはHTMLに埋め込まれたJavaScriptのシンタックスハイライトをサポートしています。
Rubyスクリプトのシンタックスハイライトには対応していません。
ruby.wasm自体が開発途上のものなので、エディタが先行して対応しているはずはありません。
scriptタグからのRubyスクリプト読込がsrc属性に対応していれば外部ファイルを読み込めます。
ファイルには自由な拡張子が指定できます。
拡張子をrbにすれば、一般的なエディタでRubyスクリプト用のシンタックスハイライトできるようになります。
このためのsrc属性に対応するための、PullRequestを作成しました。
すでにマージされており、上記のように便利に使えています。