このへんにいるよ

買い物中に別行動になった家族・友人と、だいたいの位置を「レーダー」でざっくり共有するアプリ。 正確な地図やナビではなく、方角と距離だけを見せる。詳しい設計思想は design-spec.md を参照。

技術構成: Vite + TypeScript（フレームワークなし） + Supabase（DB。読み書きはRPC関数経由、5秒ごとのポーリングで同期）。

---

1. 必要なもの

• Node.js（18以上）
• Supabaseの無料アカウント（ https://supabase.com ）

2. セットアップ

2-1. 依存関係のインストール

npm install

2-2. Supabaseプロジェクトを作る

1. https://supabase.com でプロジェクトを新規作成
2. Database → Extensions で pg_cron を有効化（古いグループの自動削除に使う）
3. 左メニューの SQL Editor を開き、このリポジトリの supabase/schema.sql の中身を全部貼り付けて実行 （groups テーブルと members テーブル、読み書き用のRPC関数一式、古いグループの自動削除ジョブが作られる。テーブルへの直接アクセスは塞がれていて、必ずRPC経由になる）
4. Project Settings → API を開き、以下2つをコピーしておく
   • Project URL
   • anon public キー（新しいSupabaseでは Publishable key という名前）

既存のSupabaseプロジェクトを古い方式（テーブル直アクセスを許可するRLS）から移行する場合は、supabase/harden_rls.sql を先に実行してから supabase/schema.sql を実行してください。

2-3. 環境変数を設定

.env.example をコピーして .env を作り、2-2でコピーした値を入れる。

cp .env.example .env

VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxxxxxx

.env はGitにコミットしない（.gitignore済み）。

2-4. 起動

npm run dev

表示されたURL（http://localhost:5173 など）をブラウザで開く。

注意: 位置情報の許可ダイアログはHTTPSでないと基本的に出ない。localhost は例外的に許可されるブラウザが多いのでローカル開発では動くはずだが、スマホ実機で試す場合は同じネットワーク上でも http:// のIPアドレスだと出ないことがある（後述のVercelデプロイ後に試すのが確実）。

3. 本番デプロイ（Vercel想定）

1. このリポジトリをVercelに接続
2. Vercel側の環境変数に VITE_SUPABASE_URL と VITE_SUPABASE_ANON_KEY を設定
3. デプロイ（Build Command: npm run build / Output: dist。Viteプロジェクトなので自動検出されるはず）

Vercelは自動でHTTPSになるので、スマホでの位置情報許可もそのまま機能する。

4. 実装の中身（迷ったときに見る場所）

ファイル	役割
src/main.ts	画面遷移・位置情報の取得と送信・ポーリング・レーダー描画。ロジックの本体
src/lib/geo.ts	距離(Haversine)・方角(bearing)の計算
src/lib/colors.ts	参加順に応じたメンバーカラーの割り当て（6色パレット、6人目以降はループ）
src/lib/format.ts	距離・経過時間の表示フォーマット、グループコード生成
src/lib/supabase.ts	Supabaseクライアントの初期化
src/style.css	デザイントークン（色・フォント・角丸など）を含む全スタイル
supabase/schema.sql	DBスキーマ・RPC関数（読み書きの唯一の窓口）
supabase/harden_rls.sql	古い設定からの移行スクリプト（初回セットアップでは不要）

5. 割り切っていること（正直に書いておく）

• 認証なし。 グループコードを知っていれば誰でも読み書きできる。これは仕様書の前提どおり（「コードを知っている人には位置が見える」ことを隠さず伝える設計）。信頼できる相手とだけコードを共有する前提のアプリ。
• テーブルへの直接アクセスは全面禁止、RPC関数経由のみ。 最初のバージョンでは groups/members に「誰でも読み書きOK」というRLSを設定していたが、これだと「グループコードを知らない第三者でも、Supabaseに直接問い合わせれば全グループ・全メンバーの現在地を丸ごと取得できてしまう」という問題があった。今は直接のテーブルアクセスを塞ぎ、get_group_members(p_code) のような「指定したグループの情報だけ返す」RPC関数だけを公開している。ただし4文字のグループコードを総当たりされるリスクはゼロではない（仕様書の「コードを知っている人には見える」というモデル自体がそういう前提）。
• リアルタイム購読はやめて、5秒ごとのポーリングに一本化。 Supabase Realtime(postgres_changes)は「テーブルへの直接読み取り許可」が必要な仕組みで、上記のアクセス制限と両立しないため。仕様書 5.2 に書かれているもう一つの選択肢（3〜5秒間隔のポーリング）を採用した。
• 7日間更新のないグループは自動削除される。 Supabaseのpg_cronでcleanup_stale_groups()を毎日実行し、7日間誰も位置情報を更新していないグループをメンバーごと削除している（有効化手順は下記コメント参照）。
• 位置情報の送信間隔は8秒。バッテリー・通信量を考慮した仕様書の指示どおり。

6. 今後やるとしたら

仕様書7章と同じ：招待方法（QRコードなど）、グループの自動解散、プライバシー同意文言の整備、オフライン時の挙動。