From a81bb98c971bd9470bbba0c415b6c111f5146ad3 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Sun, 8 Nov 2026 00:48:32 +0900
Subject: 公園マップ: フィルタを分類・拡充し、地図の表示不具合を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ParksFilters.astro: フィルタを「遊具/広場・休憩/設備/利用ルール」に
分類し、パーゴラ・ボール遊び禁止の表示なし・犬禁止の表示なしを追加。
冒頭にβ版の注意書きを追加
ParkMap.astro: 全画面時のズーム調整と、小数ズーム時のタイル読込の
不具合を修正
ParksTable.astro: 絞り込みトークンを追加し、確認済みの表示を反映
park-editor: 確認チェックの自動同期と文字化けを修正
kodaira-parks.json: 水飲み場表記の統一と確認済みを反映
park-icons.ts: パーゴラのアイコンを追加
parks.mdx: 説明文を更新
---
 src/components/ParksFilters.astro | 173 ++++++++++++++++++++++++++------------
 1 file changed, 121 insertions(+), 52 deletions(-)

(limited to 'src/components/ParksFilters.astro')

diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index 576c0ff..e93b4ed 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -55,57 +55,81 @@ const facilityTypes = [
   </label>
   <fieldset class="parks-facilities">
     <legend>設備・遊具で絞る</legend>
-    <label><input type="checkbox" data-fac-filter value="toilet" /><span class="filter-wc" aria-hidden="true">WC</span>トイレ</label>
-    <label><input type="checkbox" data-fac-filter value="water" /><span class="filter-icon filter-icon-water" set:html={PARK_ICONS.water.svg} />水飲み</label>
-    <label>
-      <input type="checkbox" data-fac-filter value="picnic" />
-      <span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="table" />
-      <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />野外卓／縁台
-    </label>
-    <label><input type="checkbox" data-fac-filter value="clock" /><span class="filter-icon filter-icon-clock" set:html={PARK_ICONS.clock.svg} />時計</label>
-    <label>
-      <input type="checkbox" data-fac-filter value="sand" />
-      <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="swing" />
-      <span class="filter-icon" set:html={PARK_ICONS.swing.svg} />ブランコ
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="seesaw" />
-      <span class="filter-icon" set:html={PARK_ICONS.teeter.svg} />シーソー
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="spring" />
-      <span class="filter-icon" set:html={PARK_ICONS.spring.svg} />スイング遊具
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="toddler" />
-      <span class="filter-icon" set:html={PARK_ICONS.duck.svg} />幼児用遊具
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="jungle" />
-      <span class="filter-icon" set:html={PARK_ICONS.climbing.svg} />ジャングルジム
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="plane" />
-      <span class="filter-icon" set:html={PARK_ICONS.airplane.svg} />ヒコーキ
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="slide" />
-      <span class="filter-icon" set:html={PARK_ICONS.slide.svg} />滑り台
-    </label>
-    <label>
-      <input type="checkbox" data-fac-filter value="complex" />
-      <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具
-    </label>
-    <label><input type="checkbox" data-fac-filter value="basket" />🏀バスケゴール</label>
-    <label><input type="checkbox" data-fac-filter value="shelter" /><span class="filter-icon" set:html={PARK_ICONS.shelter.svg} />東屋／シェルター</label>
-    <label><input type="checkbox" data-fac-filter value="health" /><span class="filter-icon" set:html={PARK_ICONS.health.svg} />健康遊具</label>
-    <label><input type="checkbox" data-fac-filter value="special" /><span class="filter-icon" set:html={PARK_ICONS.special.svg} />特殊遊具</label>
+    <div class="fac-group">
+      <span class="fac-group-title">遊具</span>
+      <div class="fac-group-items">
+        <label>
+          <input type="checkbox" data-fac-filter value="sand" />
+          <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="swing" />
+          <span class="filter-icon" set:html={PARK_ICONS.swing.svg} />ブランコ
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="seesaw" />
+          <span class="filter-icon" set:html={PARK_ICONS.teeter.svg} />シーソー
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="spring" />
+          <span class="filter-icon" set:html={PARK_ICONS.spring.svg} />スイング遊具
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="toddler" />
+          <span class="filter-icon" set:html={PARK_ICONS.duck.svg} />幼児用遊具
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="jungle" />
+          <span class="filter-icon" set:html={PARK_ICONS.climbing.svg} />ジャングルジム
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="plane" />
+          <span class="filter-icon" set:html={PARK_ICONS.airplane.svg} />ヒコーキ
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="slide" />
+          <span class="filter-icon" set:html={PARK_ICONS.slide.svg} />滑り台
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="complex" />
+          <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具
+        </label>
+        <label><input type="checkbox" data-fac-filter value="basket" />🏀バスケゴール</label>
+        <label><input type="checkbox" data-fac-filter value="health" /><span class="filter-icon" set:html={PARK_ICONS.health.svg} />健康遊具</label>
+        <label><input type="checkbox" data-fac-filter value="special" /><span class="filter-icon" set:html={PARK_ICONS.special.svg} />特殊遊具</label>
+      </div>
+    </div>
+    <div class="fac-group">
+      <span class="fac-group-title">広場・休憩</span>
+      <div class="fac-group-items">
+        <label>
+          <input type="checkbox" data-fac-filter value="picnic" />
+          <span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場
+        </label>
+        <label>
+          <input type="checkbox" data-fac-filter value="table" />
+          <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />野外卓／縁台
+        </label>
+        <label><input type="checkbox" data-fac-filter value="shelter" /><span class="filter-icon" set:html={PARK_ICONS.shelter.svg} />東屋／シェルター</label>
+        <label><input type="checkbox" data-fac-filter value="pergola" /><span class="filter-icon" set:html={PARK_ICONS.pergola.svg} />パーゴラ</label>
+      </div>
+    </div>
+    <div class="fac-group">
+      <span class="fac-group-title">設備</span>
+      <div class="fac-group-items">
+        <label><input type="checkbox" data-fac-filter value="toilet" /><span class="filter-wc" aria-hidden="true">WC</span>トイレ</label>
+        <label><input type="checkbox" data-fac-filter value="water" /><span class="filter-icon filter-icon-water" set:html={PARK_ICONS.water.svg} />水飲み</label>
+        <label><input type="checkbox" data-fac-filter value="clock" /><span class="filter-icon filter-icon-clock" set:html={PARK_ICONS.clock.svg} />時計</label>
+      </div>
+    </div>
+    <div class="fac-group">
+      <span class="fac-group-title">利用ルール</span>
+      <div class="fac-group-items">
+        <label><input type="checkbox" data-fac-filter value="ballok" /><span class="filter-icon" set:html={PARK_ICONS.ball.svg} />ボール遊び禁止の表示なし</label>
+        <label><input type="checkbox" data-fac-filter value="dogok" /><span class="filter-icon" set:html={PARK_ICONS.dog.svg} />犬禁止の表示なし</label>
+        <span class="fac-note">利用ルールは実際と異なる場合があります。現地の看板などでご確認ください。</span>
+      </div>
+    </div>
   </fieldset>
   <label class="parks-fire-toggle" title="消火栓・防火水槽を地図に表示する">
     <input type="checkbox" data-show-fire />
@@ -115,7 +139,7 @@ const facilityTypes = [
 </div>
 
 <p class="parks-disclaimer">
-  情報には誤りが含まれる場合があります。最新の情報は各施設の公式ページでご確認ください。
+  現在β版のテスト中です。情報に誤りが含まれている可能性があります（特に利用ルール）。最新の情報は各施設の公式ページや現地の表示でご確認ください。遊具・設備などの一部のアイコンは、地図を拡大すると表示されます。
 </p>
 
 <style>
@@ -163,6 +187,49 @@ const facilityTypes = [
     border: 1px solid var(--sl-color-hairline, #ccc);
     border-radius: 0.3rem;
   }
+  /* フィルタを「遊具 / 広場・休憩 / 設備 / 利用ルール」にまとまりで見せる */
+  .fac-group {
+    display: flex;
+    flex: 1 0 100%;
+    align-items: flex-start;
+    gap: 0.45rem;
+  }
+  .fac-group-title {
+    flex: none;
+    width: 4rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    line-height: 1.5rem;
+    color: var(--sl-color-gray-2, #64748b);
+    text-align: right;
+  }
+  .fac-group-items {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0 0.6rem;
+  }
+  /* グループの注記（利用ルールの但し書きなど） */
+  .fac-note {
+    flex: 1 0 100%;
+    padding-top: 0.1rem;
+    font-size: 0.72rem;
+    line-height: 1.35;
+    color: var(--sl-color-gray-2, #64748b);
+  }
+  @media (max-width: 700px) {
+    .fac-group {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.1rem;
+    }
+    .fac-group-title {
+      width: auto;
+      line-height: 1.2;
+      text-align: left;
+    }
+  }
   .parks-facilities legend {
     padding: 0 0.2rem;
     font-size: 0.78em;
@@ -174,6 +241,8 @@ const facilityTypes = [
     align-items: center;
     gap: 0.2rem;
     min-height: 1.5rem;
+    /* Starlight の「label + label」の上マージンで位置がずれ、縦も伸びるため打ち消す */
+    margin: 0;
     font-size: 0.8rem;
     line-height: 1.2;
   }
-- 
cgit v1.3.1