アプリ概要（電話アポ / tel-availability）
🎯 目的
自分とフレンドの電話対応状況を共有・確認
https://tel-availability.vercel.app/
アプリ概要（電話アポ / tel-availability）
🔑 主要機能
- ステータス: 対応可 / 不可 / 緊急のみ
- 付随情報: 10文字メモ（編集ボタンで入力→確定でバッジ表示）
-
- プリセット: 15 / 30 / 60分・今日まで （自由入力あり）
- フレンド一覧: 検索（名前 / 状態）、ドラッグ並び替え、ピン留め、1行メモ
- 詳細表示: 行本体クリックで所属名 / 電話 / メールのモーダル
- フレンド交換: 自分のコード表示、コード入力、申請リスト（UI）
- テーマ: ライト / ダーク対応（設定から）
🛠 非機能
- PWA対応（manifest / インストール可）
- Vercel自動デプロイ（GitHub pushトリガー）
-
セキュリティ:
.env*はgit管理外、公開鍵の類はリポジトリに含めない
⚠️ 現状の制約
- 永続化なし（UIモック）。申請やプロフィールはフロントの一時状態
- 認証やRLSは未実装（将来Supabase等で追加）
- 現在実際にはフレンド交換の機能は実装していない。
📚 技術概要
スタック
- Next.js 14（App Router, TS, ESLint）
- Tailwind v4
- Radix UI
- dnd-kit
- lucide-react
- next-pwa
📂 構成
src/app/
├ layout.tsx # レイアウト
├ page.tsx # 40/60レイアウト
└ globals.css
src/components/
├ Header.tsx # ハッシュでモーダル起動: #friend-exchange, #settings
├ ProfileCard.tsx # ステータス / 付随情報 / プロフィール
├ FriendsList.tsx # 検索・DnD・ピン留め・メモ・申請モーダル
├ SettingsDialog.tsx # 設定モーダル
└ StatusBadge.tsx
src/lib/
└ supabaseClient.ts # 接続雛形のみ
💡 実装ポイント
-
DnD:
PointerSensor + verticalListSortingStrategy、DragEndEventで型安全に - 検索: フォーカスで状態サジェスト表示、選択でフィルタ・フォーカス解除、リセットボタン
- モーダル: Radix Dialog（削除確認・詳細・フレンド交換）
🚀 デプロイ方法（Vercel）
- GitHub連携 → New Project → 本リポジトリ選択
- Environment Variables（必要時）
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
- そのままDeploy（Build / Output設定はデフォルト）
🗄 将来のデータモデル（導入時）
- users(id, nickname, org, phone, email, friend_code)
- presence(user_id, status enum, note, expires_at)
- friends(user_id, friend_user_id, state, memo, pinned)
👉 認証 + RLSで「本人のみ更新 / フレンドのみ閲覧」を徹底
🗺 ロードマップ（任意）
- 永続化・認証（Supabase / Firebase）
- ステータスTTLの自動復帰（CRON）
- 監視（Sentry） / 解析（Vercel Analytics）
- PWAのオフライン最適化
今回の製作を経て
今回の製作アイデアは、電話をかけても出ないという無駄な時間を減らせるようになればいい と思い制作しました。
様々な要素を自分で付け足していけて楽しかったし、電話に限らず連絡手段全てを対象にこのアイデアを実現したいなとも思います。
実装面での気づき
ダークモードを実装したかったのですが、時間の制約上挑戦できませんでした。
実はこれは 2チャレンジ目 で、1回目は原因不明のエラーに悩まされ、1時間ほど格闘したのですが解決せず作りなおしました。
その結果、1回目よりも プロンプトの質も上がり、使用した技術スタックも変更し、格段にいいものができた ので結果オーライだと思っています。