公開スポットキャッシュの更新検知と訪問予定リスト・経路まわりの改善 (#53)

- 公開スポット・公開ルートの更新検知: 軽量API GET /api/spots/last-updated
  (公開分の最新updated_atと件数)を追加し、地図を開いたときにダウンロード済み
  キャッシュが古ければ再ダウンロードを促すダイアログを出す。比較は端末の時計に
  依存しないよう、ダウンロード時にデータから求めて保存したサーバー日時
  (StoredSpotCache.latestUpdatedAt)と行い、削除だけの変更も拾えるよう件数も
  突き合わせる。チェックの失敗(オフライン等)は黙って無視する
- スポット一覧(/[type]/spots)では未ダウンロード時・更新ありの自動ダイアログを
  出さない(useSpotCacheのautoPromptオプション。ダウンロードは地図側から促す)
- 訪問予定リストの経路の「現在地→先頭スポット」区間を現在地の青丸と同じ青
  (#1da1f2)の独立したLineStringで描き、リストの作成・編集モード中の下書き
  経路でも同じ線を引く
- 地図のスポット詳細から「訪問予定リストへ追加→新しいリストを作成→スポットを
  選ぶ」と進んだときにモーダルが閉じない問題を修正(同一ページ遷移のため
  ?buildList=1 処理で明示的に閉じる)
- スポット詳細の「Google マップで経路を表示」で、位置情報の権限が許可済みの
  ときだけ現在地をorigin(出発地)に渡す(Google マップ側が別の出発地を
  復元してしまうのを防ぐ。未許可なら従来どおりoriginなし)
- スポット詳細から既存の訪問予定リストへ追加したとき、リスト一覧を再取得して
  地図の経路表示・一覧画面の訪問予定欄に即反映する(onPlanListChange)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: rtcode337

CLAUDE.md

@@ -49,7 +49,7 @@ export async function GET(request: Request) {
 
   const { rows } = await query<SpotRoute>(
     `select r.id, r.spot_type_id, r.name, r.series, r.description,
-       r.status, r.created_by, r.created_at,
+       r.status, r.created_by, r.created_at, r.updated_at,
        coalesce(
          (select json_agg(json_build_object(
              'spot_id', p.spot_id, 'seq', p.seq,

app/api/routes/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+import { query } from "@/lib/db";
+import { getCurrentUser } from "@/lib/auth/current-user";
+import { getSpotTypeSetting, SPOT_ADMIN_ROLES, type SpotType } from "@/lib/types";
+import { SPOT_TYPE_SELECT } from "@/lib/spot-types-query";
+
+/**
+ * ダウンロード済み公開スポットキャッシュの鮮度チェック用の軽量エンドポイント。
+ * 指定種別の公開(published)スポット・公開ルートの最新updated_atと件数だけを返す
+ * (地図を開いたときに全件を取り直さずに「キャッシュが古いか」を判定するため。
+ * 件数も返すのは、削除だけが起きた場合はmax(updated_at)が変わらないため)。
+ * 認可の扱いはGET /api/spotsと同じ
+ */
+export async function GET(request: Request) {
+  const user = await getCurrentUser();
+  if (!user) {
+    return NextResponse.json({ error: "unauthorized" }, { status: 401 });
+  }
+
+  const typeKey = new URL(request.url).searchParams.get("type");
+  if (!typeKey) {
+    return NextResponse.json({ error: "type is required" }, { status: 400 });
+  }
+  const { rows: typeRows } = await query<SpotType>(
+    `${SPOT_TYPE_SELECT} where t.key = $1`,
+    [typeKey]
+  );
+  const activeType = typeRows[0];
+  if (
+    !activeType ||
+    (!getSpotTypeSetting(activeType, "public_visible") && !SPOT_ADMIN_ROLES.includes(user.role))
+  ) {
+    return NextResponse.json({ error: "存在しない種別です。" }, { status: 404 });
+  }
+
+  // ルートの経由地(spot_route_points)の入れ替えは親のspot_routesがupsertで
+  // 必ずUPDATEされる(updated_atが進む)ため、ここでは親テーブルだけ見れば足りる
+  const { rows } = await query<{
+    latest: string | null;
+    spot_count: string;
+    route_count: string;
+  }>(
+    `select
+       greatest(
+         (select max(updated_at) from spots where spot_type_id = $1 and status = 'published'),
+         (select max(updated_at) from spot_routes where spot_type_id = $1 and status = 'published')
+       ) as latest,
+       (select count(*) from spots where spot_type_id = $1 and status = 'published') as spot_count,
+       (select count(*) from spot_routes where spot_type_id = $1 and status = 'published') as route_count`,
+    [activeType.id]
+  );
+  const row = rows[0];
+  return NextResponse.json({
+    data: {
+      latest: row.latest,
+      spotCount: Number(row.spot_count),
+      routeCount: Number(row.route_count),
+    },
+  });
+}

app/api/spots/last-updated/route.ts

@@ -118,6 +118,13 @@ const VISIT_PATH_COLOR = "#16a34a";
 /** 訪問予定リスト(旅程)の経路の線・矢印の色。訪問順の経路(緑)・ルートと区別する紫 */
 const PLAN_LIST_PATH_COLOR = "#9333ea";
 
+/**
+ * 「現在地→訪問予定リスト先頭のスポット」の区間の線・矢印の色。
+ * GeolocateControlの現在地の青丸(maplibre-gl既定の.maplibregl-user-location-dot)と
+ * 同じ青にして、現在地から出ている線だと分かるようにする
+ */
+const CURRENT_LOCATION_PATH_COLOR = "#1da1f2";
+
 /**
  * ルートの進行方向を示す右向き矢印(白フチ付き)の画像を色ごとに生成して登録する。
  * symbol-placement: "line" のシンボルはライン方向に回転して置かれるため、
@@ -547,9 +554,11 @@ function buildPlanListPath(
 /**
  * ルートと、地図に重ねる色付きの経路(訪問順の経路・訪問予定リストの経路)を
  * GeoJSONのLineString群にする。矢印画像の登録もここで済ませる。
- * `start`([lng, lat])を渡した経路は、その座標を先頭に繋いで描く
- * (訪問予定リストの経路で「現在地→リスト先頭のスポット」の線を引くのに使う。
- * 経路のスポットが1件も無いときは始点だけでは線にならないため繋がない)。
+ * `start`([lng, lat])を渡した経路は、その座標からその経路の先頭までの区間を
+ * `startColor`(省略時は経路と同色)の別のLineStringとして繋いで描く
+ * (訪問予定リストの経路で「現在地→リスト先頭のスポット」の線を現在地の青丸と
+ * 同じ色で引くのに使う。経路のスポットが1件も無いときは始点だけでは線に
+ * ならないため繋がない)。
  */
 function buildRouteGeoJSON(
   map: maplibregl.Map,
@@ -560,17 +569,27 @@ function buildRouteGeoJSON(
     color: string;
     kind?: "visit" | "plan";
     start?: [number, number] | null;
+    startColor?: string;
   }[]
 ): GeoJSON.FeatureCollection<GeoJSON.LineString, RouteFeatureProps> {
   const extraFeatures: GeoJSON.Feature<GeoJSON.LineString, RouteFeatureProps>[] =
     extraPaths
-      .map((p) => ({
-        ...p,
-        coordinates: [
-          ...(p.start && p.path.length > 0 ? [p.start] : []),
-          ...p.path.map((s): [number, number] => [s.lng, s.lat]),
-        ],
-      }))
+      .flatMap((p) => [
+        // 始点(現在地)→経路先頭の区間。色を分けられるよう独立した線にする
+        ...(p.start && p.path.length > 0
+          ? [
+              {
+                ...p,
+                color: p.startColor ?? p.color,
+                coordinates: [
+                  p.start,
+                  [p.path[0].lng, p.path[0].lat] as [number, number],
+                ],
+              },
+            ]
+          : []),
+        { ...p, coordinates: p.path.map((s): [number, number] => [s.lng, s.lat]) },
+      ])
       .filter((p) => p.coordinates.length >= 2)
       .map((p) => ({
         type: "Feature" as const,
@@ -1217,6 +1236,10 @@ export default function MapView({
       // 経路詳細の「編集」から来た場合、基本情報モーダルは閉じて地図の作成モードに移る
       // (同一ページ遷移のため自動では閉じない。SpotsView からの遷移では unmount で消える)
       setEditingPlanList(null);
+      // スポット詳細の「訪問予定リストへ追加」→「新しいリストを作成」から来た場合も
+      // 同じく同一ページ遷移のため、スポット詳細(とその中の追加モーダル・基本情報
+      // フォーム)を明示的に閉じる
+      setDetailSpotId(null);
     }
   }, [buildListParam, spotTypeKey]);
 
@@ -2171,11 +2194,20 @@ export default function MapView({
             color: PLAN_LIST_PATH_COLOR,
             kind: "plan",
             // 現在地(青丸)を表示中は、現在地からリスト先頭のスポットまでも結ぶ
+            // (この区間だけ青丸と同じ青)
             start: currentLocation,
+            startColor: CURRENT_LOCATION_PATH_COLOR,
           },
           // 作成モード中の下書きの経路。kind無し=線のタップで詳細は開かない
-          // (作成中のタップはピンの追加操作を優先するため)
-          { path: buildDraftPath, color: PLAN_LIST_PATH_COLOR },
+          // (作成中のタップはピンの追加操作を優先するため)。
+          // 保存済みリストの経路表示と同じく、現在地(青丸)を表示中は
+          // 現在地から下書き先頭のスポットまでも青で結ぶ
+          {
+            path: buildDraftPath,
+            color: PLAN_LIST_PATH_COLOR,
+            start: currentLocation,
+            startColor: CURRENT_LOCATION_PATH_COLOR,
+          },
         ])
       );
     });
@@ -3185,6 +3217,9 @@ export default function MapView({
           onClose={() => setDetailSpotId(null)}
           onVisitChange={loadVisits}
           onVisitRecorded={handleVisitRecorded}
+          // 既存の訪問予定リストへの追加をリスト一覧へ反映する(経路表示中の
+          // リストに追加した場合、地図の紫の経路も引き直される)
+          onPlanListChange={loadPlanLists}
           onSpotChange={(spot) => {
             spotCache.applySpotChange(spot);
             loadPrivateSpots();

components/MapView.tsx

@@ -75,6 +75,7 @@ export default function SpotDetailModal({
   onSpotChange,
   onSpotDeleted,
   onVisitPlanChange,
+  onPlanListChange,
   onReviewChange,
 }: {
   spotId: string;
@@ -105,6 +106,9 @@ export default function SpotDetailModal({
   onSpotDeleted?: (spotId: string) => void;
   /** 訪問予定への追加・解除があったときに呼ばれる(呼び出し元の一覧の再取得用) */
   onVisitPlanChange?: () => void;
+  /** 既存の訪問予定リストへこのスポットを追加したときに呼ばれる(呼び出し元の
+   * リスト一覧の再取得用。地図なら経路表示中のリストの線にも反映される) */
+  onPlanListChange?: () => void;
   /** 口コミの投稿があったときに呼ばれる(呼び出し元の「自分が書いた口コミ」一覧の再取得用) */
   onReviewChange?: () => void;
 }) {
@@ -134,6 +138,40 @@ export default function SpotDetailModal({
   const [moderating, setModerating] = useState(false);
   // 訪問履歴のサムネイルをタップしたときに拡大表示する写真のURL
   const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  // 「Google マップで経路を表示」のorigin(出発地)に使う現在地([lat, lng])。
+  // originを指定しないとGoogle マップ側が最後に開いていた地点等を出発地にして
+  // しまうことがあるため、現在地が分かるときは明示的に渡す。ただし位置情報の
+  // 権限が既に許可されている場合のみ取得する(スポット詳細を開いただけで権限
+  // ダイアログを出さないため)。取れないときはoriginなし=従来の挙動に落とす
+  const [routeOrigin, setRouteOrigin] = useState<[number, number] | null>(null);
+
+  useEffect(() => {
+    if (typeof navigator === "undefined" || !navigator.geolocation) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const status = await navigator.permissions.query({ name: "geolocation" });
+        if (cancelled || status.state !== "granted") return;
+        navigator.geolocation.getCurrentPosition(
+          (pos) => {
+            if (!cancelled) {
+              setRouteOrigin([pos.coords.latitude, pos.coords.longitude]);
+            }
+          },
+          () => {
+            // 取得失敗(タイムアウト等)はoriginなしのままにする
+          },
+          // 地図の現在地表示(GeolocateControl)が直近に取った位置があればそれで足りる
+          { maximumAge: 60_000, timeout: 10_000 }
+        );
+      } catch {
+        // permissions APIが無い環境では従来どおりoriginなし
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   // 拡大表示中はEscキーでも閉じられるようにする
   useEffect(() => {
@@ -463,7 +501,11 @@ export default function SpotDetailModal({
                 <a
                   href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
                     `${spot.lat},${spot.lng}`
-                  )}`}
+                  )}${
+                    routeOrigin
+                      ? `&origin=${encodeURIComponent(`${routeOrigin[0]},${routeOrigin[1]}`)}`
+                      : ""
+                  }`}
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label="Google マップで経路を表示"
@@ -757,6 +799,7 @@ export default function SpotDetailModal({
           spotName={spot?.name}
           typeKey={typeKey}
           onClose={() => setShowAddToList(false)}
+          onAdded={onPlanListChange}
         />
       )}
     </div>

components/SpotDetailModal.tsx

@@ -64,34 +64,38 @@ export function DownloadProgressDialog({
 
 /**
  * 公開スポットのダウンロード確認まわりのダイアログ。
- * 未ダウンロード時の確認と、歯車メニューからの手動ダウンロード確認の両方をここでまとめて描画する
- * (/[type]/map・/[type]/spots で共通利用)。
+ * 地図を開いたときの自動確認(未ダウンロード時と、ダウンロード済みキャッシュより
+ * 新しい更新がサーバーにあるとき)と、歯車メニューからの手動ダウンロード確認の両方を
+ * ここでまとめて描画する(/[type]/map・/[type]/spots で共通利用。ただし一覧側は
+ * autoPrompt: falseで自動確認を出さないため、実際に表示されるのは地図のみ)。
  * ダウンロード中は全画面を覆う進捗ダイアログを最前面(NavBar・他ダイアログより上)に出し、
  * 完了までタブ移動などの操作をできなくする。
  */
 export default function SpotDownloadDialogs({ cache }: { cache: SpotCache }) {
   return (
     <>
-      {cache.showMissingPrompt && (
+      {cache.downloadPrompt && (
         <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 p-4">
           <div className="w-full max-w-sm rounded-2xl bg-white p-4">
             <p className="text-sm text-gray-700">
-              スポットデータが未ダウンロードです。ダウンロードしますか?
+              {cache.downloadPrompt === "stale"
+                ? "スポットデータが更新されています。最新のデータをダウンロードしますか?"
+                : "スポットデータが未ダウンロードです。ダウンロードしますか?"}
             </p>
             {cache.error && (
               <p className="mt-2 text-xs text-red-600">{cache.error}</p>
             )}
             <div className="mt-4 flex gap-2">
               <button
                 type="button"
-                onClick={cache.dismissMissingPrompt}
+                onClick={cache.dismissDownloadPrompt}
                 className="flex-1 rounded-lg border border-gray-300 py-2 text-sm"
               >
                 あとで
               </button>
               <button
                 type="button"
-                onClick={cache.confirmMissingDownload}
+                onClick={cache.confirmDownloadPrompt}
                 className="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white"
               >
                 ダウンロード

components/SpotDownloadDialogs.tsx

@@ -186,7 +186,9 @@ export default function SpotsView({
   /** 表示対象のスポット種別キー(常に /[type]/spots から渡される) */
   spotTypeKey: string;
 }) {
-  const spotCache = useSpotCache(spotTypeKey);
+  // 一覧では未ダウンロード・更新ありの自動確認ダイアログを出さない(地図側でだけ促す。
+  // 未ダウンロードのままなら公開スポット抜き=自分のスポットだけの一覧になる)
+  const spotCache = useSpotCache(spotTypeKey, { autoPrompt: false });
   const seriesStyles = useSeriesStyles(spotTypeKey);
   // 種別のカテゴリ設定。絞り込みチップの並び順に使う
   const categories = useCategories(spotTypeKey);
@@ -894,6 +896,7 @@ export default function SpotsView({
             onSpotChange={refreshAfterSpotChange}
             onSpotDeleted={refreshAfterSpotDelete}
             onVisitPlanChange={loadVisitPlans}
+            onPlanListChange={loadPlanLists}
             onReviewChange={loadMyReviews}
           />
         )}
@@ -1029,6 +1032,7 @@ export default function SpotsView({
           onSpotChange={refreshAfterSpotChange}
           onSpotDeleted={refreshAfterSpotDelete}
           onVisitPlanChange={loadVisitPlans}
+          onPlanListChange={loadPlanLists}
           onReviewChange={loadMyReviews}
         />
       )}

components/SpotsView.tsx

@@ -25,6 +25,14 @@ export type CachedSpot = Pick<
 
 export interface StoredSpotCache {
   downloadedAt: string; // ISO
+  /**
+   * ダウンロードしたデータ(公開スポット・公開ルート)の中で最も新しいupdated_at。
+   * 鮮度チェック(/api/spots/last-updated との比較)は端末の時計に依らないよう
+   * downloadedAt(端末時刻)ではなくこちら(サーバー時刻)で行う。
+   * この項目を持たない旧エントリはdownloadedAtへフォールバックする(任意項目のため
+   * DB_VERSIONは上げない)
+   */
+  latestUpdatedAt?: string | null;
   spots: CachedSpot[];
   /**
    * 公開(published)ルート。公開スポットのダウンロードと同時に取得して一緒に保存する

lib/spotCacheDb.ts

@@ -110,6 +110,12 @@ export interface SpotRoute {
   status: SpotStatus;
   created_by: string | null;
   created_at: string;
+  /**
+   * 経由地の入れ替え(upsert)でも進む。公開スポットキャッシュの鮮度判定
+   * (lib/useSpotCache.ts)に使う。旧バージョンで保存したキャッシュ内の
+   * ルートには入っていないことがある
+   */
+  updated_at: string;
   points: SpotRoutePoint[];
 }