オンラインのビンゴゲーム

私はcommew（こみゅー）というフリーランスコミュニティーに参加してます。
そこでフリーランス３人でチームを組んで「みんにゃでビンゴ」というWebアプリを作りました！

このビンゴには、遊び心で音声認識の機能をつけたので、この記事ではその実装を紹介をします。

ゲームの画面はこんな感じ😊

ゲームはこちらから試せます！
https://minnya.funspot.tokyo/
https://github.com/daisuke85a/bingo ~~コードは汚いから読まないで~~
JSとPHPで作っています。フレームワークは使ってません ~~当初の僕はフレームワークを使えなかった・・・~~

commewでは、月に１回「フリーランス集会」が開かれています。オンライン飲み会的なやつです。
その集会で「オンラインでビンゴゲームをしたいよね」と言う話になったのですが、なにげにWebを探してもいい感じのサービスが見つからないので、コミュニティー内でチームを組んで作ることにしました。

ゲームの遊び方

音声認識に関わるところだけ抜粋すると

① ゲーム参加者は自分の番号が５個でたら「BINGOさけぶ」ボタンを押してPCのマイクへ「BINGO!!」と叫びます
② （ビンゴしている場合は）自分のビンゴカードに順位王冠がつきます（やった！）

ってかんじです！

音声認識するコードの説明

ざっと処理を書くとこんな感じです。

①JSで音声をテキストに変換する
②JSからサーバー(PHP)へテキストをPostする
③PHPにてテキストが「Bingo」かどうか確認する
④（Bingoの場合）PHPにてビンゴを叫んだ人が、本当にビンゴしているか確認する
⑤（ビンゴしてた場合）PHPにてビンゴカードに王冠と順位をつける

JSの処理

ビンゴを叫ぶ前に押すボタンです。

ビンゴ叫ぶボタン

<button id="bingoBtn">ビンゴさけぶ</button>

JSで上記のボタンに「マイク音声入力」機能をつけます。

音声をテキストに変換するのは、JSを9行書けばできます。

webkitSpeechRecognitionがキーポイントです。
僕はこれをこの本で知りました。この記事にも書いてあります。

jsで音声をテキストに変換してサーバーへPOST


// 音声認識のためのインターフェイスである webkitSpeechRecognitionをnewする
const speech = new webkitSpeechRecognition();

// 言語を英語に設定。最初は日本語(ja-JP）に設定していたが、「ビンゴ」という単語が認識できなかった(泣)
speech.lang = 'en-US';
const bingoBtn = document.getElementById('bingoBtn');

bingoBtn.addEventListener('click', function(){
    // ビンゴボタンが押されたら、PCマイクからの音声入力待ちにする
    speech.start();
});

// 喋り終わったら（声が途切れたら）resultイベントが発火する
speech.addEventListener('result', function(e){
    // textに音声入力した文字が入る（例：Bingoなど）
    const text = e.results[0][0].transcript;
    // サーバーへPostする
    execPost("game.php",  {'bingo':text});
});

execPost関数はDOM操作で仮想的なformを作りサーバーへsubmitする処理になります。本筋から反れるので省略・・・詳細は参考サイトへ

PHPの処理

POSTされたテキストが「bingo」の場合はビンゴ済みかチェックして、王冠と順位をつけます。

POSTされたテキストを受け取る処理

//"bingo"と音声入力されたかチェックする。英語として解釈するので、発音が悪いと一生ビンゴできない・・・
if ($_POST['bingo'] === "bingo") {
   // 叫んだ人のビンゴカードの５個の数字が、全て出ているかチェック
   if ($bingoApp->checkBingo($_COOKIE['name'])){
      // ビンゴカードに王冠と順位をつける（おめでと！）
      $bingoApp->bingo($_COOKIE['name']);
   }
}

最後に

これを作ったのは2018年10月〜2019年4月（長期戦だ〜！）になります。
会ったことない人と３人チーム、業務外、フルリモート、仕事に追われてやる暇ない・・・など、いろんな不安要素がありました。

PHPを勉強したての私はリーダー、インフラ、PHP周りを担当。他の２人はデザイン、アニメーション、HTML、CSSを担当していただきました。いろんな反省点~~（PHPコードは汚いし、MVCにもできてないし、GET/POSTの使い分けもできてない。など・・・）~~はあるものの、作りきれてよかった！！！という気持ちでいっぱい。

なにより、commewのイベントで活用して頂き、盛り上がったのがうれしいです😊
commewでは「デザインかわいい！」「アニメーションかわいい！」と大好評！！！~~（あれ、音声は・・・？）~~

今年のcommewのオンライン忘年会でも、このビンゴゲーム（ https://minnya.fun/ ）が使われそう。
マイク無しでイベント参加する人もいるので、音声以外でもビンゴできるよう改良したいな・・・！

おわり！

音声認識するオンラインビンゴゲームつくった

オンラインのビンゴゲーム

ゲームの遊び方

音声認識するコードの説明

JSの処理

PHPの処理

最後に