昨日、単語帳アプリを作った。
スペルの読み上げを付けて英単語練習アプリをあらためて作ってみた。
単語リストは、単語帳アプリの使い回し。もとい、再利用。
仕様として考えたこと
- スペルの読み上げと、英語の発声を少ない労力で実現する。
- 楽しんで勉強するのが目的。前回よりも視認性を上げる。
結果
今回の成果物。英単語練習アプリ
経緯
入力したスペルを一文字ずつ読み上げるだけのプログラムを書いてみた。
せっかくなので、文字も1文字ずつフェードする仕様にした。
動作の動画
動作手順
- https://drone-an.pro/yomiage/ にアクセス
- 出題範囲（現状最大100問）を指定
- ランダム出題 ボタンを押す
- 問題の日本語が表示されるので、入力欄にタイプ
- 答え合わせ ボタンで答え合わせ
- わからない問題は 答えを見る ボタン
- ランダム出題 ボタンで次の問題へ
- 今回、間違えた問題は、 間違えた単語一覧表示 ボタンを押すと画面下に表示
ChatGPTに相談した手順
- スペルを1文字ずつ読み上げる方法はあるか？
- 簡単なHTMLページを作ってほしい。
- 単語→スペル→単語の順で読み上げたい。少しゆっくりめに。
- もっとゆっくりめにして。
- スペル中に1文字ずつ画面表示したい。
- 音声の切り替え（男女など）を可能にしたい。
- 正解・不正解時の音を追加してほしい。
- スペル全体を1文字ずつ順にアニメーション表示したい。
- 自動で大文字になるのをやめてほしい。
- 単語リストを同じフォルダの
preset.csvにしておく。 - 日本語訳も画面に表示してほしい。
- 起動時の音声を Google UK English Female（en-GB）にしてほしい。
- 再生ボタンを1つにし、ページ下部に配置してほしい。
- 声を Veena にしてほしい。
- 声を Samantha に変更してほしい。
- ランダム出題ボタンを一番上に、日本語表示を2番目、入力欄を3番目にしてほしい。
- iPhoneでの表示を想定して、入力欄のフォントを大きくしてほしい。
- ランダム出題ボタンが押されたら、前のフェード文字を一度消してほしい。
- 日本語の問題部分のフォントをもう少し大きくして、ボールドにしてほしい。
- 入力欄の文字をやや薄いグレーに変更してほしい。
- フルHTMLを出してほしい。
- 出題の英字が入力欄に表示されるのを、表示・非表示の切り替えができるようにしてほしい。
- 出題のスペルがわからない場合、どうすればよいか相談。
- 「答えを見る」ボタンを追加してほしい。
- 正解・不正解判定機能と、間違えた単語のリスト保存機能を追加してほしい。
- チェックボックスと文字が離れすぎている問題の修正。
- フェードする文字をもう少し大きくしてほしい。
- 正解と不正解のメッセージをもっと派手にしてほしい。
- 出題範囲を絞れるようにしてほしい。
- 間違えた単語の一覧表示ボタンが欲しい。
- 日本語訳からフェード文字部分までを背景色変更や縁取りなどで見やすくしてほしい。
- iPhoneのSafariで表示したときに、左右の空白が広すぎる問題を修正してほしい。
- 差し替え版のHTML（空白調整済み）を送ってほしい。
- 今までの「お願いした命令だけ」を一覧にしてほしい。
実行結果
