Skip to content

Commit 5c426cb

Browse files
committed
訪問日の「過去1年」を期間だけのトグルにし、これだけを表示と独立させる
見出し行の2つのトグルを別々の軸にした。「過去1年」が決めるのは対象の期間 (1年前〜今日)、「これだけを表示」が決めるのは他のスポットを隠すかどうかで、 同時に点けられる。排他にしないのは、片方だけで使う場面が両方あるため ―― 期間だけ広げて周りのスポットも見たいことも、今日の経路だけに絞りたいこともある。 「過去1年」は handleSelectVisitDate を呼ぶだけで、isolate には触れない。 点いているかは専用のフラグではなく期間そのもの(対象日がちょうど1年前〜今日か)を 見て決める。フラグを別に持つと、カレンダー側の選択と食い違ったときに どちらが正しいのか決められなくなる。 解除したときに既定(今日)へ戻すのは変えていない。期間だけが1年のまま残ると、 1年ぶんの訪問が1本の訪問順の経路として繋がり、地図が矢印だらけになって読めなくなる。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent 6236643 commit 5c426cb

3 files changed

Lines changed: 39 additions & 49 deletions

File tree

CLAUDE.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -366,11 +366,13 @@ PATCH `/api/spot-types/[id]`は`series_styles`・`categories`を保存前に検
366366

367367
選び方は**カレンダー**(`components/VisitDateCalendar.tsx`)。絞り込みモーダルの訪問日セクションには**選択中の日(期間)を出すボタン**だけを置き、押すと**カレンダーを別モーダル(z-[60]。絞り込みモーダルのz-50の上)で開く** —— 絞り込みモーダルにカレンダーを直に置くと、他の条件を見るのに毎回その分スクロールすることになるため。**カレンダーは日を選んでも閉じない**(期間は2回のタップで決まるので、1回目で閉じると期間を選べない)。選択はその場で反映されるので、閉じる操作は「閉じる」だけでよい。
368368

369-
**よく使う期間はカレンダーを開かずに選べる。** 訪問日セクションとカレンダーに**「今日」「表示しない」**を並べ、見出し行の「これだけを表示」の隣に**過去1年だけを表示**を置いてある(`MapView``visitDateOptions`)。**1年前の日付は`Date`に年だけ引かせる**ので、2月29日は3月1日に送られる(閏年でない年に2月29日は無い)——絞り込みの範囲としては1日の差なので、月末を特別扱いはしない。
369+
**よく使う期間はカレンダーを開かずに選べる。** 訪問日セクションとカレンダーに**「今日」「表示しない」**を並べ、見出し行に**過去1年**のトグルを置いてある(`MapView``visitDateOptions`)。**1年前の日付は`Date`に年だけ引かせる**ので、2月29日は3月1日に送られる(閏年でない年に2月29日は無い)——絞り込みの範囲としては1日の差なので、月末を特別扱いはしない。
370370

371-
**「これだけを表示」と「過去1年だけを表示」は、同じ絞り(`isolate: "visit"`)の入り口が2つあるだけ**で、違うのは対象の期間だけ。押すと対象日を**1年前〜今日**にしてから絞りを掛けるので、期間を選ぶ操作が要らない(カレンダーだと開始月まで12回さかのぼって2回タップすることになる)。**`isolate`に値を増やしていない** —— 増やすと絞り込みを効かせるかの判定(`skipFiltersInIsolate`)や保存値の読み込みまで、期間の違いでしかないものを各所で分岐させることになる。期間は`visitedDate`/`visitedDateTo`が既に持っているので、**押されている側は対象日がちょうど1年前〜今日か(`isPastYearRange`)で見分ける**。この作りのおかげで2つは自動的に排他になる(条件が互いの否定になっている)。カレンダーで偶然その期間を選んだときも「過去1年だけを表示」が点くが、実際にその期間なので嘘にはならない
371+
**見出し行の2つのトグルは別々の軸。** 「過去1年」が決めるのは**対象の期間**(1年前〜今日)、「これだけを表示」が決めるのは**他のスポットを隠すかどうか**(`isolate`)で、**同時に点けられる**(過去1年に訪問したスポットだけを出す)。排他にしていないのは、片方だけで使う場面が両方あるため——期間だけ広げて周りのスポットも見たいことも、今日の経路だけに絞りたいこともある
372372

373-
**「過去1年だけを表示」を解除すると、対象日も既定(今日)へ戻す。** 絞りだけ解いて期間を1年のまま残すと、**1年ぶんの訪問が1本の訪問順の経路として繋がり**、地図が矢印だらけになって読めなくなる。
373+
**「過去1年」が点いているかは、専用のフラグではなく期間そのものを見て決める**(`isPastYearRange`=対象日がちょうど1年前〜今日か)。カレンダーで同じ期間を選んだときも点くが、実際にその期間なので嘘にはならない。フラグを別に持つと、カレンダー側の選択と食い違ったときにどちらが正しいのか決められなくなる。
374+
375+
**「過去1年」を解除すると既定(今日)へ戻す。** 期間だけが1年のまま残ると、**1年ぶんの訪問が1本の訪問順の経路として繋がり**、地図が矢印だらけになって読めなくなる。
374376

