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

こんにちは、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の検証ツールでスマホのデバイスサイズにしてから使うことをお勧めします。