リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: LetterVault - タイムカプセル手紙
手紙への「開封リアクション」スタンプ機能の追加
## 1. 目的
公開設定「リンク共有」「全体公開」の手紙に対し、閲覧者が開封後に感情スタンプ(リアクション)を押せる機能を追加する。手紙の書き手に「読まれた・届いた」という実感を与え、タイムカプセルを開けた感動を双方向で共有できるようにする。
---
## 2. 具体的な仕様
### 2-1. スタンプの種類(固定6種)
| 絵文字 | ラベル |
|--------|--------|
| 🥺 | じーん |
| 😭 |泣いた |
| 😊 | あたたかい |
| 🎉 | おめでとう |
| 💪 | がんばれ |
| ✨ | すてき |
### 2-2. DBテーブル追加
```sql
CREATE TABLE letter_reactions (
id INT AUTO_INCREMENT PRIMARY KEY,
letter_id VARCHAR(36) NOT NULL, -- 手紙UUID
emoji_key VARCHAR(20) NOT NULL, -- 'crying' など内部キー
reactor_session VARCHAR(36) NOT NULL, -- 閲覧者のセッションキー
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uq_reaction (letter_id, emoji_key, reactor_session) -- 1人1種1票
);
```
### 2-3. 表示条件
- **開封済みの手紙のみ**(開封日を過ぎている場合)スタンプパネルを表示する。
- 非公開手紙では表示しない。
- 自分の手紙(セッションキー一致)でもリアクションは押せる(自己確認用途として許容)。
### 2-4. UI仕様
**閲覧画面(手紙詳細ページ)**
- 本文下部に「リアクションを送る」セクションを設ける。
- 6つのスタンプボタンを横並びで表示(スマホは3×2グリッド)。
- 各ボタンに絵文字+現在の合計カウント数を表示(例: 🥺 12)。
- 自分が既に押したスタンプはボタンに金色ボーダーでハイライト。
- 同じスタンプを再クリックするとキャンセル(DELETE)。
- リアクション送信はページ遷移なし(fetch APIで非同期POST/DELETE)。
- カウントはレスポンスで受け取りその場で更新。
**マイボックス画面**
- 手紙一覧カードに「受け取ったリアクション合計数」を小さく表示(例: ✨ 7件のリアクション)。
- 0件の場合は表示しない。
**公開ギャラリー**
- 各手紙カードにリアクション合計数をバッジ表示(アイコン+数字)。
- 多い順ソートオプションを既存ソート(新着順)に追加。
### 2-5. APIエンドポイント(PHP)
- `POST /api/reaction.php` : `{letter_id, emoji_key}` → INSERT or 無視(UNIQUE制約)
- `DELETE /api/reaction.php` : `{letter_id, emoji_key}` → DELETE
- `GET /api/reaction.php?letter_id=xxx` → 各emoji_keyの件数+自分が押したキー一覧をJSON返却
- セッションキーはCookieから取得(既存セッション管理と同方式)。
### 2-6. スパム対策
- UNIQUE制約により1セッション1種1票に制限。
- 1セッションから1分以内に10回以上のリクエストはサーバー側でレート制限(カウンタをPHPセッションで管理)。
---
## 3. 既存機能との整合
- 手紙テーブル・セッション管理・公開設定ロジックは一切変更しない。
- `letter_reactions` テーブルを追加するのみでDB既存構造を壊さない。
- スタンプパネルは開封済み判定後に描画するため、開封前ロック・カウントダウン表示には影響なし。
- base64難読化・封筒アニメーションの処理フローに割り込まない。
- 非公開手紙では完全に非表示にするため、プライバシー設定の意図を損なわない。
公開設定「リンク共有」「全体公開」の手紙に対し、閲覧者が開封後に感情スタンプ(リアクション)を押せる機能を追加する。手紙の書き手に「読まれた・届いた」という実感を与え、タイムカプセルを開けた感動を双方向で共有できるようにする。
---
## 2. 具体的な仕様
### 2-1. スタンプの種類(固定6種)
| 絵文字 | ラベル |
|--------|--------|
| 🥺 | じーん |
| 😭 |泣いた |
| 😊 | あたたかい |
| 🎉 | おめでとう |
| 💪 | がんばれ |
| ✨ | すてき |
### 2-2. DBテーブル追加
```sql
CREATE TABLE letter_reactions (
id INT AUTO_INCREMENT PRIMARY KEY,
letter_id VARCHAR(36) NOT NULL, -- 手紙UUID
emoji_key VARCHAR(20) NOT NULL, -- 'crying' など内部キー
reactor_session VARCHAR(36) NOT NULL, -- 閲覧者のセッションキー
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uq_reaction (letter_id, emoji_key, reactor_session) -- 1人1種1票
);
```
### 2-3. 表示条件
- **開封済みの手紙のみ**(開封日を過ぎている場合)スタンプパネルを表示する。
- 非公開手紙では表示しない。
- 自分の手紙(セッションキー一致)でもリアクションは押せる(自己確認用途として許容)。
### 2-4. UI仕様
**閲覧画面(手紙詳細ページ)**
- 本文下部に「リアクションを送る」セクションを設ける。
- 6つのスタンプボタンを横並びで表示(スマホは3×2グリッド)。
- 各ボタンに絵文字+現在の合計カウント数を表示(例: 🥺 12)。
- 自分が既に押したスタンプはボタンに金色ボーダーでハイライト。
- 同じスタンプを再クリックするとキャンセル(DELETE)。
- リアクション送信はページ遷移なし(fetch APIで非同期POST/DELETE)。
- カウントはレスポンスで受け取りその場で更新。
**マイボックス画面**
- 手紙一覧カードに「受け取ったリアクション合計数」を小さく表示(例: ✨ 7件のリアクション)。
- 0件の場合は表示しない。
**公開ギャラリー**
- 各手紙カードにリアクション合計数をバッジ表示(アイコン+数字)。
- 多い順ソートオプションを既存ソート(新着順)に追加。
### 2-5. APIエンドポイント(PHP)
- `POST /api/reaction.php` : `{letter_id, emoji_key}` → INSERT or 無視(UNIQUE制約)
- `DELETE /api/reaction.php` : `{letter_id, emoji_key}` → DELETE
- `GET /api/reaction.php?letter_id=xxx` → 各emoji_keyの件数+自分が押したキー一覧をJSON返却
- セッションキーはCookieから取得(既存セッション管理と同方式)。
### 2-6. スパム対策
- UNIQUE制約により1セッション1種1票に制限。
- 1セッションから1分以内に10回以上のリクエストはサーバー側でレート制限(カウンタをPHPセッションで管理)。
---
## 3. 既存機能との整合
- 手紙テーブル・セッション管理・公開設定ロジックは一切変更しない。
- `letter_reactions` テーブルを追加するのみでDB既存構造を壊さない。
- スタンプパネルは開封済み判定後に描画するため、開封前ロック・カウントダウン表示には影響なし。
- base64難読化・封筒アニメーションの処理フローに割り込まない。
- 非公開手紙では完全に非表示にするため、プライバシー設定の意図を損なわない。
💬 返信 (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