【個人開発】母音法を広めたい！劇団四季も使っている『母音法』で発声練習ができるサービス『BOIトレ ~ 母音法で発声練習 ~』をリリースしました！

<img width ="100%"src="https://res.cloudinary.com/dzlhvpfmo/image/upload/v1652016197/boi%E3%83%88%E3%83%AC/3f4af34ce052552bc7c3a009d84ac0ef_x4rzoh.png" >

## まず母音法って？
日本語は母音の「あ・い・う・え・お」と子音でできています。
いわば母音は言葉の土台部分にあたるので、
この土台がしっかり発音できるようになると、ハッキリした声で発音できるようになります。

例)「おはようございます」→「おあおうおあいあう」
という感じで母音のみで発音するのが母音法です

## サービス紹介
劇団四季も使っている発声練習方法の「母音法」で発声練習ができるサービスです。
練習の管理もできるので毎日の記録をつけながら練習ができます

※ 現在レスポンシブ対応、実装中です...PCからのご利用をよろしくお願いいたします。

https://www.boitore.jp/

https://github.com/konjikicity/boitore

## なぜ作った？
僕は幼少期より非常に滑舌が悪く、馬鹿にされることが多くありました。
そんな時、この「母音法」に出会って世界が変わりました。
「母音法」で練習しながら年を重ねることで、自分の中のコンプレックスがなくなり、
人生を豊かにすることができたと思っています。

そんな「母音法」をいろんな人に広めたい！そんな思いでこのサービスの開発を始めました。

## サービス概要
機能としては大きく分けて３つです
- 音声の録音機能
- 録音した音声の再生・音声認識機能
- MyPage機能

### 1.音声録音機能
##### 機能の流れ
1. モードを選択
2. 文章を選択
3. 文章を普通に録音
4. 母音法で練習後に録音

##### 説明
モードと文章を選択した後、普通の文章を録音していただき、
母音のみの文章を練習した後、普通の文章をもう一度録音します。

| １.モードを選択                                                          |  2.文章を選択                                                            |                                                        
| ------------------------------------------------------------------   |  ----------------------------------------------------------------------     |
| <img 　width="100%" src="https://res.cloudinary.com/dzlhvpfmo/image/upload/v1652016335/boi%E3%83%88%E3%83%AC/a90dfd33dae36b1d92d62e490e96ce4e_zqqjie.png">|   <img src="https://res.cloudinary.com/dzlhvpfmo/image/upload/v1652017296/boi%E3%83%88%E3%83%AC/5ef423cdc0de100a9e9790cb9857a5be_tfesyw.png">  
|・モードを選択します。<br>・難易度は4種類から選択できます。                     |     ・練習する文章を選択する。<br>・スライダー形式で文字を選択  



| 3.文章を普通に録音                                                       　　　　| 4.母音法で練習した後に文章を録音                                                               　　　　|
| ----------------------------------------------------------------------  |  ---------------------------------------------------------------------- 
| <img src="https://res.cloudinary.com/dzlhvpfmo/image/upload/v1652016900/boi%E3%83%88%E3%83%AC/1eabe03a1a5fca591bba6086a5aad654_xxqkp1.png">      | <img src="https://res.cloudinary.com/dzlhvpfmo/image/upload/v1652017205/boi%E3%83%88%E3%83%AC/774e73aac7743304d2cef24a92bd0965_tchio8.png">    
| ・選択した文章をまずは普通に録音します。| ・母音の文章を<font color="red">しっかり・ゆっくり</font>練習<br>・その後、普通の文章を録音します。


### 2.録音した音声の再生・音声認識機能
##### 説明
結果画面にて、母音法で練習した音声を対象に、
５段階の評価を表示(S・A・B・C・Dの順)各評価に応じた点数を表示、
録音した各練習の音声を再生、音声認識にてどう聞こえたか見ることができます。
他にも練習内容をtwitterで共有、ログインしていると練習内容を保存することができます。
| 結果画面                                                               　　　　|
| ----------------------------------------------------------------------     |
| <img width="100%"src="https://i.gyazo.com/7c7a9ab2eb63919d3b01546ac4791fe7.jpg">      |
|                            |

