リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 多言語フラッシュカード学習 CardMaster
学習結果画面に「このカードを苦手登録/苦手解除」ボタンを追加
## 1. 目的
4択・エンドレス・今日の復習モードの結果画面(result / 問題フィードバック画面)で、ユーザーが任意のカードを手動で苦手リストに登録・解除できるようにする。現状は「3回間違えると苦手登録」「3回連続正解で卒業」という自動ルールのみで、ユーザーが意図的に復習したいカードを即座にピン留めする手段がない。この機能追加により、間隔反復スケジューラー・苦手集中モードとの連携が強化され、学習の自律性が向上する。
## 2. 具体的な仕様
### 2-1. 対象画面
- `pages/study.php` の **1問ごとのフィードバック表示ブロック**(正解/不正解を表示する箇所)
- `pages/study.php` の **セッション終了後の全問答え合わせ画面**(result ブロック、各問の行)
### 2-2. ボタン仕様
- フィードバック画面の「次へ」ボタンの横に **「⭐ 苦手登録」または「✅ 苦手解除」** ボタンを表示
- 結果画面の各問の行末にも同様のトグルボタンを追加
- ボタンラベル:苦手未登録時 → `⭐ 苦手登録`、登録済み時 → `✅ 登録済(解除)`
- スタイル:既存の `.btn-ghost` クラスを流用し、登録済みは accent 色(黄系)でハイライト
### 2-3. データ仕様(localStorage のみ・DB変更なし)
- 既存の苦手ワード記録キー `cardmaster_weak_words`(v1.20.0〜)を利用
- 構造:`{ front_text: { lang, category, count, streak, ... } }` の既存形式に合わせ、手動登録時は `count` を最低1にセット(既存の苦手集中モードがそのまま拾える)
- 手動解除時は該当キーを削除(既存の「3回連続正解で卒業」と同じ動作)
- カードの識別は `front_text`(既存キーと同一)
### 2-4. JS実装
```javascript
// study.php 内 <script> ブロックに追記
function cmToggleWeak(frontText, lang, category, btnEl) {
const KEY = 'cardmaster_weak_words';
let weak = JSON.parse(localStorage.getItem(KEY) || '{}');
if (weak[frontText]) {
delete weak[frontText];
btnEl.textContent = '⭐ 苦手登録';
btnEl.classList.remove('weak-active');
} else {
weak[frontText] = { lang, category, count: 1, streak: 0, lastSeen: Date.now() };
btnEl.textContent = '✅ 登録済(解除)';
btnEl.classList.add('weak-active');
}
localStorage.setItem(KEY, JSON.stringify(weak));
}
function cmIsWeak(frontText) {
const weak = JSON.parse(localStorage.getItem('cardmaster_weak_words') || '{}');
return !!weak[frontText];
}
```
- ページ描画時に `cmIsWeak(frontText)` で初期状態を判定し、ボタンラベル・クラスをセット
- PHP 側から `front_text`・`lang`・`category` を data 属性としてボタン要素に埋め込む
### 2-5. CSS追記(既存スタイルと整合)
```css
.btn-weak { padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.btn-weak.weak-active { background: #fff3cd; border-color: #f0ad4e; color: #856404; }
```
## 3. 既存機能との整合(壊さない点)
- `cardmaster_weak_words` の既存エントリ形式を変更しないため、**苦手集中モード(v1.20.0)・今日のおすすめ復習(v1.14.0)・SRSスケジューラー(v1.25.0)はそのまま動作**
- DB スキーマ・PHP セッション・セッション履歴の記録ロジックは一切変更しない
- マイデッキ学習時も `front_text` は存在するため同様に機能する
- ボタン追加はフィードバックブロックへの DOM 追記のみで、既存の「次へ」「🏁 結果を見る」ボタンの動作に影響しない
## 4. 実装範囲の目安
- `pages/study.php` のフィードバックブロックと結果ブロックへのボタン HTML 追記
- 同ファイル末尾 `<script>` への JS 関数追記(約30行)
- 同ファイルまたは共通CSS への `.btn-weak` スタイル追記(約5行)
- DB変更・新規ファイル・外部API不要。スマホ/PC両対応(既存レスポンシブ踏襲)
4択・エンドレス・今日の復習モードの結果画面(result / 問題フィードバック画面)で、ユーザーが任意のカードを手動で苦手リストに登録・解除できるようにする。現状は「3回間違えると苦手登録」「3回連続正解で卒業」という自動ルールのみで、ユーザーが意図的に復習したいカードを即座にピン留めする手段がない。この機能追加により、間隔反復スケジューラー・苦手集中モードとの連携が強化され、学習の自律性が向上する。
## 2. 具体的な仕様
### 2-1. 対象画面
- `pages/study.php` の **1問ごとのフィードバック表示ブロック**(正解/不正解を表示する箇所)
- `pages/study.php` の **セッション終了後の全問答え合わせ画面**(result ブロック、各問の行)
### 2-2. ボタン仕様
- フィードバック画面の「次へ」ボタンの横に **「⭐ 苦手登録」または「✅ 苦手解除」** ボタンを表示
- 結果画面の各問の行末にも同様のトグルボタンを追加
- ボタンラベル:苦手未登録時 → `⭐ 苦手登録`、登録済み時 → `✅ 登録済(解除)`
- スタイル:既存の `.btn-ghost` クラスを流用し、登録済みは accent 色(黄系)でハイライト
### 2-3. データ仕様(localStorage のみ・DB変更なし)
- 既存の苦手ワード記録キー `cardmaster_weak_words`(v1.20.0〜)を利用
- 構造:`{ front_text: { lang, category, count, streak, ... } }` の既存形式に合わせ、手動登録時は `count` を最低1にセット(既存の苦手集中モードがそのまま拾える)
- 手動解除時は該当キーを削除(既存の「3回連続正解で卒業」と同じ動作)
- カードの識別は `front_text`(既存キーと同一)
### 2-4. JS実装
```javascript
// study.php 内 <script> ブロックに追記
function cmToggleWeak(frontText, lang, category, btnEl) {
const KEY = 'cardmaster_weak_words';
let weak = JSON.parse(localStorage.getItem(KEY) || '{}');
if (weak[frontText]) {
delete weak[frontText];
btnEl.textContent = '⭐ 苦手登録';
btnEl.classList.remove('weak-active');
} else {
weak[frontText] = { lang, category, count: 1, streak: 0, lastSeen: Date.now() };
btnEl.textContent = '✅ 登録済(解除)';
btnEl.classList.add('weak-active');
}
localStorage.setItem(KEY, JSON.stringify(weak));
}
function cmIsWeak(frontText) {
const weak = JSON.parse(localStorage.getItem('cardmaster_weak_words') || '{}');
return !!weak[frontText];
}
```
- ページ描画時に `cmIsWeak(frontText)` で初期状態を判定し、ボタンラベル・クラスをセット
- PHP 側から `front_text`・`lang`・`category` を data 属性としてボタン要素に埋め込む
### 2-5. CSS追記(既存スタイルと整合)
```css
.btn-weak { padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.btn-weak.weak-active { background: #fff3cd; border-color: #f0ad4e; color: #856404; }
```
## 3. 既存機能との整合(壊さない点)
- `cardmaster_weak_words` の既存エントリ形式を変更しないため、**苦手集中モード(v1.20.0)・今日のおすすめ復習(v1.14.0)・SRSスケジューラー(v1.25.0)はそのまま動作**
- DB スキーマ・PHP セッション・セッション履歴の記録ロジックは一切変更しない
- マイデッキ学習時も `front_text` は存在するため同様に機能する
- ボタン追加はフィードバックブロックへの DOM 追記のみで、既存の「次へ」「🏁 結果を見る」ボタンの動作に影響しない
## 4. 実装範囲の目安
- `pages/study.php` のフィードバックブロックと結果ブロックへのボタン HTML 追記
- 同ファイル末尾 `<script>` への JS 関数追記(約30行)
- 同ファイルまたは共通CSS への `.btn-weak` スタイル追記(約5行)
- DB変更・新規ファイル・外部API不要。スマホ/PC両対応(既存レスポンシブ踏襲)
💬 返信 (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