WebSpeechAPIを使ってNGワードゲーム・カタカナ禁止ゲームを作ってみたので、背景や技術やら感想やらここに記録させてください。
今回作ったアプリ
↓
https://web-ng-word-game.vercel.app/
コード
↓
https://github.com/kyonpara/ng-word-game
なんでこのアプリ作った？
皆さん、ラムダ技術部というYoutubeチャンネルをご存知でしょうか。
感情の起伏のない淡々としたトークが個人的に大好きでよく視聴しているのですが、ある日こんな動画を見つけました。
この動画でラムダさんが作ったアプリが紹介されているのですが、アプリに利用されている音声のテキスト化を実現するWeb Speech APIと無料WebホスティングサービスのVercel
が気になったのでこれを使って何か作ってみようと思ったことがきっかけです。
何を作ろうか悩んだのですがラムダさんの動画のコメントにこんなものがありました。
なるほど！？確かに！？
カタカナ禁止ゲームもアリじゃない？どう？
ということで安直に開発に着手。
私はごく一般の会社員なので業務後の空いた時間でちまちまアプリ制作。。
どうやって作った？
以下の流れで作りました。
1.Figmaでデザイン構想(所要時間：たぶん3hくらい)
2.プログラミングカリカリ(所要時間：たぶん8hくらい)
3.Vercelでデプロイ(所要時間：5m)
1.Figmaでデザイン構想(所要時間：たぶん2hくらい)
自分のデザイン力が皆無なのはわりと課題意識があって、そろそろ本格的にUI/UX学ぼうということでまずはFigma入門。こんな感じでデザイン案を構想していました。
はじめてFigmaを使うわけではなく、前回作った飲み会傾斜計算アプリ(詳細は→飲み会の傾斜計算が面倒だったのでアプリ作ってみた)開発時も実は少し使っています。あのときは
時間もなかったのでレイヤーとか配色とか超絶テキトーでもうすこし腰を据えてやりたいなと思っていたので今回は
満を持してリベンジしました。
実際にFigmaで作ったデザイン
実際のデザインと出来上がったアプリにどれだけの乖離があるかは皆さんの目で確かめてください。
改めてFigmaの色んな機能使ってみると素材も豊富だし、画面遷移も表現できるしで結構使いやすいなと感じました。
調べると、作ったデザインをそのままCSSに落とし込んでくれる拡張機能があるっぽいですが使いこなせる気が
しないので今回はデザイン作成のみとしました。
2.プログラミングカリカリ(所要時間：たぶん8hくらい)
今回はバックエンド不要なのでReact(JS)でコードをチマチマカリカリ。
特段ポイントございません。音声認識の実装はラムダさんのGithubからコードを一部拝借させていただきました🙇♂️
早くリリースしたかったのでとりあえず動けやコードを生産しました。申し訳ございません。
3.Vercelで5分デプロイ(所要時間：5m)
普段アプリを公開するときはGCPとかAWSを使うのですが、今回はラムダさんの動画で紹介されていたVercelを利用してみました。
使う前に軽く調査。以下備忘として残しておきたいポイントです。
・無料で使えるよ
・無料枠の場合はアプリの商用利用は不可だよ
・無料枠の場合は月30000リクエストまでだよ
・githubと連携してpushしたらデプロイが走るCI/CDが勝手に設定されるよ
・独自ドメインを2秒で設定できるよ
個人的にはgithub pagesより数段使いやすかったです。
改善点あるよね？
改善点ありすぎてとりあえず致命的な部分だけピックアップして記録します。
改善点①：カタカナ禁止ゲームにて、カタカナともひらがなとも漢字とも取れるワードで期待していない動作となる
例えば「ダメ」「だめ」「駄目」などがいい例ですが、カタカナ禁止ゲームで「ダメ」を禁止判定されたら
ムカつきますよね。自分はムカつきます。
でも今回作ったアプリはこういうことを平気でやってしまいます。
使っているAPIのレスポンステキストを取得し、テキストにカタカナが含まれているかどうかを判定しているので
APIのご機嫌次第でゲーム性が損なわれます。
改善点②:音声認識の精度が悪い
当初の懸念通り、複数人で話した場合の音声認識の精度が著しく低いような気がします。
今回作ったアプリの利用シーンは複数人での会話を想定しているので、ここの精度が鍵となるのですが
うまいこと動作しないことが多々。難しいですねーほんと。
改善点③:使えるブラウザが限定的
ラムダさんの動画でも言及されていますが、今回利用しているWeb Speech APIは対応ブラウザが結構
限定的です。最新のバージョンではモバイルのSafariにも対応していると記載はあるものの、自分が試した感じ
動かず。。。Chromeが一番安定して使えるのでChromeでお試しください。
感想は？
実用性のないアプリを生成してしまったーーー😇
でも色々勉強になったからいいかーーー🙂
（UIライブラリはいつものMUIではなく、Chakura UI使ってみり、割と初めて尽くしなことがあったので
勉強にはなりました。）
って感じです。
最初はReact Nativeを使って人生初のモバイルアプリを作ってみたかったのですが、音声をテキスト化する
部分で挫折しました。。Expoとかもそのときに少しだけ勉強したのでいつか記事にしたいですね。
今回作ったアプリは時間あったら改善しようと思います。多分しないけど。