375377
**訪問記録のある日には日付の下に緑の点**を打つ(`visitDateSet`。どの日に記録があるか分からないまま総当たりで選ぶことになるのを避けるため。**他のスポット種別への訪問も数える** — 経路が種別をまたぐようになったので、その日を落とすと辿れない)。1回目のタップで開始日、2回目で終了日。既に期間が決まっている状態でのタップは新しい開始日として選び直し(範囲を狭めるのにリセットを挟まずに済む)、開始日より前をタップしたときはその日を開始日にして元の開始日を終了日にする(前方向にも伸ばせる)。同じ日を2回タップしても単日のまま。「今日」「表示しない」はよく使うので、カレンダーの中と絞り込みモーダルの両方に置く。既定値は今日。かつてはセレクト(今日 / 表示しない / 訪問のある日の一覧)だったが、期間指定とデータのある日の可視化のためカレンダーに変えた。「表示しない」(`null`)は`saveFilters`が文字列`"none"`で保存し、`loadSavedFilters`は`"none"`のときだけ`null`=表示しないにする。**「今日」(値が`todayKey()`と一致)は具体的な日付ではなく文字列`"today"`で保存し、読み込み時にその日の今日へ解決する**(日付のまま保存すると翌日に開いたとき前日が選ばれた状態で復元されてしまうため)。日付はその日、それ以外(旧仕様の絞り込みだった頃の`null`・キー欠落・不正値)は今日に倒すため、**既存ユーザーも初回から今日の経路が出る**(`todayKey`/`defaultMapFilters`)。終了日(`visitedDateTo`)は**「今日」のような相対表現を持たず具体的な日付でだけ保存する**(終了日だけ動くと期間の長さが日をまたぐたびに変わってしまうため)。カレンダーで日を選んだとき(`handleSelectVisitDate`)は、対象日(期間)をセットしたうえで**その経路全体が画面に収まるよう`fitBounds`する**(1地点だけならmaxZoomまで寄る。経路が0件・「表示しない」のときは地図を動かさない)。開始日を`null`にするときは終了日も一緒に落とす(残っていると次に日を選んだとき意図しない期間になる)。ユーザーが明示的に選んだときだけ移動し、マウント時の既定(今日)の復元では移動しない。日付キーへの変換は`toVisitDateKey`(`visits.visited_on`はtimestamptzでUTC文字列のため、**必ずローカル時刻で日を切る** — UTCのまま切ると日本時間の朝9時前の訪問が前日になる)。
376378

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
| 機能 | 説明 |
2222
|---|---|
23-
| **絞り込み** | ランク・シリーズ・訪問状態・カテゴリ・訪問日で絞れる。訪問日は「今日」をカレンダーを開かずに選べ、**「過去1年だけを表示」**でこの1年に訪問したスポットだけに絞れる |
23+
| **絞り込み** | ランク・シリーズ・訪問状態・カテゴリ・訪問日で絞れる。訪問日は「今日」「過去1年」をカレンダーを開かずに選べる |
2424
| **見た目の3軸** | **ランク**(A〜E。色と大きさ)・**シリーズ**(1スポットに1つ。ピンの中のアイコンと形)・**カテゴリ**(複数可。絞り込み専用) |
2525
| **訪問予定** | 行きたい場所のブックマーク。訪問を記録すると自動的に外れる |
2626
| **訪問予定リスト** | 複数スポットを順序付きでまとめた旅程。地図に紫の矢印で経路を描き、Googleマップの経路検索へそのまま渡せる。回り終わったリストは**アーカイブ**して一覧から下げられる(中身は残り、スポット画面の「アーカイブ」から読み直せる) |

components/MapView.tsx

