From 5b256fa4b3e38e207eff25fdc726f47d961aff71 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Sat, 7 Nov 2026 13:58:40 +0900
Subject: park-icons.ts: 公園アイコンを指定のものに差し替え、禁止マークを調整
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- ブランコ・草地広場・野外卓を指定のアイコンに変更
- 水飲み・時計・トイレ・東屋をマップ/フキダシ/フィルターで統一
- 健康遊具のアイコンを追加
- ペット・ボール遊び禁止はアイコンに細い×を重ねる
- ボール可・試合形式のみ禁止は「試×」バッジで表示
---
src/components/ParkMap.astro | 97 ++++++++++++++++++++++++++++++---------
src/components/ParksFilters.astro | 30 ++++++++++--
src/data/park-icons.ts | 12 +++--
3 files changed, 108 insertions(+), 31 deletions(-)
(limited to 'src')
diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro
index a0a26e6..1d72565 100644
--- a/src/components/ParkMap.astro
+++ b/src/components/ParkMap.astro
@@ -127,6 +127,7 @@
margin-top: 0.1rem;
}
:global(.park-popup-ico) {
+ position: relative;
flex: none;
display: inline-flex;
align-items: center;
@@ -163,9 +164,57 @@
color: #29b6f6;
}
:global(.park-popup-ico-pet) {
- border-color: #ffcc80;
- background: #fff3e0;
- color: #ef6c00;
+ border-color: #e0e0e0;
+ background: #fff;
+ color: #6d4c41;
+ }
+ :global(.park-popup-ico-clock) {
+ border-color: #ffe082;
+ background: #fff8e1;
+ color: #f9a825;
+ }
+ :global(.park-popup-ico-toilet) {
+ border-color: #263238;
+ background: #455a64;
+ color: #fff;
+ font-size: 8px;
+ }
+ /* ボール遊びは可で試合形式だけ禁止のときに「試」バッジを並べる */
+ :global(.park-popup-ico-ball) {
+ width: auto;
+ gap: 2px;
+ padding: 0 2px;
+ }
+ :global(.park-popup-mini) {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ min-width: 14px;
+ height: 14px;
+ padding: 0 2px;
+ border: 1px solid #ffcdd2;
+ border-radius: 3px;
+ background: #ffebee;
+ color: #c62828;
+ font-size: 8px;
+ font-weight: 700;
+ line-height: 1;
+ }
+ /* 禁止の項目はアイコンの上に赤い×を重ねる */
+ :global(.park-popup-ico.is-banned) {
+ overflow: hidden;
+ }
+ :global(.park-popup-ico.is-banned)::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background:
+ linear-gradient(45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%),
+ linear-gradient(-45deg, transparent 47%, #d32f2f 47%, #d32f2f 53%, transparent 53%);
+ pointer-events: none;
}
:global(.park-popup-meta) {
margin-top: 0.1rem;
@@ -1050,9 +1099,6 @@
value.replace(/[&<>"']/g, (ch) =>
({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[ch] as string,
);
- // 水飲み場アイコン（線画の水滴。ほかの遊具アイコンと同じ線画スタイル）。
- const WATER_DROP_ICON =
- '';
const buildPopup = (ourName: string, osmName: string, owner = "", mapsQuery = "") => {
// 市外の近隣公園は kodaira-parks.json にないので、近隣データの属性を使う。
const rec = parkDataByName.get(ourName) || nearbyInfoByName.get(ourName);
@@ -1096,18 +1142,18 @@
// 項目名は1文字の文字アイコンで示す（水・ベンチ・池は絵アイコン）。
const rowIcons: Record = {
遊具: "遊",
- トイレ: "便",
- 水飲み場: WATER_DROP_ICON,
+ トイレ: "WC",
+ 水飲み場: PARK_ICONS.water.svg,
"ベンチ・椅子": PARK_ICONS.bench.svg,
野外卓: PARK_ICONS.picnic.svg,
- "シェルター等": "屋",
- 草地広場: "草",
+ "シェルター等": PARK_ICONS.shelter.svg,
+ 草地広場: PARK_ICONS.grass.svg,
多目的広場: "広",
築山: PARK_ICONS.mountain.svg,
じゃぶじゃぶ池: PARK_ICONS.pond.svg,
ボール遊び: PARK_ICONS.ball.svg,
ペット: PARK_ICONS.dog.svg,
- 時計: "時",
+ 時計: PARK_ICONS.clock.svg,
防災用具: "災",
};
const rows = [
@@ -1126,20 +1172,27 @@
["時計", presence("時計", rec?.["時計"])],
["防災用具", disaster],
].filter(([, value]) => value && String(value).trim());
+ const ROW_MOD: Record = {
+ "水飲み場": " park-popup-ico-water",
+ "ベンチ・椅子": " park-popup-ico-bench",
+ "じゃぶじゃぶ池": " park-popup-ico-pond",
+ "ペット": " park-popup-ico-pet",
+ "時計": " park-popup-ico-clock",
+ "トイレ": " park-popup-ico-toilet",
+ };
const detailHtml = rows
.map(([label, value]) => {
const labelText = String(label);
- const icoClass =
- labelText === "水飲み場"
- ? "park-popup-ico park-popup-ico-water"
- : labelText === "ベンチ・椅子"
- ? "park-popup-ico park-popup-ico-bench"
- : labelText === "じゃぶじゃぶ池"
- ? "park-popup-ico park-popup-ico-pond"
- : labelText === "ペット"
- ? "park-popup-ico park-popup-ico-pet"
- : "park-popup-ico";
- return ``;
+ const valueText = String(value);
+ const isBall = labelText === "ボール遊び";
+ // ボール遊び全体が禁止ならボールに×、試合形式だけ禁止なら「試」に×を付ける。
+ const banned = isBall ? /禁止/.test(ballText) : /禁止/.test(valueText);
+ let iconHtml = rowIcons[labelText] || "";
+ if (isBall && !banned && /禁止/.test(matchText)) {
+ iconHtml += '';
+ }
+ const icoClass = `park-popup-ico${ROW_MOD[labelText] || ""}${banned ? " is-banned" : ""}${isBall ? " park-popup-ico-ball" : ""}`;
+ return ``;
})
.join("");
const query = mapsQuery || (ourName ? `小平市${ourName}` : "");
diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index 88b78eb..a41b00b 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -55,8 +55,8 @@ const facilityTypes = [