ParksTable.astro, kodaira-data/parks.mdx: 設備をアイコン化し、指定管理のバッジ・絞り込みを追加、注記を更新

設備ラベルの文字を廃止し、バッジはアイコンのみ（ホバーでラベル表示）にした。

1 files changed, 25 insertions, 18 deletions

diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro
index 8d7f648..8121201 100644
--- a/src/components/ParksTable.astro
+++ b/src/components/ParksTable.astro
@@ -40,6 +40,9 @@ function facilityBadges(p: Park): Badge[] {
     const label = ball.includes("一部") ? "ボール遊び一部可" : "ボール遊び可";
     badges.push({ kind: "ball", label, title: `ボール遊び: ${ball}` });
   }
+  if (p["南西部指定管理"]) {
+    badges.push({ kind: "cm", label: "指定管理", title: "南西部地域の指定管理公園" });
+  }
   return badges;
 }
 
@@ -51,27 +54,28 @@ function facTokens(p: Park): string {
   if (p["遊具"]) tokens.push("toy");
   const ball = p["ボール遊び"];
   if (ball && ball !== "禁止") tokens.push("ball");
+  if (p["南西部指定管理"]) tokens.push("cm");
   return tokens.join(" ");
 }
 
 // 設備セルの補足テキスト（バッジで示した項目の詳細と、その他の項目）。
-const DETAIL_FIELDS: { key: string; label: string }[] = [
-  { key: "ベンチ・椅子", label: "ベンチ・椅子" },
-  { key: "テーブル", label: "テーブル" },
-  { key: "防災用具", label: "防災用具" },
-  { key: "遊具", label: "遊具" },
-  { key: "備考", label: "備考" },
+// ラベル文字は使わず、アイコンで項目を示す。
+const DETAIL_FIELDS: { key: string; icon: string }[] = [
+  { key: "ベンチ・椅子", icon: "🪑" },
+  { key: "テーブル", icon: "🍽" },
+  { key: "防災用具", icon: "🧯" },
+  { key: "遊具", icon: "🎠" },
+  { key: "備考", icon: "" },
 ];
 function detailText(p: Park): string {
   const parts: string[] = [];
-  if (p["南西部指定管理"]) parts.push("南西部指定管理");
-  for (const { key, label } of DETAIL_FIELDS) {
+  for (const { key, icon } of DETAIL_FIELDS) {
     const value = p[key];
     if (!value) continue;
-    parts.push(key === "備考" ? value : `${label}: ${value}`);
+    parts.push(icon ? `${icon} ${value}` : value);
   }
   const ball = p["ボール遊び"];
-  if (ball && ball !== "禁止" && ball !== "可") parts.push(`ボール遊び: ${ball}`);
+  if (ball && ball !== "禁止" && ball !== "可") parts.push(`⚽ ${ball}`);
   return parts.join(" / ");
 }
 
@@ -141,11 +145,12 @@ const total = parks.length;
       <input type="search" data-parks-search placeholder="公園名・住所・遊具など" />
     </label>
     <fieldset class="parks-facilities">
-      <legend>設備で絞る</legend>
+      <legend>設備・管理で絞る</legend>
       <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label>
       <label><input type="checkbox" data-fac-filter value="water" />水飲み場</label>
       <label><input type="checkbox" data-fac-filter value="toy" />遊具</label>
       <label><input type="checkbox" data-fac-filter value="ball" />ボール遊び</label>
+      <label><input type="checkbox" data-fac-filter value="cm" />指定管理</label>
     </fieldset>
     <span class="parks-count" data-parks-count aria-live="polite">{total}件</span>
   </div>
@@ -212,9 +217,7 @@ const total = parks.length;
             </td>
             <td class="is-facility" data-label="施設・備考">
               {facilityBadges(park).map((b) => (
-                <span class:list={["fac-badge", `fac-${b.kind}`]} title={b.title} aria-label={b.title}>
-                  {b.label}
-                </span>
+                <span class:list={["fac-badge", `fac-${b.kind}`]} title={b.title} aria-label={b.title}></span>
               ))}
               {detailText(park) ? <span class="fac-detail">{detailText(park)}</span> : null}
               {facilityBadges(park).length === 0 && !detailText(park) ? EMPTY : null}
@@ -412,14 +415,15 @@ const total = parks.length;
   .parks .fac-badge {
     display: inline-flex;
     align-items: center;
-    gap: 0.25em;
+    justify-content: center;
     margin: 0 0.3em 0.2em 0;
-    padding: 0 0.5em;
+    padding: 0 0.4em;
     border-radius: 1em;
-    font-size: 0.8em;
-    line-height: 1.8;
+    font-size: 0.85em;
+    line-height: 1.9;
     white-space: nowrap;
     background: color-mix(in srgb, currentColor 10%, transparent);
+    cursor: help;
   }
   .parks .fac-toilet::before {
     content: "🚻";
@@ -433,6 +437,9 @@ const total = parks.length;
   .parks .fac-ball::before {
     content: "⚽";
   }
+  .parks .fac-cm::before {
+    content: "🏛";
+  }
   .parks .fac-detail {
     display: block;
     margin-top: 0.25em;