まず母音法って？
日本語は母音の「あ・い・う・え・お」と子音でできています。
いわば母音は言葉の土台部分にあたるので、
この土台がしっかり発音できるようになると、ハッキリした声で発音できるようになります。
例)「おはようございます」→「おあおうおあいあう」
という感じで母音のみで発音するのが母音法です
サービス紹介
劇団四季も使っている発声練習方法の「母音法」で発声練習ができるサービスです。
練習の管理もできるので毎日の記録をつけながら練習ができます
※ 現在レスポンシブ対応、実装中です...PCからのご利用をよろしくお願いいたします。
なぜ作った？
僕は幼少期より非常に滑舌が悪く、馬鹿にされることが多くありました。
そんな時、この「母音法」に出会って世界が変わりました。
「母音法」で練習しながら年を重ねることで、自分の中のコンプレックスがなくなり、
人生を豊かにすることができたと思っています。
そんな「母音法」をいろんな人に広めたい！そんな思いでこのサービスの開発を始めました。
サービス概要
機能としては大きく分けて３つです
- 音声の録音機能
- 録音した音声の再生・音声認識機能
- MyPage機能
1.音声録音機能
機能の流れ
- モードを選択
- 文章を選択
- 文章を普通に録音
- 母音法で練習後に録音
説明
モードと文章を選択した後、普通の文章を録音していただき、
母音のみの文章を練習した後、普通の文章をもう一度録音します。
| １.モードを選択 | 2.文章を選択 |
|---|---|
 |
 |
| ・モードを選択します。 ・難易度は4種類から選択できます。 |
・練習する文章を選択する。 ・スライダー形式で文字を選択 |
| 3.文章を普通に録音 | 4.母音法で練習した後に文章を録音 |
|---|---|
 |
 |
| ・選択した文章をまずは普通に録音します。 | ・母音の文章をしっかり・ゆっくり練習 ・その後、普通の文章を録音します。 |
2.録音した音声の再生・音声認識機能
説明
結果画面にて、母音法で練習した音声を対象に、
５段階の評価を表示(S・A・B・C・Dの順)各評価に応じた点数を表示、
録音した各練習の音声を再生、音声認識にてどう聞こえたか見ることができます。
他にも練習内容をtwitterで共有、ログインしていると練習内容を保存することができます。
| 結果画面 |
|---|
 |
3.MyPage機能
説明
こちらは新規登録・ログイン後に使用できる機能となります。
結果画面で保存した文章をカレンダーで表示することで、練習した日時がすぐわかります。
練習をクリックすると、モーダルで過去の練習した結果を表示することができます。
他にもタブを切り替えることで、練習の履歴を一覧で表示することができます。
| MyPage画面 |
|---|
 |
| モーダル画面 |
|---|
 |
使用技術
フロントエンド
- Vue.js 2.6.14
バックエンド
- Ruby 3.0.2
- Rails 6.1.4.4
インフラ
- Heroku
- PostgreSQL
- Cloudinary
使用API
- MediaRecorderAPI(音声録音に使用)
- WebSpeechAPI(音声認識に使用)
- ひらがな化API（音声認識した文章をひらがなに変換するために使用）
こだわったポイント
判定機能にて独自のロジックを作成
まず、判定機能を作成するにあたり、２点障害がありましたが下記にて対応しました。
- 音声認識された文章は自動で漢字になる → ひらがな化APIを使用
- ひらがな化された文章は自動で空白が含まれる → 正規表現とreplaceメソッドを使用
そして、無理やりではありますが、独自のロジックを作成して判定機能を作成しました。
const resultWord = this.boinRecognition
const normalWord = this.normalSentence
// 変数に母音法練習後の音声認識と選択した文章を代入
const resultWordReplace = resultWord.replace(/\s+/g, "");
// replaceメソッドと正規表現を使って空白を削除する
const resultWordSplit = resultWordReplace.split('');
const normalWordSplit = normalWord.split('');
// 母音法練習後の音声認識と選択した文章を１文字ずつの配列に分解する
const resultDifference = normalWordSplit.filter(i => resultWordSplit.indexOf(i) == -1);
// 母音法練習後の音声認識と選択した文章の差分の配列をfilterとindexOfメソッドで返す
const resultNormalLength = normalWord.length
const resultDifferenceLength = resultDifference.length
// 選択した文章と差分の配列の文字数を算出する
const result = resultNormalLength - resultDifferenceLength
// 選択した文章の文字数から差分の文字数を引く
母音法で練習した音声認識と選択した文章を比較
その差分の文字数を基準として、点数、評価を算出しています。
Vue.jsでのSPAという選択
こちらのサービスは録音を２回行ったりと画面遷移が多いです。
Vue.jsのSPAで作成することで画面遷移のストレスを軽減し、
モーダルを使えるところは使って、UXの向上に努めました。
今後実装したい機能
- SNS認証
- ユーザーが作成した文章を練習できるモードを追加
おわりに
まだまだコードが冗長な部分もありますが、学習を続けて、
今後もサービス向上に努めていきたいと思います！
このサービスを通して少しでも「母音法」に興味を持っていただけると嬉しいです！！
最後までご覧いただきありがとうございました！！