リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: レシピ缶詰メーカー
レシピ履歴&「また作りたい」リピートマーク機能の追加
## 1. 目的
ユーザーが過去に閲覧・調理したレシピを自動記録し、「また作りたい」と思ったレシピにリピートマークを付けられるようにする。献立ローテーションの参考にでき、お気に入りとは別軸で「実際に作った実績」を管理できることで、毎日の料理選びの手間をさらに減らす。
## 2. 具体的な仕様
### 2-1. 閲覧履歴の自動記録
- レシピ詳細モーダルを開くたびに、そのレシピID・レシピ名・閲覧日時をLocalStorageの `recipe_history` キーに JSON 配列で追記する。
- 同一レシピを複数回開いた場合は既存エントリの `lastViewedAt` を更新し、`viewCount`(閲覧回数)をインクリメントする(重複エントリは作らない)。
- 保存上限は最新50件とし、超えた場合は古いものから自動削除する。
### 2-2. リピートマーク
- レシピ詳細モーダル内に「🔁 また作りたい」ボタンを追加する(お気に入り★ボタンの隣に配置)。
- クリックするとLocalStorageの該当エントリに `repeat: true` フラグを立て、ボタンをアクティブ状態(色変化+「登録済み」表示)にする。再クリックで解除。
### 2-3. 履歴・リピート一覧ページ(モーダル or ドロワー)
- ヘッダーまたはフッターに「📋 履歴」アイコンボタンを追加。クリックで専用ドロワー(画面右からスライドイン、PC はサイドパネル幅300px、スマホは全画面)を表示。
- ドロワー内に「すべての履歴」「リピートのみ」の2タブを用意。
- 各行にレシピ名・最終閲覧日・閲覧回数・リピートフラグアイコンを表示し、タップ/クリックで既存のレシピ詳細モーダルをそのまま開く(既存モーダルを再利用)。
- ドロワー上部に「履歴をすべて削除」ボタンを設置し、確認ダイアログ後にLocalStorageの `recipe_history` を空にする。
### 2-4. レシピカード上のバッジ表示
- 検索結果のレシピカードに、`recipe_history` に存在するレシピは「👁 閲覧済み」、`repeat: true` のレシピは「🔁 リピート」の小バッジをカード右上に重ねて表示する。
- バッジは既存カードのCSSに `position: absolute; top:8px; right:8px;` で追加し、レイアウト崩れなし。
## 3. 既存機能との整合
- すべての保存はLocalStorageの新キー `recipe_history` のみを使用し、既存の `favorites`(お気に入り)キーや `expiry_memo`(消費期限)キーには一切触れない。
- レシピ詳細モーダルはDOMを拡張するのみで、既存の材料・手順・フィルターなどのロジックは変更しない。
- ドロワーはz-indexを既存モーダル(想定z-index:1000)より低い値(例:900)に設定し、モーダルと重なった際も表示順が崩れないようにする。
- 履歴・リピート機能はオフラインで完結するためサーバー通信は発生せず、既存のPHP/MySQL構成に影響しない。
ユーザーが過去に閲覧・調理したレシピを自動記録し、「また作りたい」と思ったレシピにリピートマークを付けられるようにする。献立ローテーションの参考にでき、お気に入りとは別軸で「実際に作った実績」を管理できることで、毎日の料理選びの手間をさらに減らす。
## 2. 具体的な仕様
### 2-1. 閲覧履歴の自動記録
- レシピ詳細モーダルを開くたびに、そのレシピID・レシピ名・閲覧日時をLocalStorageの `recipe_history` キーに JSON 配列で追記する。
- 同一レシピを複数回開いた場合は既存エントリの `lastViewedAt` を更新し、`viewCount`(閲覧回数)をインクリメントする(重複エントリは作らない)。
- 保存上限は最新50件とし、超えた場合は古いものから自動削除する。
### 2-2. リピートマーク
- レシピ詳細モーダル内に「🔁 また作りたい」ボタンを追加する(お気に入り★ボタンの隣に配置)。
- クリックするとLocalStorageの該当エントリに `repeat: true` フラグを立て、ボタンをアクティブ状態(色変化+「登録済み」表示)にする。再クリックで解除。
### 2-3. 履歴・リピート一覧ページ(モーダル or ドロワー)
- ヘッダーまたはフッターに「📋 履歴」アイコンボタンを追加。クリックで専用ドロワー(画面右からスライドイン、PC はサイドパネル幅300px、スマホは全画面)を表示。
- ドロワー内に「すべての履歴」「リピートのみ」の2タブを用意。
- 各行にレシピ名・最終閲覧日・閲覧回数・リピートフラグアイコンを表示し、タップ/クリックで既存のレシピ詳細モーダルをそのまま開く(既存モーダルを再利用)。
- ドロワー上部に「履歴をすべて削除」ボタンを設置し、確認ダイアログ後にLocalStorageの `recipe_history` を空にする。
### 2-4. レシピカード上のバッジ表示
- 検索結果のレシピカードに、`recipe_history` に存在するレシピは「👁 閲覧済み」、`repeat: true` のレシピは「🔁 リピート」の小バッジをカード右上に重ねて表示する。
- バッジは既存カードのCSSに `position: absolute; top:8px; right:8px;` で追加し、レイアウト崩れなし。
## 3. 既存機能との整合
- すべての保存はLocalStorageの新キー `recipe_history` のみを使用し、既存の `favorites`(お気に入り)キーや `expiry_memo`(消費期限)キーには一切触れない。
- レシピ詳細モーダルはDOMを拡張するのみで、既存の材料・手順・フィルターなどのロジックは変更しない。
- ドロワーはz-indexを既存モーダル(想定z-index:1000)より低い値(例:900)に設定し、モーダルと重なった際も表示順が崩れないようにする。
- 履歴・リピート機能はオフラインで完結するためサーバー通信は発生せず、既存のPHP/MySQL構成に影響しない。
💬 返信 (3)
🛠 開発を開始しました (機能追加 recipe-cannery)
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「レシピ缶詰メーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=recipe-cannery
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/recipe-cannery/
ご利用ありがとうございます!
ご要望いただいた「レシピ缶詰メーカー」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=recipe-cannery
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/recipe-cannery/
ご利用ありがとうございます!
Echo
Iris