旅行英語
旅えいご
旅行先の50場面を、英語と日本語の短い会話で練習するWeb教材。事前生成した音声でお手本を聞き、返答を隠して声に出した後、同じ場面のチャレンジへ進める。チャレンジはセリフを一言ずつ表示し、返答例を自分で確かめながら進行する。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| React | お手本と場面チャレンジを画面内で切り替え、選んだ場面、再生中のセリフ、返答例の表示状態をコンポーネントで管理する。 |
| TypeScript | 教材の場面、話者、英文、和訳などのデータ形状と画面状態に型を付け、開発時に整合性を確認する。 |
| Vite | JSON教材を読み込むReact画面をビルドする。公開用ビルドでは静的な画面と音声を配信する成果物を生成する。 |
| Kokoro / WAV | 音声合成モデルのKokoroで会話の英文からWAV形式の音声ファイルを事前生成する。利用者のブラウザでは生成済みの音声を再生する。 |
| Cloudflare Workers Static Assets | 公開用の画面、教材、音声を配信する。公開WorkerはAPIへの要求を404で返し、学習用のサーバー処理を公開版へ接続しない。 |
処理の流れ
場面を選ぶ
ホテルや空港などの分類から会話のお手本を選び、英文と和訳、覚えて使う表現を確認する。
音声を聞いて練習する
一つずつ、全体、または間を空けた再生を選ぶ。返答を隠した場合は自分で話してから答えを開く。
同じ場面で試す
お手本から場面を引き継ぎ、相手のセリフとお題を一言ずつ表示して、返答例を後から確認する。
別の場面へ進む
練習後は同じ場面をやり直すか、選んだ分類の候補から別の場面をランダムに選んで続ける。
実装の工夫
返答を見せる順序
お手本では「返答を隠して練習」を選ぶと、自分の英文と和訳、重要表現、返答音声の再生ボタンを隠す。場面チャレンジでも相手のセリフと状況を先に示し、自分の返答例は操作後に表示する。正解を先読みせず声に出してから自己確認できる。
音声と画面の連動
50場面の201セリフに対応するWAVを教材の識別子と順番で参照する。全体再生とまねして練習ではセリフを順に再生し、後者は発話用の間を置く。場面の切り替えや画面移動では再生と待機を取り消し、前の会話の音声が続かないようにする。
教材と音声を静的に配信
会話の教材と音声を事前に用意し、場面の選択や返答例の表示はブラウザ内で処理する。練習のたびにサーバーへ会話生成を依頼する必要がない。公開WorkerはAPIへの要求を404で返し、原本に残る学習用のサーバー処理を公開版から切り離している。
構成と制約
- 録音、音声認識、自動採点は行わない。返答例は利用者が自分で確かめるための例である。
- 練習の進行状態は画面内に保持され、ページを再読み込みするとリセットされる。
実装確認：