はじめに

英単語を英語で学ぶサービスを制作しました。
制作期間は約1ヶ月です。

サービス概要

英単語とその意味を音声を聞きながら学ぶことができるサービスです。
サービス名は「P.E.Dictionary」です。P.EはPassive Englishの略です。

ゲストログインができます。
暗記カードのように英単語を登録することができます。

URL:https://pedictionary.com/
GitHubリポジトリ:https://github.com/tastukitamagawa/portfolio.git

制作のきっかけ

英会話の学習法を模索しているときに、イマージョン・ラーニングという学習法に出会い、それが理に適っている方法だと感じたので英語で英語を学ぶサービスを開発してみたいと思ったからです。
（イマージョン・ラーニングとは、英語でラジオを聞いてみたり英語字幕で英語音声のドラマ・映画を見てみたりなど英語だけの環境で学ぶことを言います。）

サービスの使い方

ログイン

ユーザー登録してログイン、もしくはゲストとしてログインします。

英単語を登録する

登録するのは英単語だけで大丈夫！
意味は自動で登録されます。（※確実に意味が登録できる保証はありません。）

登録内容の修正

登録内容を変えることも可能です。

自動読み上げ機能を使用する

再生ボタンを押すと登録した英単語とその意味の音声が流れます。

使用技術

Laravel 11.9.2
HTML
CSS
JavaScript
Docker
nginx 1.22.1
AWS（VPC・EC2・RDS・Route53・Certificate Manager）
Words API（英単語から意味を取得）
Text-to-Speeh API（テキスト読み上げ）

ER図

dbdiagram.ioを使用して作成しました。

おわりに

初めてLaravelを使った制作だったので予想以上に制作に時間がかかってしまいました。ただ、LaravelだけでなくDockerの環境構築やAWSのデプロイも行えたので有益な経験になりました。

Words APIを使用したことで単語を登録するだけで英単語を自動的に登録できるので時短かつネイティブな表現で学べる仕様にしました。Text-to-Speech APIの導入が一番苦労しましたが、音声でも学べられるようにしました。ただ、ブラウザのポリシーにより音声の自動再生ができず、一度ユーザーがクリックイベントを行わないと音声が流れない仕様になってしまったのは非常に残念です。

今回は英単語に特化したサービスを制作をしましたが、リスニングやスピーキングの学習ができるサービスも制作してみたいです。