GitHubを見る
01
コンタクト交換 と 眼科受診 の2カード表示
ログイン後のホーム画面で、コンタクトレンズ交換と眼科受診の前回記録日・次回予定日をそれぞれ表示します。
01
日常的なケア予定を継続管理するためのアプリ
コンタクトレンズ交換と眼科受診は周期的に発生するため、前回実施日と次回予定日を同じ画面で確認できるようにし、記録から次回予定日の計算までをアプリ内で完結できるシンプルな構成にしています。
02
コンタクトの交換や定期的な眼科の受診を忘れて目の健康が損なわれる
既存のカレンダーアプリでは多機能でわかりづらく、予定表などに手書きで記載している場合には通知されることなく見逃してしまう。
- 01
2種類の予定を別々に管理する必要がある
実装では コンタクト交換 と 眼科受診 のイベント種類を持ち、コンタクトレンズ交換と眼科受診をそれぞれ独立して記録・表示しています。
- 02
周期に応じた次回予定日の計算が必要
記録時に現在の周期設定を取得し、実施日へ日数を加算して 次回予定日 として表示されます。
- 03
通知の有効化と通知日の設定が必要
設定画面から通知ON/OFFと、イベントの種類ごとの通知日の予定前日数を変更できる設定と更新があります。
- 04
既存のカレンダーアプリの複雑さの解消が必要
既存のカレンダーアプリだと見た目のシンプルさがなく、また周期日程を柔軟に変更する場合は面倒。シンプルで使いやすさが必要。
03
主な機能
02
ワンクリック記録と次回予定日の自動計算
記録ボタンを押すと 既存設定から次回予定日を自動計算します。 既存イベントの前回記録日または次回予定日を画面上で編集でき、前回記録日を変更した場合は周期に応じて次回予定日も再計算します。 次回予定日を変更すると、通知日も自動的に変更されます。
03
外部アプリとの連携による通知機能・通知周期の設定
サイドバーから設定を開き、コンタクトレンズ交換周期、眼科受診周期、通知ON/OFF、通知日前日数を変更できます。
04
プロジェクト概要
- 期間
- 2026年（1か月程度）
- 担当
- 企画 / 設計 / 実装 / 運用
- 案件種別
- コンタクトレンズ交換と眼科受診の予定管理アプリ
- 対象ユーザー
- コンタクトレンズ交換日や眼科受診日を忘れずに管理したい個人ユーザー
Tech Stack
Next.js 16React 19TypeScriptTailwind CSS v4SupabaseOneSignalVercel Cron
05
技術的な判断
- 01
イベント履歴と設定を分けたデータ設計
`events` に記録履歴、`event_settings` にイベント種別ごとの周期、`user_settings` に通知設定を持たせる前提で実装されています。
- 02
Server Actions中心の更新フロー
記録追加、日付更新、周期更新、通知設定更新を App Router の Server Actions に分け、更新後に必要な画面を再取得する構成です。
- 03
JST基準の日付ユーティリティ
`lib/date.ts` でJSTの日付文字列取得、日付妥当性チェック、日数加算を共通化し、予定日の計算に利用しています。
- 04
通知体験を設定UIと連動
Webプッシュ機能としては外部アプリOneSignalと連携しました。 通知ON/OFFの切り替え時にOneSignalの購読状態も更新し、通知許可イベントを画面設定へ反映する実装があります。
06
今後の拡張として考えられるもの
- 交換・受診履歴を時系列で振り返れる履歴画面を追加する
- 予定日が近い項目をホーム画面でより目立つ表示にする
- 複数種類のレンズやケア用品など、管理対象を追加できる柔軟なカテゴリ機能を用意する
- 通知予定をカレンダー形式で確認できるビューを追加する
