リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: LetterVault - タイムカプセル手紙
手紙の「開封記念日リマインダー」メモ機能の追加
## 1. 目的
手紙の開封日が近づいていることをユーザーが忘れてしまうと、感動体験が損なわれる。開封日の前日・当日にマイボックス画面で目立つ通知バナーを表示し、「もうすぐ開封できる」ワクワク感を高める。外部API不要・セッションキーベースで完結する。
## 2. 具体的な仕様
### 2-1. 「もうすぐ開封」バナー(マイボックス画面)
- マイボックス(mybox.php)読み込み時、セッションキーに紐づく手紙一覧をSQLで取得する際、開封日が「本日〜3日以内」の手紙を抽出する。
- 該当手紙がある場合、一覧の最上部に黄金色のバナーを表示する。
- バナー文言例:「📬 『{タイトル}』の開封まであと{N}日!」
- 複数該当する場合はスライド式(CSSアニメーションで自動切り替え、3秒間隔)で表示。
- バナーをクリック/タップすると該当手紙の詳細ページへ遷移。
- 開封日当日の手紙は「🎉 今日が開封日です!」と強調表示し、バナー背景色をゴールドに変える。
- 既存の手紙一覧カード表示は変更しない。バナーは一覧の上に追加するだけ。
### 2-2. 手紙カードへの「開封まであとN日」バッジ
- マイボックスの手紙カードに、開封日3日以内のものは右上に小さいバッジ(例:「あと2日」「今日!」)をCSSで重ねて表示する。
- 開封済み手紙・4日以上先の手紙にはバッジを表示しない(既存表示そのまま)。
### 2-3. 実装詳細
- **PHP側**:mybox.phpのSQL取得後、PHPのDateTimeで開封日と現在日時を比較し、diff日数を計算してテンプレート変数に渡す。
- **HTML/CSS**:バナーは`<div id='reminder-banner'>`として一覧上部に挿入。バッジは手紙カードdivに`position:relative`、バッジspanに`position:absolute; top:8px; right:8px`で実装。
- **JS**:複数バナーのスライド切り替えのみ(setInterval使用、外部ライブラリ不要)。
- **DB変更なし**:既存テーブル構造・カラムを一切変更しない。letters.open_dateカラムを参照するのみ。
## 3. 既存機能との整合
- 手紙のロック・開封ロジック、リアクション機能、ギャラリー、URLシェアは一切変更しない。
- バナーとバッジはマイボックス画面のみに追加するため、詳細ページ・ギャラリーページへの影響はゼロ。
- セッションキー管理の仕組みをそのまま利用するため、ログイン不要の既存設計を維持する。
- スマホ対応:バナーはmax-width:100%・padding調整済みのレスポンシブCSS、バッジは小フォント(12px)で既存カードレイアウトを崩さない。
手紙の開封日が近づいていることをユーザーが忘れてしまうと、感動体験が損なわれる。開封日の前日・当日にマイボックス画面で目立つ通知バナーを表示し、「もうすぐ開封できる」ワクワク感を高める。外部API不要・セッションキーベースで完結する。
## 2. 具体的な仕様
### 2-1. 「もうすぐ開封」バナー(マイボックス画面)
- マイボックス(mybox.php)読み込み時、セッションキーに紐づく手紙一覧をSQLで取得する際、開封日が「本日〜3日以内」の手紙を抽出する。
- 該当手紙がある場合、一覧の最上部に黄金色のバナーを表示する。
- バナー文言例:「📬 『{タイトル}』の開封まであと{N}日!」
- 複数該当する場合はスライド式(CSSアニメーションで自動切り替え、3秒間隔)で表示。
- バナーをクリック/タップすると該当手紙の詳細ページへ遷移。
- 開封日当日の手紙は「🎉 今日が開封日です!」と強調表示し、バナー背景色をゴールドに変える。
- 既存の手紙一覧カード表示は変更しない。バナーは一覧の上に追加するだけ。
### 2-2. 手紙カードへの「開封まであとN日」バッジ
- マイボックスの手紙カードに、開封日3日以内のものは右上に小さいバッジ(例:「あと2日」「今日!」)をCSSで重ねて表示する。
- 開封済み手紙・4日以上先の手紙にはバッジを表示しない(既存表示そのまま)。
### 2-3. 実装詳細
- **PHP側**:mybox.phpのSQL取得後、PHPのDateTimeで開封日と現在日時を比較し、diff日数を計算してテンプレート変数に渡す。
- **HTML/CSS**:バナーは`<div id='reminder-banner'>`として一覧上部に挿入。バッジは手紙カードdivに`position:relative`、バッジspanに`position:absolute; top:8px; right:8px`で実装。
- **JS**:複数バナーのスライド切り替えのみ(setInterval使用、外部ライブラリ不要)。
- **DB変更なし**:既存テーブル構造・カラムを一切変更しない。letters.open_dateカラムを参照するのみ。
## 3. 既存機能との整合
- 手紙のロック・開封ロジック、リアクション機能、ギャラリー、URLシェアは一切変更しない。
- バナーとバッジはマイボックス画面のみに追加するため、詳細ページ・ギャラリーページへの影響はゼロ。
- セッションキー管理の仕組みをそのまま利用するため、ログイン不要の既存設計を維持する。
- スマホ対応:バナーはmax-width:100%・padding調整済みのレスポンシブCSS、バッジは小フォント(12px)で既存カードレイアウトを崩さない。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (lettervault))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「LetterVault - タイムカプセル手紙」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=lettervault
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/lettervault/
ご利用ありがとうございます!
ご要望いただいた「LetterVault - タイムカプセル手紙」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=lettervault
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/lettervault/
ご利用ありがとうございます!
Echo
Iris