Screenshots
Overview
概要
乗り物のキャラクターの表情で「感情」を表現した、子ども向けの感情カードアプリです。うれしい・かなしい・おこってる・こわいなど15種類の感情を、ひらがな入りのイラストカードで並べています。カードをタップすると、その感情のことばを音声で読み上げます。
How to use
遊び方・使い方
画面には乗り物キャラクターの感情カードが2〜3列のグリッドで15枚並びます。読みたいカードをタップすると、その感情のことば(例: うれしい、びっくり、だいすき)を音声で読み上げます。再生中のカードは縮小と黄色い発光で強調され、どのカードが鳴っているか分かります。別のカードをタップすると直前の再生を止めて新しい音声に切り替わります。
Tech stack
技術スタック
Next.jsReactTypeScriptWeb Speech APITailwind CSS
音声は用意した15枚分のmp3をRoute Handler(/audio/[slug])経由でimmutable・長期キャッシュ付きで配信し、HTMLAudioElementで再生。再生失敗時はWeb Speech API(SpeechSynthesis, ja-JP)へ自動フォールバックする二段構えで、既知のslugのみ配信を許可します。
Highlights
工夫した点
- 音声再生をモジュールスコープのシングルトンで一元管理し、連続タップ時も直前の再生を確実に停止して二重再生を防止
- 画像にひらがな文字と角丸を透明で焼き込み、CSS側でクリップせず配信することで、縮小表示時の四隅のかすれを回避
- 画像にwidth/height実寸を指定し、読み込み中は同じ角丸のプレースホルダーを背後に敷いてCLS(レイアウトずれ)を抑制
To improve
改善したい点
- 現状は15枚固定のため、感情カテゴリやテーマ(乗り物以外)の切り替え・拡張ができない
- 読み上げがja-JP固定で、多言語対応や読み上げ速度・声の調整をユーザーが選べない
- お気に入り登録や履歴など、繰り返し学習を支援する仕組みがない
What's next
今後の展望
- 動物・食べ物など別テーマのカードセット追加とテーマ切り替え
- タップした感情を使ったミニクイズやごっこ遊びモードの追加
- 多言語(英語など)の読み上げ対応で言語学習にも活用