【開発報告】英語学習サポートアプリ「shaberoo」が完成しました!

【開発報告】英語学習サポートアプリ「shaberoo」が完成しました!

こんにちは、Mako(@makokamiya)です。

この度、初の開発案件をさせていただいていました、WEBアプリケーションが一旦完成いたしました!

今回の開発案件で、Railsを使ったWEBアプリケーション開発、Githubを使ったチーム開発、AWSを使ったリリース方法など、とても学びになりました。

”英語を喋って日記をつける”英語学習サポートアプリ
「shaberoo」はこちらから!
https://shaberoo.work

※スマートフォンで使うことを想定していますので、スマートフォンのブラウザからアクセスしてください。PCからアクセスする場合は、Chromeの検証ツールでスマホのデバイスサイズにしてから使うことをお勧めします。

使ったスキル

  • Ruby 2.6.5
  • Ruby on Rails 6.0.2
  • PostgreSQL
  • bootstrap
  • JavaScript
  • chart.js
  • AmazonEC2
  • AmazonRDS
  • nginx
  • Certbot(Let’s Encrypt)

主な機能

ログイン機能

Ruby on Railsチュートリアルを参考にユーザー登録、基本的なログイン機能を実装しました。

signupとlogin画面。
レイアウトはBootstrapを使っています。
ログインするとアラートが表示されます。

”英語をしゃべって”日記をつける

音声認識APIを使って、喋った英語を文字で起こします。

 
日記の保存画面。

中央のマイクボタンを押すと音声認識を開始するとともに、タイマーが開始されます。

左の一時停止ボタンを押すとコンマが挿入され、タイマーが止まり、音声認識された文字がテキストエリア内に表示されます。
マイクボタンを押すと音声認識が再開されます。

最後に、テキスト内をクリックして、大文字や固有名詞を修正します。
※1度テキストエリア内をクリックすると音声認識ボタンが消えます。

④赤い停止ボタンを押すと日記が保存されます。

カレンダー表示

カレンダーの描画はJavaScriptで行なっています。(今回はフレームワーク等使わず、生JavaScriptで書きました)

 
カレンダー画面。

①ホーム画面から右下のカレンダーボタンを押すとカレンダー画面へ移動します。
日記をつけた日には色がついています。

②日付をクリックすると下の日記の一部分がスクロールされ、クリックすると、日記一覧ページへ移動します。
上のカレンダー/一覧のボタンタブで切り替えることもできます。

③日記一覧ページ内の日記をクリックすると、文法チェックされた日記詳細ページに遷移します。

文法チェック機能

英語の文法チェックAPIを使っています。


日記の詳細画面と文法チェック。

①カレンダー画面の日記一覧をクリックすると、日記の詳細と文法チェックの画面に移動します。

間違えた数に基づいたスコアや、日記の記録時間が書かれています。

間違えた箇所の1文に線が引かれています。

②間違えた箇所をクリックすると、間違えた箇所の指摘や、例文などが提示されています。

レポート画面

レポート画面のグラフには、chart.jsを使っています。


レポート画面。

①ホームページから左下のレポートボタンをクリックすると、1週間のレポート画面へ遷移します。

②特定の日の棒グラフをクリックすると、下の円グラフ表示がその日の情報に切り替わります。

”英語を喋って日記をつける”英語学習サポートアプリ
「shaberoo」はこちらから!
https://shaberoo.work

※スマートフォンで使うことを想定していますので、スマートフォンのブラウザからアクセスしてください。PCからアクセスする場合は、Chromeの検証ツールでスマホのデバイスサイズにしてから使うことをお勧めします。

とてもいい経験になりました!開発に関わることができてよかったです!ありがとうございました!