リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 睡眠記録&質スコア SleepLog
就寝リマインダー通知機能の追加
## 1. 目的
毎日の記録継続率を高め、ユーザーが目標就寝時刻に向けて行動しやすくする。ブラウザのWeb Notifications APIを使い、外部サービス不要でプッシュ通知を実現する。
## 2. 具体的な仕様
### 2-1. 設定UI
- 設定ページ(既存の目標睡眠時間設定エリアの直下)に「就寝リマインダー」セクションを追加。
- 項目:
- リマインダーON/OFFトグル(デフォルトOFF)
- 通知時刻ピッカー(HH:MM、デフォルト23:00)
- 通知メッセージプレビュー(固定文:「そろそろ就寝の時間です。今日の睡眠を記録しましょう 🌙」)
- ONにした瞬間にブラウザの通知許可ダイアログを表示し、拒否された場合はトグルをOFFに戻し「通知を許可してください」と赤文字でインライン表示する。
- 設定値はlocalStorageに保存(キー例:`sleeplog_reminder_enabled`, `sleeplog_reminder_time`)。
### 2-2. 通知ロジック
- Service Workerは使用せず、ページ滞在中はsetIntervalで1分ごとに現在時刻と設定時刻を照合し一致したらNotification APIで通知発火。
- ページを閉じている場合の通知は対象外(シンプル実装。ユーザーにはUI上「アプリを開いている間のみ通知されます」と明記)。
- 同一日に同一時刻で2回以上通知しないよう、最終通知日をlocalStorageに記録して重複防止(キー:`sleeplog_reminder_last_notified_date`、値:YYYY-MM-DD)。
- 通知クリック時はアプリのログ入力フォームにフォーカス(`window.focus()`後、入力フォームへスクロール)。
### 2-3. スマホ/PC対応
- Web Notifications APIはChrome/Edge/Firefox/Safari(iOS16.4+PWA)で動作。非対応ブラウザでは設定セクション自体を非表示にし「お使いのブラウザは非対応です」と表示。
- 設定UIはflexboxで横並び(PC)/縦並び(スマホ375px以下)に自動切替。
## 3. 既存機能との整合
- localStorage使用キーは既存と衝突しないプレフィックス`sleeplog_reminder_`を使用。
- 設定ページのHTML/CSSに追記するのみで既存の記録・グラフ・統計・バッジ機能には一切触れない。
- CSVエクスポートやデータリセット対象外(通知設定はユーザー端末の設定値のため)。リセット時は通知設定を消さない旨をリセット確認ダイアログに一言追記するのみ。
毎日の記録継続率を高め、ユーザーが目標就寝時刻に向けて行動しやすくする。ブラウザのWeb Notifications APIを使い、外部サービス不要でプッシュ通知を実現する。
## 2. 具体的な仕様
### 2-1. 設定UI
- 設定ページ(既存の目標睡眠時間設定エリアの直下)に「就寝リマインダー」セクションを追加。
- 項目:
- リマインダーON/OFFトグル(デフォルトOFF)
- 通知時刻ピッカー(HH:MM、デフォルト23:00)
- 通知メッセージプレビュー(固定文:「そろそろ就寝の時間です。今日の睡眠を記録しましょう 🌙」)
- ONにした瞬間にブラウザの通知許可ダイアログを表示し、拒否された場合はトグルをOFFに戻し「通知を許可してください」と赤文字でインライン表示する。
- 設定値はlocalStorageに保存(キー例:`sleeplog_reminder_enabled`, `sleeplog_reminder_time`)。
### 2-2. 通知ロジック
- Service Workerは使用せず、ページ滞在中はsetIntervalで1分ごとに現在時刻と設定時刻を照合し一致したらNotification APIで通知発火。
- ページを閉じている場合の通知は対象外(シンプル実装。ユーザーにはUI上「アプリを開いている間のみ通知されます」と明記)。
- 同一日に同一時刻で2回以上通知しないよう、最終通知日をlocalStorageに記録して重複防止(キー:`sleeplog_reminder_last_notified_date`、値:YYYY-MM-DD)。
- 通知クリック時はアプリのログ入力フォームにフォーカス(`window.focus()`後、入力フォームへスクロール)。
### 2-3. スマホ/PC対応
- Web Notifications APIはChrome/Edge/Firefox/Safari(iOS16.4+PWA)で動作。非対応ブラウザでは設定セクション自体を非表示にし「お使いのブラウザは非対応です」と表示。
- 設定UIはflexboxで横並び(PC)/縦並び(スマホ375px以下)に自動切替。
## 3. 既存機能との整合
- localStorage使用キーは既存と衝突しないプレフィックス`sleeplog_reminder_`を使用。
- 設定ページのHTML/CSSに追記するのみで既存の記録・グラフ・統計・バッジ機能には一切触れない。
- CSVエクスポートやデータリセット対象外(通知設定はユーザー端末の設定値のため)。リセット時は通知設定を消さない旨をリセット確認ダイアログに一言追記するのみ。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (sleep-log))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「睡眠記録&質スコア SleepLog」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=sleep-log
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/sleep-log/
ご利用ありがとうございます!
ご要望いただいた「睡眠記録&質スコア SleepLog」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=sleep-log
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/sleep-log/
ご利用ありがとうございます!
Echo
Iris