Lines changed: 33 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1564,15 +1564,13 @@ export default function MapView({
15641564
() => ({ today: todayKey(), oneYearAgo: oneYearAgoKey() }),
15651565
[]
15661566
);
1567-
// 訪問日の「これだけを表示」中か。「これだけを表示」と「過去1年だけを表示」は
1568-
// 同じ絞り(isolate: "visit")の入り口が2つあるだけで、違うのは対象の期間。
1569-
// **isolateに値を増やしていない** —— 増やすと絞り込みを効かせるかの判定
1570-
// (skipFiltersInIsolate)や保存値の読み込みまで、期間の違いでしかないものを
1571-
// 各所で分岐させることになる。期間は visitedDate/visitedDateTo が既に持っている
1567+
// 訪問日セクションの2つのトグルの状態。**別々の軸**で、片方が対象の期間を、
1568+
// もう片方が他のスポットを隠すかどうかを決める(同時に点けられる)。
15721569
const isolatingVisit = filters.isolate === "visit";
1573-
// 対象日がちょうど「1年前〜今日」か。押されているボタンをこれで見分ける
1574-
// (カレンダーで同じ期間を選んだときも「過去1年だけを表示」が点くが、
1575-
// 実際にその期間なので嘘にはならない)
1570+
// 対象日がちょうど「1年前〜今日」か=「過去1年」が点いているか。
1571+
// **期間そのものを見て決める**ので、カレンダーで同じ期間を選んだときも点く
1572+
// (実際にその期間なので嘘にはならない)。専用のフラグを持つと、
1573+
// カレンダー側の選択と食い違ったときにどちらが正しいのか決められなくなる
15761574
const isPastYearRange =
15771575
filters.visitedDate === visitDateOptions.oneYearAgo &&
15781576
filters.visitedDateTo === visitDateOptions.today;
@@ -3835,60 +3833,50 @@ export default function MapView({
38353833
</HelpTip>
38363834
</p>
38373835
<div className="flex shrink-0 items-center gap-1.5">
3838-
{/* 「これだけを表示」と「過去1年だけを表示」は同じ絞り(isolate)の
3839-
入り口が2つあるだけで、違うのは対象の期間。どちらか一方しか
3840-
点かないので、押されている側を見れば期間が読める */}
3841-
{/* その日のスポットだけに絞る(他のスポット・ルート・訪問予定リストは隠す) */}
3836+
{/* 対象日を1年前〜今日にするトグル。押すだけで期間の選択が要らない
3837+
(カレンダーだと開始月まで12回さかのぼって2回タップになる)。
3838+
**「これだけを表示」とは別の軸**で、こちらが決めるのは対象の期間、
3839+
あちらが決めるのは他のスポットを隠すかどうか。
3840+
両方を同時に点けられる(過去1年に訪問したスポットだけを出す)。
3841+
解除すると既定=今日へ戻す —— 期間だけが1年のまま残ると、
3842+
1年ぶんの訪問が1本の経路として繋がって読めなくなる */}
38423843
<button
38433844
type="button"
3844-
disabled={!filters.visitedDate}
3845-
aria-pressed={isolatingVisit && !isPastYearRange}
3845+
aria-pressed={isPastYearRange}
38463846
onClick={() =>
3847-
setFilters({
3848-
...filters,
3849-
isolate: isolatingVisit ? null : "visit",
3850-
})
3847+
handleSelectVisitDate(
3848+
isPastYearRange
3849+
? visitDateOptions.today
3850+
: visitDateOptions.oneYearAgo,
3851+
isPastYearRange ? null : visitDateOptions.today
3852+
)
38513853
}
3852-
className={`shrink-0 rounded-full border px-2.5 py-0.5 text-xs font-medium disabled:opacity-40 ${
3853-
isolatingVisit && !isPastYearRange
3854+
className={`shrink-0 rounded-full border px-2.5 py-0.5 text-xs font-medium ${
3855+
isPastYearRange
38543856
? "border-blue-600 bg-blue-600 text-white"
38553857
: "border-gray-300 bg-white text-gray-500"
38563858
}`}
38573859
>
3858-
これだけを表示
3860+
過去1年
38593861
</button>
3860-
{/* 過去1年に訪問したスポットだけに絞る。対象日を1年前〜今日にしてから
3861-
同じ絞りを掛けるので、押すだけで期間の選択が要らない
3862-
(カレンダーだと開始月まで12回さかのぼることになる)。
3863-
解除すると対象日も既定=今日へ戻す —— 期間だけが1年のまま残ると、
3864-
1年ぶんの訪問が1本の経路として繋がって読めなくなる */}
3862+
{/* その日のスポットだけに絞る(他のスポット・ルート・訪問予定リストは隠す) */}
38653863
<button
38663864
type="button"
3867-
aria-pressed={isolatingVisit && isPastYearRange}
3865+
disabled={!filters.visitedDate}
3866+
aria-pressed={isolatingVisit}
38683867
onClick={() =>
3869-
setFilters(
3870-
isolatingVisit && isPastYearRange
3871-
? {
3872-
...filters,
3873-
visitedDate: visitDateOptions.today,
3874-
visitedDateTo: null,
3875-
isolate: null,
3876-
}
3877-
: {
3878-
...filters,
3879-
visitedDate: visitDateOptions.oneYearAgo,
3880-
visitedDateTo: visitDateOptions.today,
3881-
isolate: "visit",
3882-
}
3883-
)
3868+
setFilters({
3869+
...filters,
3870+
isolate: isolatingVisit ? null : "visit",
3871+
})
38843872
}
3885-
className={`shrink-0 rounded-full border px-2.5 py-0.5 text-xs font-medium ${
3886-
isolatingVisit && isPastYearRange
3873+
className={`shrink-0 rounded-full border px-2.5 py-0.5 text-xs font-medium disabled:opacity-40 ${
3874+
isolatingVisit
38873875
? "border-blue-600 bg-blue-600 text-white"
38883876
: "border-gray-300 bg-white text-gray-500"
38893877
}`}
38903878
>
3891-
過去1年だけを表示
3879+
これだけを表示
38923880
</button>
38933881
{/* このセクションだけのリセット(対象日を既定=今日に戻し、
38943882
「これだけを表示」も解除する) */}

0 commit comments

Comments
 (0)