リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 多言語フラッシュカード学習 CardMaster
カード学習中「ふりがな(読み仮名)表示トグル」機能の追加
## 1. 目的
日本語・中国語・韓国語など表意文字・特殊文字を含む言語を学習する際、読み方が分からず先に進めなくなるユーザーの離脱を防ぐ。問題カード表示中にワンタップで読み仮名/ピンイン/ふりがなを表示/非表示できるトグルボタンを追加し、初中級者の学習体験を向上させる。
---
## 2. 具体的な仕様
### 2-1. 対象言語と表示内容
| 言語 | 読み補助テキストの種類 | 例 |
|------|----------------------|----|
| 日本語 | ひらがな読み仮名 | 勉強 → べんきょう |
| 中国語 | ピンイン(声調付き) | 学习 → xuéxí |
| 韓国語 | ローマ字転写(Revised Romanization) | 공부 → gongbu |
| 英語・フランス語・スペイン語・ドイツ語 | 非表示(ラテン文字のためトグルボタン自体を非表示) |
読み補助テキストはプリセットカードデータ(既存の cards 配列オブジェクト)に `reading` フィールドを追加して管理する。既存の `word`・`meaning` フィールドは一切変更しない。
### 2-2. UIレイアウト
- 問題カード(フラッシュカード面)の単語テキスト直下に、読み補助テキスト用の `<span class="card-reading">` を配置する。
- 初期状態は **非表示**(`visibility: hidden` でレイアウト崩れ防止)。
- カード右下に 👁 アイコンのトグルボタン(`<button class="btn-reading-toggle">`)を配置。タップ/クリックごとに表示・非表示を切り替える。
- ボタンラベル:非表示時「読み方を見る」→ 表示時「読み方を隠す」(日本語UIの場合)。
- 「次へ」ボタンで次の問題へ進むと読み補助テキストは自動的に **非表示に戻る**(毎問リセット)。
### 2-3. スタイル
```css
.card-reading {
font-size: 0.85rem;
color: #888;
letter-spacing: 0.05em;
min-height: 1.2em;
display: block;
margin-top: 4px;
}
.btn-reading-toggle {
position: absolute;
bottom: 8px;
right: 8px;
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 12px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
cursor: pointer;
color: inherit;
}
```
ダークテーマ時も既存の CSS 変数に従い自動調整される。
### 2-4. 動作対象モード
- 4択モード・エンドレスモード・苦手集中モード の **全モード** で動作する。
- 問題表示フェーズ(回答前)のみトグルボタンを表示。正解・不正解フィードバック画面では非表示。
### 2-5. 設定の永続化
- ユーザーがトグルを「表示」にした状態で次問へ進んだ場合、次問では再び非表示にリセットする(毎問デフォルト非表示)。
- 「常に表示する」固定オプションは今回のスコープ外とする。
### 2-6. データ追加方針
既存 cards 配列の各オブジェクトに `reading` キーを追加する。日本語・中国語・韓国語カードのみ値を設定し、他言語は `reading: ""` または省略。`reading` が空文字・未定義の場合はトグルボタン自体を描画しない。
```js
// 例: 日本語カードオブジェクト
{ word: "勉強", meaning: "study / learning", reading: "べんきょう" }
// 例: 中国語カードオブジェクト
{ word: "学习", meaning: "study / learn", reading: "xuéxí" }
```
---
## 3. 既存機能との整合(壊さない点)
- `reading` フィールドは追加のみで、既存の `word`・`meaning` を使う全処理(4択選択肢生成・スコア計算・苦手リスト登録・TTS読み上げ・履歴記録)には一切手を加えない。
- TTS(Web Speech API)の読み上げ対象は引き続き `word` のみ。`reading` テキストは読み上げない。
- 学習設定モーダル・セッション履歴モーダル・バッジシステム・カレンダー等の既存UIには変更を加えない。
- `reading` が存在しないカードでも例外エラーが出ないよう `card.reading || ""` でフォールバック処理を施す。
日本語・中国語・韓国語など表意文字・特殊文字を含む言語を学習する際、読み方が分からず先に進めなくなるユーザーの離脱を防ぐ。問題カード表示中にワンタップで読み仮名/ピンイン/ふりがなを表示/非表示できるトグルボタンを追加し、初中級者の学習体験を向上させる。
---
## 2. 具体的な仕様
### 2-1. 対象言語と表示内容
| 言語 | 読み補助テキストの種類 | 例 |
|------|----------------------|----|
| 日本語 | ひらがな読み仮名 | 勉強 → べんきょう |
| 中国語 | ピンイン(声調付き) | 学习 → xuéxí |
| 韓国語 | ローマ字転写(Revised Romanization) | 공부 → gongbu |
| 英語・フランス語・スペイン語・ドイツ語 | 非表示(ラテン文字のためトグルボタン自体を非表示) |
読み補助テキストはプリセットカードデータ(既存の cards 配列オブジェクト)に `reading` フィールドを追加して管理する。既存の `word`・`meaning` フィールドは一切変更しない。
### 2-2. UIレイアウト
- 問題カード(フラッシュカード面)の単語テキスト直下に、読み補助テキスト用の `<span class="card-reading">` を配置する。
- 初期状態は **非表示**(`visibility: hidden` でレイアウト崩れ防止)。
- カード右下に 👁 アイコンのトグルボタン(`<button class="btn-reading-toggle">`)を配置。タップ/クリックごとに表示・非表示を切り替える。
- ボタンラベル:非表示時「読み方を見る」→ 表示時「読み方を隠す」(日本語UIの場合)。
- 「次へ」ボタンで次の問題へ進むと読み補助テキストは自動的に **非表示に戻る**(毎問リセット)。
### 2-3. スタイル
```css
.card-reading {
font-size: 0.85rem;
color: #888;
letter-spacing: 0.05em;
min-height: 1.2em;
display: block;
margin-top: 4px;
}
.btn-reading-toggle {
position: absolute;
bottom: 8px;
right: 8px;
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 12px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
cursor: pointer;
color: inherit;
}
```
ダークテーマ時も既存の CSS 変数に従い自動調整される。
### 2-4. 動作対象モード
- 4択モード・エンドレスモード・苦手集中モード の **全モード** で動作する。
- 問題表示フェーズ(回答前)のみトグルボタンを表示。正解・不正解フィードバック画面では非表示。
### 2-5. 設定の永続化
- ユーザーがトグルを「表示」にした状態で次問へ進んだ場合、次問では再び非表示にリセットする(毎問デフォルト非表示)。
- 「常に表示する」固定オプションは今回のスコープ外とする。
### 2-6. データ追加方針
既存 cards 配列の各オブジェクトに `reading` キーを追加する。日本語・中国語・韓国語カードのみ値を設定し、他言語は `reading: ""` または省略。`reading` が空文字・未定義の場合はトグルボタン自体を描画しない。
```js
// 例: 日本語カードオブジェクト
{ word: "勉強", meaning: "study / learning", reading: "べんきょう" }
// 例: 中国語カードオブジェクト
{ word: "学习", meaning: "study / learn", reading: "xuéxí" }
```
---
## 3. 既存機能との整合(壊さない点)
- `reading` フィールドは追加のみで、既存の `word`・`meaning` を使う全処理(4択選択肢生成・スコア計算・苦手リスト登録・TTS読み上げ・履歴記録)には一切手を加えない。
- TTS(Web Speech API)の読み上げ対象は引き続き `word` のみ。`reading` テキストは読み上げない。
- 学習設定モーダル・セッション履歴モーダル・バッジシステム・カレンダー等の既存UIには変更を加えない。
- `reading` が存在しないカードでも例外エラーが出ないよう `card.reading || ""` でフォールバック処理を施す。
💬 返信 (3)
🛠 開発を開始しました (機能追加 cardmaster)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「多言語フラッシュカード学習 CardMaster」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=cardmaster
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/cardmaster/
ご利用ありがとうございます!
ご要望いただいた「多言語フラッシュカード学習 CardMaster」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=cardmaster
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/cardmaster/
ご利用ありがとうございます!
Echo
Iris