### 3.MyPage機能
##### 説明
こちらは新規登録・ログイン後に使用できる機能となります。
結果画面で保存した文章をカレンダーで表示することで、練習した日時がすぐわかります。
練習をクリックすると、モーダルで過去の練習した結果を表示することができます。
他にもタブを切り替えることで、練習の履歴を一覧で表示することができます。

| MyPage画面                                                         　|                     
| ---------------------------------------------------------------------|
| <img width="100%"src="https://i.gyazo.com/360c02d7f1f7b76e2d551f000df50522.jpg">      |                                                         |
|                         　　　　　　　　　　　　|                                                          

| モーダル画面                                                       　|                     
| ---------------------------------------------------------------------|
| <img width="100%"src="https://i.gyazo.com/71fc608a44f107cef5297b1b71b5ed52.jpg">      |                                                         |
|                         　　　　　　　　　　　　|                                                          |

## 使用技術
**フロントエンド**
<ul>
  <li>Vue.js 2.6.14</li>
  <details>
    <summary>主要パッケージ</summary>
    <ul>
      <li><a href="https://github.com/vuetifyjs/vuetify">vuetify</a></li>
      <li><a href="https://github.com/vuejs/vue-router">vue-router</a></li>
      <li><a href="https://github.com/vuejs/vuex/tree/3.x">vuex</a></li>
      <li><a href="https://github.com/logaretm/vee-validate">vee-validate</a></li>
      <li><a href="https://github.com/robinvdvleuten/vuex-persistedstate">vue-persistedstate</a></li>
      <li><a href="https://github.com/axios/axios">axios</a></li>
      <li><a href="https://github.com/eslint/eslint">eslint</a></li>
    </ul>
  </deatails>
</ul>

**バックエンド**
<ul>
  <li>Ruby 3.0.2</li>
  <li>Rails 6.1.4.4</li>
  <details>
    <summary>主要gem</summary>
    <ul>
      <li><a href="https://github.com/lynndylanhurley/devise_token_auth">devise_token_auth</a></li>
      <li><a href="https://github.com/rails-api/active_model_serializers">active_model_serializers</a></li>
      <li><a href="https://github.com/carrierwaveuploader/carrierwave">carrierwave</a></li>     
      <li><a href="https://github.com/cloudinary/cloudinary_gem">cloudinary</a></li>
      <li><a href="https://github.com/mbleigh/seed-fu">seed-fu</a></li>
      <li><a href="https://github.com/kpumuk/meta-tags">meta-tags</a></li>
      <li><a href="https://github.com/rubocop/rubocop">rubocop</a></li>
    </ul>
  </deatails>
</ul>
  
**インフラ**
- Heroku
- PostgreSQL
- Cloudinary

**使用API**
- MediaRecorderAPI(音声録音に使用)
- WebSpeechAPI(音声認識に使用)
- ひらがな化API（音声認識した文章をひらがなに変換するために使用）

## こだわったポイント
#### 判定機能にて独自のロジックを作成
まず、判定機能を作成するにあたり、２点障害がありましたが下記にて対応しました。
- 音声認識された文章は自動で漢字になる　**→** **ひらがな化APIを使用**
- ひらがな化された文章は自動で空白が含まれる **→** **正規表現とreplaceメソッドを使用**

そして、無理やりではありますが、独自のロジックを作成して判定機能を作成しました。
```javascript
      
      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認証
- ユーザーが作成した文章を練習できるモードを追加

## おわりに
まだまだコードが冗長な部分もありますが、学習を続けて、
今後もサービス向上に努めていきたいと思います！

このサービスを通して少しでも「母音法」に興味を持っていただけると嬉しいです！！
最後までご覧いただきありがとうございました！！