BOIトレ

https://boitore.fly.dev/

サービス概要

劇団四季も使っている「母音法」という発声練習方法で、発声練習ができるサービスです。

まず母音法とは？

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

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

画面・機能一覧

トップページ	モード選択ページ
・スタートボタンをクリックすると注意事項のモーダルを表示	・モードを選択できます。 ・難易度によって選択できる文章が変化

文字選択ページ
・練習する文字を選択する ・スライダー形式で文字を選択可能

通常練習ページ	母音法練習ページ
・選択した文章を録音できる。 ・録音ボタンを押して5秒後に録音が終了 ・録音終了後、母音法の練習ページへのリンクを表示	・母音法の文章を発音した後、文章を録音できる。 ・録音ボタンを押して5秒後に録音が終了　 ・録音終了後、結果ページへのリンクを表示

結果ページ
・録音した音声の音声認識を見れる ・録音した音声を再生できる ・新規登録をしていると保存可能 ・twitter共有ボタンより投稿が可能

マイページ
・カレンダーで保存した音声を表示する ・タブで練習履歴の一覧も表示できる

プライバシーポリシー	how-toページ
プライバシーポリシーを表示する	how-toページを表示する

利用規約	お問い合わせ
利用規約を表示する	お問い合わせ先(Twitterアカウント)の情報を表示する

ログインページ	新規登録ページ
ログインページを表示する	新規登録ページを表示する

使用技術

フロントエンド

• Vue.js 2.6.14
主要yarnパッケージ
• vuetify
• vue-router
• vuex
• vee-validate
• vue-persistedstate
• axios
• eslint

バックエンド

• Ruby 3.0.2
• Rails 6.1.4.4
主要gem
• devise_token_auth
• active_model_serializers
• carrierwave
• cloudinary
• seed-fu
• meta-tags
• rubocop

インフラ

• Heroku
• PostgreSQL
• Cloudinary

使用API

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

画面遷移図

https://www.figma.com/file/4h1J03eBaY1HfQgUWrITyE/%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E5%9B%B3

ER図

https://drive.google.com/file/d/1GeOCJNw3wjY2WjxfHInObvoY2KGv8qCD/view?usp=sharing

こだわった点・苦労した点

issue

関連ページ

• Twitterハッシュタグ: #BOIトレ
• Qiita記事: 【個人開発】母音法を広めたい！劇団四季も使っている『母音法』で発声練習ができるサービス『BOIトレ ~ 母音法で発声練習 ~』をリリースしました！