音声認識をして特定の言葉をカウントしたい

おもてなしを見える化するIoTがつくりたい！！

普段は居酒屋で働いており、プログラミングとは無縁なのですが、
おもてなしが見える化するIoTをつくりたい！！と思い、一念発起！
お休みの日にプログラミングを学びながら、日々挑戦をしています！

やりたい企画を具体的に描く

最終的にはクラウドファンディングを行い、
共感してくださる仲間とともに、おもてなしを向上させていきたいと思っています。
今まではぼんやりと「おもてなしが見える化するIoT」というぼんやりしたものだったのですが、
「お見送り」に焦点を絞り、
・スタッフの「ありがとうございました」を計測する。
・お客様の「ありがとう」を計測する。
・その数をスプレッドシートにデータとして見える化する。
というステップで実装していきたい企画を具体的に描き、
キャンプファイヤーに仮投稿してみたというのが最近の進捗です。

必要そうな機能

具体的に描け始めたので、必要そうな機能を洗い出してみました。

・音声認識をする
・音声認識をしたものを何か書き出す
・書き出したものの中から特定の言葉を引き出す
・引き出したものをカウントする
・カウントしたものをGoogleSpreadSheetに転記する

とはいえ、書き出してみると、まだまだ何だかぼんやりですね。。。（汗）

実装してデモに挑戦

学んだJavascriptで実装したいと思っているので、
これらの機能が何かデモできないか調べて挑戦してみました。

音声認識～Web Speech API

Webページでブラウザの音声認識機能を使おう - Web Speech API Speech Recognitionの記事を参考に作成してみました。

index.html

<script>
  SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
  const recognition = new SpeechRecognition();
  recognition.onresult = (event) => {
    alert(event.results[0][0].transcript);
  }
  recognition.start();
</script>

そして、実際にデモで動かしてみたのがこちら！！

たった8行のコードで、こんなことができるってす、すごい・・・！！

・音声認識をしたものを何か書き出す

と、ここでつまづきました。

文字は出てきたけど、OK押したら消える・・・。
どこに認識したデータは行くんだ・・・。
自分の中では結構調べたけど、分からなかったので、パス。

引き出したものをカウントする～Array.length

JavaScriptリファレンスに掲載されている構文や関数などを調べていると、
Array.lengthなるものに出会いました。
使い方を詳しく検束して見ると要素数をカウントすると書いてあったので、なんだか使えそうだと思っています。

まとめ

結論、企画は具体的にイメージでき始めたものの、
じゃあ実装してみよう！となると、
どこの何から手を付けたらいいのか？
引き出しの中の知識量が少なく、組み合わせられない・・・。
という壁にぶつかってしまいました。

企画と実装を両輪で進めていく必要があると感じたので、
どちらもスピード感をもって進めていければと思っています。

あたたかい目で見守りながら、応援してもらえればと思います。
（続く）