このサービスのこだわった点、大変だった点

[konjikicity]

このサービスのこだわった点

Vue.jsのSPAという選択

こちらのサービスは録音を２回行ったりと、画面遷移が多いです。
Vue.jsのSPAで作成することで、画面遷移のストレスを軽減し、
モーダルを使えるところは使って、UXの向上に努めました。

継続的に使っていただけるような機能

もともとは練習するだけのものでしたが、Mypageのカレンダー機能を追加し
練習をいつやってどんな練習をしたか一目でわかるようにしました。
これからも継続的にいかに使っていただけるかを考えていきたいです。
主に考えている機能は

• MyPageの充実(UserEditやアバターなど)
• Userが作成した文章を練習できる機能
• Rakeタスクなどで練習する文章を１週間毎に更新する

大変だった点

判定機能の作成

まずどんな文章でも判定できるようにするため判定機能の基準を

選択した文章と音声認識した文章を比較して何文字あっているかの差分で判定する

といった基準を自分で考えてロジックを作成しましたが、問題がでました。

・音声認識された文章は自動で漢字になる

webspeechAPIを使用して音声認識をすると、自動で漢字に変換されてしまうということがおきました。
選択される文章はすべてひらがなで統一していたので、漢字に直されてしまうと、予期していない
差分が生まれてしまい、かなり詰まりました。

→ ひらがな化APIを使用して解決！

漢字に直されていた文章をひらがな化APIを使用することで、ひらがな同士での比較が可能になりました！

・ひらがな化APIで変換した文章は文節で空白が含まれた文字になる

ひらがな化APIを使用した文章は文節で空白が生まれてしまい、文字単位で比較をしているため
空白も１文字としてカウントされ、これも予期していない差分が生まれていました。

→ javascriptのreplaceメソッドと正規表現を使用して空白文字を削除

const resultWordReplace = resultWord.replace(/\s+/g, "");

正規表現「\s+」と記述することで、文書中の全角空白・半角空白を指定することができ、gフラグオプションで、全ての全角空白・半角空白を空文字に置き換えることができるので正しい判定ができるようになりました。

このやり方はよかったかわかりませんが、想定する動きを連続したエラーの中から
自分で考えて導き出す過程がすごく大変でした。