こんにちは、まなゲー池田です。
タイピング練習ができるサービスは色々あるみたいですが、どうせならついでに漢字の勉強や復習もしちゃったり、できることなら語彙も増やしたりしたいなぁ、何よりレベルデザインを自分でやりたい！と以前から思っていて、問題や設定を自分で決めたいので、この際だから作ってウチの「まなゲーらんど」で公開しちゃおう。ということで、ハイ作ります！！
ひとまずゲーム云々はおいといて
タイトルも詳細も全く未定ですが、ひとまずゲーム以前にタイピング練習サービスとして必須の機能を作っていきたいと思います。
- (1)キーボードからの入力を受けて画面に英数字や記号を表示したり変数に格納したり
- (2)ローマ字正答データと入力されたデータを随時照合して、正誤評価を行う
というイメージで作っていきます。
ローマ字データの手動作成は絶対無理だと気がついた
(1)はサクッと出来ました。
window.addEventlistener(‘keydown’,catchInput);
こんな感じで、キー入力（キーコード）を受け取れるので、受け取ったキーコードに応じた文字・記号をそれ用の変数に入れてやるだけです。
(2)も、とりあえず仮の正答データを作って、キー入力を受け取るたびに、そこまでに入力された回答と正答データ（仮）の同じ文字数の部分までが一致するかどうかを判定して、一致していればそこまでの入力結果を画面に出してやる。という感じで行けたんですが、ここでハタと気がつきました。
これ・・・正答データ作るの超めんどくさいんじゃないか？
かな文字をローマ字に変換する際、例えば「し」はsiでもいいし、shiでもいけます。となると、ローマ字解答データを２つ作っておいて、両方を入力結果と照合しながら、どちらかと一致していればそこまでは正解、という具合に処理していかなければなりません。２種類ずつ、ぐらいならなんとか根性で乗り切ることも可能なのかもしれませんが、例えば「しんぶんし」とかだと、「ん」をnnで入力するパターンとnで済ませるパターンも合わせると…
“sinnbunnsi”, “shinnbunnsi”, “sinbunnsi”, “shinbunnsi”, “sinnbunsi”, “shinnbunsi”, “sinbunsi”, “shinbunsi”, “sinnbunnshi”, “shinnbunnshi”, “sinbunnshi”, “shinbunnshi”, “sinnbunshi”, “shinnbunshi”, “sinbunshi”, “shinbunshi”
たかがひらがな５文字の変換パターンが16種類もあるではありませんか・・・。これは絶対心が折れる、いや、根性以前の問題として、手動では絶対きちんと網羅できそうにない。少なくとも数百問、もしかしたら1000問単位で問題を作るかもしれないというのに・・・っ！
ということで、追加クエスト「(3)ひらがな正答データをもとにローマ字正答データを自動作成できるアルゴリズムを組む」が発生しました。
絶対作っとかないといけないデータを我慢して作る
自動作成アルゴリズムを作ると言っても、「ローマ字早見表」レベルの情報は人が作って与えてやらねばなりません。
こんな感じの微妙な配列データを作成します。
//かな >> ローマ字変換用データ
var listRoman = [
[“あ”,[“a”]],[“い”,[“i”]],[“う”,[“u”]],[“え”,[“e”]],[“お”,[“o”]],
[“か”,[“ka”]],[“き”,[“ki”]],[“く”,[“ku”]],[“け”,[“ke”]],[“こ”,[“ko”]],
[“さ”,[“sa”]],[“し”,[“si”,”shi”]],[“す”,[“su”]],[“せ”,[“se”]],[“そ”,[“so”]],
[“た”,[“ta”]],[“ち”,[“ti”,”chi”]],[“つ”,[“tu”,”tsu”]],[“て”,[“te”]],[“と”,[“to”]],
[“な”,[“na”]],[“に”,[“ni”]],[“ぬ”,[“nu”]],[“ね”,[“ne”]],[“の”,[“no”]],
[“は”,[“ha”]],[“ひ”,[“hi”]],[“ふ”,[“hu”,”fu”]],[“へ”,[“he”]],[“ほ”,[“ho”]],
[“ま”,[“ma”]],[“み”,[“mi”]],[“む”,[“mu”]],[“め”,[“me”]],[“も”,[“mo”]],
[“や”,[“ya”]],[“ゆ”,[“yu”]],[“よ”,[“yo”]],
……
];
単純作業が死ぬほど苦手なので、これだけでもう心が折れそうなんですが、歯を食いしばってカチカチ入力しました。
ひらがな → ローマ字変換アルゴリズムを考える
ひらがなで与えられた任意の文字列データを、ローマ字データへと変換するには、
si、shiなどのAltな変換に加え、「拗音」「促音」「発音」を含む文字列への対策を施さなければいけません。
「拗音」対策
「ゃ、ゅ、ょ」を含むやつです。「きゃ」とか「ちょ」とか、セットで扱われようとしてくる困ったやつら。「１文字ずつ変換だというとろーが！」と叫びたくなりますが、ぐっとこらえて、「先に次の文字を確認して、そこに拗音が見つかったら２文字セットで変換候補を探す」というルールを作ります。
「促音」対策
「っ」を見つけたら、「っ」があったぞ！という情報だけをキープしておいて次の文字へ進みます。で、次の文字を変換・追加するときに、最初の子音を２重にすることで対策としました。
「撥音」対策
「ん」ですね。nnかn。「n」だけで大丈夫なケースも多いですが、次の文字が「あいうえお」「なにぬねの」のいずれかの場合は「nn」としておかないと、「こんいちは」みたいなことになります。（今、入力してみて気づいたんですが「こんいちは」と打とうとしても勝手に「こんにちは」になおしてくれました。タイプミスが減ったのだと思っていたら、こっそりPC側でフォローしてくれてたのか。）
これらの、拗音・促音・撥音対策を施しつつ、複数の変換候補を持つ「かな」が出てくるたびに、場合分けして、正解となりうるローマ字変換パターンを網羅していきます。
しばらくウンウン唸って、かな文字列を与えられたら、ローマ字変換パターンを網羅して返す関数(８０行ほど）をひねり出しました。
こうして数時間の格闘の結果、ひとまず動くようになったのがこちら。
かな文字が問題。グレーがローマ字正答例。黄色が入力済みの部分です。
正答例がひとつしか表示されませんが、zikannをjikannなどとしてもちゃんと正解になるはず。
サンプル問題20問ほどしか入っていませんので、ちょいちょい同じのが連続で出ちゃいますが、ひとまず動きます。（ゲーム性どころか、得点も評価も、終わりすらありません;;）
あちこち調整が必要になるかもしれませんが、必須な部分はだいたい出来ましたので、次から評価など行えるようにしつつ、遊びっぽさを加えていきたいと思います。
この程度でも、書いたプログラムが狙い通りに動くと、じわっと脳から何かが出る感じがしますね。
シミュレーション系のゲームの攻略や、クラフト系ゲームで狙い通りに行った時に通じる気持ちの良さがあります。
しかも、書いたコードをあらためて見てみると、配列やら文字列操作の基本がええ具合に網羅されてて、教材にするのもいいなぁと思うったりして、一石二鳥の制作となりました。
つづく