【個人開発】英語の発音精度を診断するアプリ「Speaking Checker」を作りました

はじめに

初めまして、よしたかと申します！

突然ですが、皆さんは英語が得意でしょうか？
私は「読む・書く」は得意ですが、「聞く・話す」は苦手です。「読む・書く」については高校時代の先生の教え方がうまかったおかげか今も得意なのですが、「聞く・話す」については海外留学や英会話スクール等に通ったことがなく、外国人の方と話す経験がほとんど無かったので苦手です。
他の方はどうなのか？と思い調べてみると、下記のビジネスパーソン向けに行われた調査データによると、英語が得意と答えた人は約3割なのに対して、英語が苦手と答えた人は約7割と多数を占めていることが分かります。
参考: 「英語学習の実態と意欲」に関する調査結果

私は一人でも多くの方に英語を好きになって欲しいです。そのため、ゲーム感覚で英語の発音練習ができないかと思い、「Speaking Checker」を開発しました。

▼サービスサイト

サービス概要

本サービスは主に「ゲームモード」と「英文作成モード」の2つの遊び方から構成されてます。

ゲームモード

ゲームモードでは出題された英文を発音してもらい、発音結果が一定点以上だとクリア判定となり次の問題へ進むことができ、一定点以下だとゲームオーバー、その時点で終了となります。問題数は全10問あり、全問クリアでゲームクリアとなります。
「ボタンを押して発音をチェック!!」を押してもらうと音声を拾い始めます。発音した英文が問題文と一致していれば発音結果と、発音の良い・悪い箇所の結果が表示されます。
もし発音がわからない単語があったとしても、「サンプルボイスを聞いてみる」を押してもらうとネイティブの方のサンプルボイスを聞くことができます。

ゲームオーバー、または全問クリアすると最初から最後までの発音結果を確認できます。また発音改善のためにネイティブの方の参考動画を表示させています。

英文作成モード

英文作成モードでは各ユーザーが発音したい英文を作成することができ、発音の上手さを確認することができます。
英文を記入するフォームに英文を記入してもらい、「送信」ボタンを押してもらうと発音を確認する画面に変わるので、あとはゲームモードと同じように「発音をチェック」ボタンを押してから発音すると、結果が表示されます。

使用技術

バックエンド

• Ruby 3.1.2
• Rails 6.1.6

フロントエンド

• HTML
• CSS(SCSS)
• JavaScript(jQuery)

主なGem

• devise
• kaminari
• gon
• faraday
• simple_calendar
• administrate

Azure Cognitive Services 「Speech to Text API」

本サービスの肝となる部分です。
サービス開発前の技術検討段階でどの文字起こしAPIを使用するか悩んでいる際、当初は「Amazon Transcribe」を使用すれば発音精度を返してくれるし、AWSにアプリをデプロイするにしてもいくらか都合がいい所があるのでは？という浅はかな考えのもと開発に着手したのですが、いざ文字起こし機能が完成して使用してみると、思いもせぬ問題点が発生したので使用を断念しました(ちなみに機能実装までに1ヶ月ほどかかりました)。
また振り出しに戻り、使用するAPIを再度検討していたところ、Azure Cognitive Servicesは「発音精度を3つの項目から評価する」とのことなので、Azure Cognitive Servicesを使用することにしました。

ER図

工夫した点

ユーザー認証に匿名認証を使用

本アプリでは発音結果を振り返る機能があるのですが、ユーザーを識別するにはユーザー登録してもらう必要があります。ゲストユーザーによるログインも考えましたが、ユーザー登録をするメリットが現機能のみだとほとんど無いと思ったので、匿名認証を使用しました。

匿名認証機能の実装には以下の記事を参考にしました。
参考: 【Rails】自前で匿名認証を実装する

API使用時のtoken取得方法をサーバー側で完結

APIを使用するにはAzureのキーをもとにtokenを発行し、そのtokenをもとにAPIを使用するのですが、公式ドキュメントでは「tokenの発行〜APIの使用」までの処理をJavaScriptで行ってました。開発当初はtoken発行に必要なパラメーターをgemのgonを使用してRubyからJavaScriptへ渡していたのですが、実装後に他の方から「gonはパラメーターの中身を他人が見ることができるから危険」とのアドバイスをいただいたので、Ruby側からtokenを発行するようにしました。

今後追加したい機能

過去の発音音声の確認機能

現時点では過去の発音結果を振り返ることはできますが、発音の元となる音声を確認することはできません。録音した音声も振り返ることができれば、過去の自分と比べてどれだけ成長したかより分かりやすくと考えています。

難しい発音の個別解説機能

thankの「θ」やappleの「æ」、seeとsheの発音の違いなど、発音の難しい単語はたくさんあります。それらの発音を発音記号別に解説するページを追加しようと考えています。

終わりに

最後までご覧いただきありがとうございました！
一人でも多くの方が英語を好きになったり、英語に興味を持ってもらえると嬉しいです。
もしサービス使用時にご意見やご感想、ご要望があれば、ご連絡をお願い致します！

【Twitterアカウント】
https://twitter.com/yoshitaka12_2

【GitHub】
https://github.com/Yoshitaka-Maekawa/speaking-checker