オンラインのビンゴゲーム
私は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がキーポイントです。
僕はこれをこの本で知りました。この記事にも書いてあります。
// 音声認識のためのインターフェイスである 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」の場合はビンゴ済みかチェックして、王冠と順位をつけます。
//"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/ ）が使われそう。
マイク無しでイベント参加する人もいるので、音声以外でもビンゴできるよう改良したいな・・・！
おわり！