diff options
| author | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-11-07 12:17:09 +0900 |
|---|---|---|
| committer | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-11-07 12:17:09 +0900 |
| commit | 3efc9efad99e90de3eab2fc1702ef8029538c318 (patch) | |
| tree | 407c02d0d08a636220287e19609613373a6bc799 | |
| parent | fb356fecb9fd98b647d724552dd44f6545f5635c (diff) | |
ParkMap.astro: フキダシの項目名を文字アイコン化
- 水飲み場はあり/なしで表示し、水滴アイコンを塗りつぶしに変更
- じゃぶじゃぶ池の池アイコンを追加し、地図上にも表示
- 特殊遊具のアイコンを星に変更
- ベンチ・椅子をベンチの絵に変更
- 試合形式は独立行をやめ、ボール遊びに括弧書きで併記
- 防災用具から防火水槽・消火栓を除外
- 一覧表はスマホでカード表示にして横スクロールをなくす
| -rw-r--r-- | src/components/ParkMap.astro | 358 | ||||
| -rw-r--r-- | src/components/ParkMapHelp.astro | 7 | ||||
| -rw-r--r-- | src/components/ParksFilters.astro | 7 | ||||
| -rw-r--r-- | src/components/ParksTable.astro | 81 | ||||
| -rw-r--r-- | src/data/park-icons.ts | 6 |
5 files changed, 404 insertions, 55 deletions
diff --git a/src/components/ParkMap.astro b/src/components/ParkMap.astro index 8e7f35c..b7ac130 100644 --- a/src/components/ParkMap.astro +++ b/src/components/ParkMap.astro @@ -119,6 +119,62 @@ font-size: 0.78rem; cursor: pointer; } + :global(.park-popup-row) { + display: flex; + gap: 0.35rem; + align-items: flex-start; + font-size: 0.78rem; + margin-top: 0.1rem; + } + :global(.park-popup-ico) { + flex: none; + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 16px; + height: 16px; + border: 1px solid #c8e6c9; + border-radius: 4px; + background: #e8f5e9; + color: #2e7d32; + font-size: 10px; + font-weight: 700; + line-height: 1; + } + :global(.park-popup-ico svg) { + display: block; + width: 12px; + height: 12px; + } + :global(.park-popup-ico-water) { + border-color: #90caf9; + background: #e3f2fd; + color: #0277bd; + } + :global(.park-popup-ico-bench) { + border-color: #d7ccc8; + background: #efebe9; + color: #6d4c41; + } + :global(.park-popup-ico-pond) { + border-color: #81d4fa; + background: #e1f5fe; + color: #0277bd; + } + :global(.park-popup-meta) { + margin-top: 0.1rem; + color: #777; + font-size: 0.7rem; + } + :global(.park-popup-links a::after) { + content: none !important; + } + :global(.leaflet-popup-content) { + max-height: 50vh; + overflow: auto; + } + :global(.park-popup) { font-size: 0.82rem; line-height: 1.5; @@ -209,7 +265,9 @@ animation: park-selected-pulse 1.2s ease-in-out infinite; } :global(.leaflet-overlay-pane path.park-blink) { - animation: park-blink-pulse 2.6s ease-in-out infinite; + fill: #ffd54f; + stroke: #ff6d00; + animation: park-blink-pulse 2s ease-in-out infinite; } @keyframes park-selected-pulse { 0%, @@ -225,12 +283,12 @@ @keyframes park-blink-pulse { 0%, 100% { - fill-opacity: 0.6; + fill-opacity: 0.85; stroke-opacity: 1; } 50% { - fill-opacity: 0.08; - stroke-opacity: 0.3; + fill-opacity: 0.35; + stroke-opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { @@ -428,8 +486,11 @@ border-radius: 4px; } .swatch-fac-water { - background: #0277bd; + box-sizing: border-box; + border: 1px solid #0277bd; border-radius: 50%; + background: #fff; + color: #0277bd; } :global(.park-fac-markers), :global(.park-fac-list) { @@ -458,9 +519,10 @@ border-radius: 5px; } :global(.park-fac-water) { - background: #0277bd; - border: 1px solid #01579b; + border: 1px solid #0277bd; border-radius: 50%; + background: #fff; + color: #0277bd; font-size: 12px; } :global(.park-fac-clock) { @@ -531,6 +593,12 @@ font-weight: 700; line-height: 1; } + /* アイコンのクリックで公園を選択できるようにする(地図のドラッグは邪魔しない)。 */ + :global(.park-fac-markers .park-fac), + :global(.park-play-markers .park-play) { + pointer-events: auto; + cursor: pointer; + } :global(.park-play-plane) { color: #c62828; } @@ -558,6 +626,12 @@ :global(.park-play-ball) { color: #1b5e20; } + :global(.park-play-special) { + color: #f9a825; + } + :global(.park-play-pond) { + color: #0277bd; + } :global(.park-play-rope) { color: #00838f; } @@ -971,24 +1045,86 @@ value.replace(/[&<>"']/g, (ch) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[ch] as string, ); + // 水飲み場アイコン(線画の水滴。ほかの遊具アイコンと同じ線画スタイル)。 + const WATER_DROP_ICON = + '<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.2 6 7.4 6 10.3a6 6 0 0 1-12 0c0-2.9 2.5-6.1 6-10.3z"/></svg>'; const buildPopup = (ourName: string, osmName: string, owner = "", mapsQuery = "") => { - const rec = parkDataByName.get(ourName); + // 市外の近隣公園は kodaira-parks.json にないので、近隣データの属性を使う。 + const rec = parkDataByName.get(ourName) || nearbyInfoByName.get(ourName); const name = escapePopup(ourName || osmName || ""); const addr = escapePopup(rec?.["住所"] || ""); - const areaRaw = Number(rec?.["面積㎡"]); + // 近隣データは面積㎡が空で area_m2 に入っていることがある。 + const areaRaw = Number( + String(rec?.["面積㎡"] || "").trim() || rec?.["area_m2"] || 0, + ); const area = Number.isFinite(areaRaw) && areaRaw > 0 ? `${areaRaw.toLocaleString("ja-JP")}㎡` : ""; const type = escapePopup(rec?.["種別"] || ""); - const facs = [ - rec?.["トイレ"] ? "トイレ" : "", - rec?.["水飲み場"] ? "水飲み" : "", - rec?.["遊具"] ? "遊具" : "", - rec?.["シェルター等"] ? "東屋等" : "", - ] - .filter(Boolean) - .join("・"); + // 詳細行の項目名はアイコンで示し、文字量を抑える。 + const DISASTER_KEEP = /かまど|カマド|防災収納|レスキュー|防災器具|避難/; + const disaster = String(rec?.["防災用具"] || "") + .split(/[、,]/) + .map((s) => s.trim()) + .filter((s) => s && !s.includes("防火水槽") && !s.includes("消火栓")) + .filter((s) => DISASTER_KEEP.test(s)) + .join("、"); + const waterRaw = String(rec?.["水飲み場"] || "").trim(); + // 水飲み場は数量ではなく有無だけを示す。 + const water = waterRaw ? (/[??]/.test(waterRaw) ? "あり?" : "あり") : "なし"; + // ボール遊びは、試合形式の可否を括弧書きで添える。 + const ballText = String(rec?.["ボール遊び"] || "").trim(); + const matchText = String(rec?.["試合形式のボール遊び"] || "").trim(); + const ball = + ballText && matchText ? `${ballText}(試合形式${matchText})` : ballText; + // 項目名は1文字の文字アイコンで示す(水・ベンチ・池は絵アイコン)。 + const rowIcons: Record<string, string> = { + 遊具: "遊", + トイレ: "便", + 水飲み場: WATER_DROP_ICON, + "ベンチ・椅子": PARK_ICONS.bench.svg, + テーブル: "台", + "シェルター等": "屋", + 草地広場: "草", + 多目的広場: "広", + 築山: "山", + じゃぶじゃぶ池: PARK_ICONS.pond.svg, + ボール遊び: "球", + ペット: "犬", + 時計: "時", + 防災用具: "災", + }; + const rows = [ + ["遊具", rec?.["遊具"]], + ["トイレ", rec?.["トイレ"]], + ["水飲み場", water], + ["ベンチ・椅子", rec?.["ベンチ・椅子"]], + ["テーブル", rec?.["テーブル"]], + ["シェルター等", rec?.["シェルター等"]], + ["草地広場", rec?.["草地広場"]], + ["多目的広場", rec?.["多目的広場"]], + ["築山", rec?.["築山"]], + ["じゃぶじゃぶ池", rec?.["じゃぶじゃぶ池"]], + ["ボール遊び", ball], + ["ペット", rec?.["ペット"]], + ["時計", rec?.["時計"]], + ["防災用具", disaster], + ].filter(([, value]) => value && String(value).trim()); + 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" + : "park-popup-ico"; + return `<div class="park-popup-row" title="${escapePopup(labelText)}"><span class="${icoClass}" role="img" aria-label="${escapePopup(labelText)}">${rowIcons[labelText] || ""}</span><span class="park-popup-val">${escapePopup(String(value))}</span></div>`; + }) + .join(""); const query = mapsQuery || (ourName ? `小平市${ourName}` : ""); const dest = rec?.["緯度"] && rec?.["経度"] @@ -998,7 +1134,7 @@ rec?.["地図URL"] || `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`; const route = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(dest)}&travelmode=walking`; - return `<div class="park-popup"><strong>${name}</strong>${owner ? `<span class="park-popup-owner">${escapePopup(owner)}</span>` : ""}${addr || area || type ? `<div class="park-popup-meta">${[addr, area, type].filter(Boolean).join(" ・ ")}</div>` : ""}${facs ? `<div class="park-popup-fac">${facs}</div>` : ""}<div class="park-popup-links"><a href="${maps}" target="_blank" rel="noopener">🗺Gマップ</a><a href="${route}" target="_blank" rel="noopener">🚶経路</a></div></div>`; + return `<div class="park-popup"><strong>${name}</strong>${owner ? `<span class="park-popup-owner">${escapePopup(owner)}</span>` : ""}${addr || area || type ? `<div class="park-popup-meta">${[addr, area, type].filter(Boolean).join(" ・ ")}</div>` : ""}${detailHtml}<div class="park-popup-links"><a href="${maps}" target="_blank" rel="noopener">🌏GMap</a><a href="${route}" target="_blank" rel="noopener">🚶経路</a></div></div>`; }; const filterName = (name: string, scroll = false) => { @@ -1194,7 +1330,7 @@ lyr._isPoint = feature.geometry?.type === "Point"; if (name) nearbyEntries.push({ name, layer: lyr, city, key }); if (name) { - lyr.bindPopup(buildPopup(name, name, "", nearbyMapsQuery(name, city)), { + lyr.bindPopup(buildPopup(name, name, city ? `市外・${city}` : "", nearbyMapsQuery(name, city)), { maxWidth: 300, }); lyr.on("popupopen", () => { @@ -1219,6 +1355,43 @@ }, }).addTo(map); + // 遊具・設備アイコンをクリックしたときも、その公園を選択する。 + const openParkPopup = (name: string) => { + let layer: any = layersByName.get(name); + if (layer && typeof layer.getLayers === "function") { + layer = layer.getLayers()[0] || layer; + } + if (!layer) { + const entry = nearbyEntries.find((e) => e.name === name); + layer = entry?.layer || null; + } + if (!layer) return; + if (typeof layer.openPopup === "function") { + const latlng = layer.getBounds + ? layer.getBounds().getCenter() + : layer.getLatLng?.(); + layer.openPopup(latlng); + } + document.dispatchEvent( + new CustomEvent("park:select-row", { detail: { name } }), + ); + }; + // アイコンのマーカーに公園名を持たせ、クリックでその公園を選択できるようにする。 + // 地図側のクリック処理がフキダシを閉じてしまうので、伝播は止める。 + const markIconOwner = (marker: any, name: string) => { + const bind = () => { + const el = marker.getElement?.(); + if (!el || el.getAttribute("data-park") === name) return; + el.setAttribute("data-park", name); + L.DomEvent.on(el, "click", (e: any) => { + L.DomEvent.stopPropagation(e); + openParkPopup(name); + }); + }; + if (marker.getElement?.()) bind(); + else marker.on("add", bind); + }; + // 地域センター・公民館・図書館・市役所支所・文化施設。 // 市外の近隣施設はオレンジで表示する。 const publicFacilityLayer = L.layerGroup(); @@ -1307,7 +1480,7 @@ } if ((p["水飲み場"] || "").trim()) { icons.push( - '<span class="park-fac park-fac-water" title="水飲み場あり" aria-label="水飲み場あり">🚰</span>', + '<span class="park-fac park-fac-water" title="水飲み場あり" aria-label="水飲み場あり"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.2 6 7.4 6 10.3a6 6 0 0 1-12 0c0-2.9 2.5-6.1 6-10.3z"/></svg></span>', ); } const clock = (p["時計"] || "").trim(); @@ -1344,6 +1517,7 @@ riseOnHover: false, interactive: false, }).addTo(facilityLayer); + markIconOwner(marker, name); const list = facilityMarkersByName.get(name) || []; list.push(marker); facilityMarkersByName.set(name, list); @@ -1351,17 +1525,73 @@ // 拡大時だけ表示する遊具アイコン。 // 公園ポリゴンの中心に、遊具の種類を絵アイコンで表示する。 + // スイング遊具・健康遊具の判定用(一覧表の facTokens と同じ名前で判定する) + const PLAY_SPRING_TOKENS = [ + "スプリング", + "スイング", + "リトルポップ", + "リンクミニ", + "ルッキンロッキン", + "リーフィー", + "チューリー", + "ロッキンパッピー", + "ロッキンパピー", + "ビー", + "ハッピー", + "ハニー", + "クップル", + "ウゴウゴ", + ]; + const PLAY_HEALTH_TOKENS = [ + "フィットコンビ", + "レグオーバー", + "アームウォーカー", + "ホップオーバー", + "ジャンプ・ステップ", + "立位体前屈", + "懸垂", + "垂直飛び", + "閉眼片足立ち", + "腕歩行", + "リラックスボード", + "パネルラダー", + "棒とびこし", + "脚のばし", + "ふみいたストレッチ", + ]; + const PLAY_STANDARD_TOKENS = [ + "ブランコ", + "ぶらんこ", + "滑台", + "滑り台", + "すべり台", + "砂場", + "鉄棒", + "複合遊具", + "ジャングル", + "ヒコーキ", + "飛行機", + "シーソー", + // 次の遊具は「特殊遊具」扱いにしない(別の分類・設備のため) + "ロープスイング", + "ロープウェイ", + "バスケ", + ...PLAY_SPRING_TOKENS, + ...PLAY_HEALTH_TOKENS, + ]; const PLAY_DEFS = [ { tokens: ["ヒコーキ", "飛行機"], key: "airplane", title: PARK_ICONS.airplane.title, cls: "park-play-plane", icon: PARK_ICONS.airplane.svg }, { tokens: ["ジャングル"], key: "climbing", title: PARK_ICONS.climbing.title, cls: "park-play-jungle", icon: PARK_ICONS.climbing.svg }, { tokens: ["ブランコ"], key: "swing", title: PARK_ICONS.swing.title, cls: "park-play-swing", icon: PARK_ICONS.swing.svg }, { tokens: ["シーソー"], key: "seesaw", title: PARK_ICONS.teeter.title, cls: "park-play-seesaw", icon: PARK_ICONS.teeter.svg }, - { tokens: ["スプリング"], key: "spring", title: PARK_ICONS.spring.title, cls: "park-play-spring", icon: PARK_ICONS.spring.svg }, + { tokens: PLAY_SPRING_TOKENS, key: "spring", title: PARK_ICONS.spring.title, cls: "park-play-spring", icon: PARK_ICONS.spring.svg }, { tokens: ["滑り台", "滑台"], key: "slide", title: PARK_ICONS.slide.title, cls: "park-play-slide", icon: PARK_ICONS.slide.svg }, { tokens: ["ロープウェイ"], key: "flyingfox", title: PARK_ICONS.flyingfox.title, cls: "park-play-rope", icon: PARK_ICONS.flyingfox.svg }, { tokens: ["砂場"], key: "sand", title: PARK_ICONS.sand.title, cls: "park-play-sand", icon: PARK_ICONS.sand.svg }, { tokens: ["複合遊具"], key: "playground", title: PARK_ICONS.playground.title, cls: "park-play-complex", icon: PARK_ICONS.playground.svg }, { tokens: [], key: "ball", title: PARK_ICONS.ball.title, cls: "park-play-ball", icon: PARK_ICONS.ball.svg }, + { tokens: [], key: "pond", title: PARK_ICONS.pond.title, cls: "park-play-pond", icon: PARK_ICONS.pond.svg }, + { tokens: [], key: "special", title: PARK_ICONS.special.title, cls: "park-play-special", icon: PARK_ICONS.special.svg }, ]; const playLegend = document.querySelector<HTMLElement>("[data-play-legend]"); if (playLegend) { @@ -1377,14 +1607,35 @@ const text = (p["遊具"] || "").trim(); const ballText = (p["ボール遊び"] || "").trim(); const hasBall = Boolean(ballText && ballText !== "禁止"); - if (!text && !hasBall) return; + const hasPond = Boolean((p["じゃぶじゃぶ池"] || "").trim()); + if (!text && !hasBall && !hasPond) return; + const segments = text + .split(/[、,]/) + .map((s) => s.trim()) + .filter(Boolean); + // ロープスイングはスイング遊具ではないので spring には含めない。 + const isSpring = segments.some( + (seg) => + !seg.includes("ロープスイング") && + PLAY_SPRING_TOKENS.some((token) => seg.includes(token)), + ); + // 標準的な遊具名を含まない区画は「特殊遊具」とみなす(一覧表と同じ判定)。 + const isSpecial = segments.some( + (seg) => !PLAY_STANDARD_TOKENS.some((token) => seg.includes(token)), + ); const seen = new Set<string>(); const icons: string[] = []; for (const def of PLAY_DEFS) { const matched = def.key === "ball" ? hasBall - : def.tokens.some((token) => text.includes(token)); + : def.key === "pond" + ? hasPond + : def.key === "spring" + ? isSpring + : def.key === "special" + ? isSpecial + : def.tokens.some((token) => text.includes(token)); if (!matched) continue; if (seen.has(def.key)) continue; // ヒコーキジャングルはジャングルジムの一種なので、飛があればジは出さない。 @@ -1406,30 +1657,58 @@ riseOnHover: false, interactive: false, }).addTo(playLayer); + markIconOwner(marker, name); const list = playMarkersByName.get(name) || []; list.push(marker); playMarkersByName.set(name, list); }); - // 公園名のラベル(高ズーム時のみ) + // 公園名のラベル(高ズーム時のみ)。 + // 起動時に全件のマーカーを作ると重いので、画面内の公園だけを都度生成する。 const escapeHtml = (value: string) => value.replace(/[&<>"']/g, (ch) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[ch] as string, ); - const parkNameLayer = L.layerGroup(); - layersByName.forEach((lyr, name) => { + const parkCenters = Array.from(layersByName, ([name, lyr]) => { const center = centerOfLayer(lyr); - L.marker([center.lat, center.lng], { - icon: L.divIcon({ - className: "park-name-marker", - html: `<span class="park-name-label">${escapeHtml(name)}</span>`, - iconSize: null, - iconAnchor: [0, 0], - }), - interactive: false, - keyboard: false, - }).addTo(parkNameLayer); + return { name, lat: center.lat, lng: center.lng }; }); + const parkNameLayer = L.layerGroup(); + const nameMarkers = new Map<string, any>(); + const updateParkNames = () => { + if (map.getZoom() < 17) { + if (nameMarkers.size) { + nameMarkers.forEach((marker) => parkNameLayer.removeLayer(marker)); + nameMarkers.clear(); + } + if (map.hasLayer(parkNameLayer)) map.removeLayer(parkNameLayer); + return; + } + if (!map.hasLayer(parkNameLayer)) parkNameLayer.addTo(map); + const bounds = map.getBounds().pad(0.1); + const visible = new Set<string>(); + for (const p of parkCenters) { + if (!bounds.contains([p.lat, p.lng])) continue; + visible.add(p.name); + if (nameMarkers.has(p.name)) continue; + const marker = L.marker([p.lat, p.lng], { + icon: L.divIcon({ + className: "park-name-marker", + html: `<span class="park-name-label">${escapeHtml(p.name)}</span>`, + iconSize: null, + iconAnchor: [0, 0], + }), + interactive: false, + keyboard: false, + }).addTo(parkNameLayer); + nameMarkers.set(p.name, marker); + } + nameMarkers.forEach((marker, name) => { + if (visible.has(name)) return; + parkNameLayer.removeLayer(marker); + nameMarkers.delete(name); + }); + }; // フィルタ中は、該当しない公園の設備・遊具アイコンを隠す const applyIconFilter = (names: Set<string> | null) => { @@ -1459,11 +1738,6 @@ } else if (map.hasLayer(playLayer)) { map.removeLayer(playLayer); } - if (map.getZoom() >= 17) { - if (!map.hasLayer(parkNameLayer)) parkNameLayer.addTo(map); - } else if (map.hasLayer(parkNameLayer)) { - map.removeLayer(parkNameLayer); - } // 公共施設の名前はもう一段ズームしたときだけ表示する(切替時のみ実行) const showFacilityLabels = map.getZoom() >= 15; if (showFacilityLabels !== facilityLabelsShown) { @@ -1476,6 +1750,8 @@ }; map.on("zoomend", updateFacilities); updateFacilities(); + map.on("moveend", updateParkNames); + updateParkNames(); // フィルタがないときは、すべての公園を点滅させる allLayers.forEach((lyr) => { diff --git a/src/components/ParkMapHelp.astro b/src/components/ParkMapHelp.astro index e45b87f..4402567 100644 --- a/src/components/ParkMapHelp.astro +++ b/src/components/ParkMapHelp.astro @@ -14,7 +14,7 @@ <span><i class="swatch swatch-facility-nearby"></i>市外の公共施設</span> <span><i class="swatch swatch-boundary"></i>小平市の境界</span> <span><i class="swatch-fac swatch-fac-toilet">WC</i>トイレ</span> - <span><i class="swatch-fac swatch-fac-water">🚰</i>水飲み場(拡大時)</span> + <span><i class="swatch-fac swatch-fac-water"><svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5c3.5 4.2 6 7.4 6 10.3a6 6 0 0 1-12 0c0-2.9 2.5-6.1 6-10.3z"/></svg></i>水飲み場(拡大時)</span> <span><i class="swatch-fac swatch-fac-clock"><svg viewBox="0 0 24 24" width="10" height="10" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 7v5l3 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></i>時計(拡大時)</span> <span><i class="swatch-fac swatch-fac-hydrant">消</i>消火栓(拡大時)</span> <span><i class="swatch-fac swatch-fac-tank">槽</i>防火水槽(拡大時)</span> @@ -96,8 +96,11 @@ border-radius: 4px; } .swatch-fac-water { - background: #0277bd; + box-sizing: border-box; + border: 1px solid #0277bd; border-radius: 50%; + background: #fff; + color: #0277bd; } .swatch-fac-clock { background: #f9a825; diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro index 4890741..5675eb9 100644 --- a/src/components/ParksFilters.astro +++ b/src/components/ParksFilters.astro @@ -59,7 +59,7 @@ const facilityTypes = [ <label><input type="checkbox" data-fac-filter value="water" />水飲み</label> <label> <input type="checkbox" data-fac-filter value="picnic" /> - <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />緑地広場 + <span class="filter-icon filter-icon-grass" set:html={PARK_ICONS.grass.svg} />草地広場 </label> <label><input type="checkbox" data-fac-filter value="clock" />⏰時計</label> <label> @@ -97,7 +97,7 @@ const facilityTypes = [ <label><input type="checkbox" data-fac-filter value="basket" />🏀バスケゴール</label> <label><input type="checkbox" data-fac-filter value="shelter" />⛱東屋/シェルター</label> <label><input type="checkbox" data-fac-filter value="health" />💪健康遊具</label> - <label><input type="checkbox" data-fac-filter value="special" />✨特殊遊具</label> + <label><input type="checkbox" data-fac-filter value="special" /><span class="filter-icon" set:html={PARK_ICONS.special.svg} />特殊遊具</label> </fieldset> <label class="parks-fire-toggle" title="消火栓・防火水槽を地図に表示する"> <input type="checkbox" data-show-fire /> @@ -189,6 +189,9 @@ const facilityTypes = [ height: 18px; flex: none; } + .filter-icon-grass { + color: #2e7d32; + } .filter-icon :global(svg) { display: block; width: 100%; diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro index 4918b2c..f85fea3 100644 --- a/src/components/ParksTable.astro +++ b/src/components/ParksTable.astro @@ -106,7 +106,7 @@ function facilityBadges(p: Park): Badge[] { // スイング遊具・健康遊具の判定用 const SPRING_TOKENS = [ "スプリング", "スイング", "リトルポップ", "リンクミニ", "ルッキンロッキン", - "リーフィー", "チューリー", "ロッキンパッピー", "ビー", "ハッピー", + "リーフィー", "チューリー", "ロッキンパッピー", "ロッキンパピー", "ビー", "ハッピー", "ハニー", "クップル", "ウゴウゴ", ]; const HEALTH_TOKENS = [ @@ -188,17 +188,27 @@ const DETAIL_FIELDS: { key: string; icon: string }[] = [ { key: "多目的広場", icon: "🏟" }, { key: "築山", icon: "⛰" }, { key: "じゃぶじゃぶ池", icon: "💦" }, - { key: "防災用具", icon: "🧯" }, + { key: "防災用具", icon: "🛟" }, { key: "遊具", icon: "🎠" }, { key: "時計", icon: "⏰" }, { key: "駐車場", icon: "🅿" }, { key: "その他設備", icon: "🔧" }, { key: "備考", icon: "" }, ]; +function disasterText(value: string): string { + return value + .split(/[、,]/) + .map((s) => s.trim()) + .filter((s) => s && !s.includes("防火水槽") && !s.includes("消火栓")) + .filter((s) => /かまど|カマド|防災収納|レスキュー|防災器具|避難/.test(s)) + .join("、"); +} function detailText(p: Park): string { const parts: string[] = []; for (const { key, icon } of DETAIL_FIELDS) { - const value = p[key]; + const raw = p[key]; + if (!raw) continue; + const value = key === "防災用具" ? disasterText(raw) : raw; if (!value) continue; parts.push(icon ? `${icon} ${value}` : value); } @@ -705,7 +715,7 @@ function isUnconfirmed(p: Park): boolean { content: "🚻"; } .parks .fac-water::before { - content: "🚰"; + content: "💧"; } .parks .fac-toy::before { content: "🎠"; @@ -729,14 +739,67 @@ function isUnconfirmed(p: Park): boolean { opacity: 0.85; } - /* スマートフォンでも表形式を維持し、横スクロールで見られるようにする。 */ - @media (max-width: 640px) { + /* スマートフォンでは表をカード状に組み替え、横スクロールなしで読めるようにする。 */ + @media (max-width: 700px) { .parks table { - font-size: 0.75rem; + display: block; + width: 100%; + min-width: 0; + font-size: 0.8rem; + } + .parks thead { + display: none; + } + .parks tbody, + .parks tbody tr, + .parks td { + display: block; + } + .parks tbody tr { + display: grid; + grid-template-columns: 1fr auto auto; + grid-template-areas: + "name name name" + "addr area type" + "fac fac fac"; + gap: 0.15rem 0.5rem; + padding: 0.45rem 0.55rem; + border-bottom: 1px solid var(--sl-color-hairline, #ddd); + } + .parks tbody tr:nth-child(even) td { + background: transparent; + } + .parks tbody tr:nth-child(even) { + background: color-mix(in srgb, var(--sl-color-text, #333) 5%, transparent); } - .parks th, .parks td { - padding: 0.3rem 0.4rem; + border: 0; + padding: 0; + white-space: normal; + overflow-wrap: anywhere; + } + .parks .is-name { + grid-area: name; + } + .parks .is-address { + grid-area: addr; + min-width: 0; + } + .parks .is-num { + grid-area: area; + text-align: left; + } + .parks .is-type { + grid-area: type; + text-align: left; + } + .parks .is-facility { + grid-area: fac; + min-width: 0; + max-width: none; + } + .parks tbody tr.is-selected td:first-child { + box-shadow: none; } } </style> diff --git a/src/data/park-icons.ts b/src/data/park-icons.ts index a4a8a99..968fabc 100644 --- a/src/data/park-icons.ts +++ b/src/data/park-icons.ts @@ -5,11 +5,15 @@ export const PARK_ICONS: Record<string, ParkIcon> = { climbing: { title: "ジャングルジム", svg: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"currentColor\"><defs><style>.climb-cls-1{fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:1.91px;}</style></defs><line class=\"climb-cls-1\" x1=\"1.5\" y1=\"0.55\" x2=\"1.5\" y2=\"23.45\"/><line class=\"climb-cls-1\" x1=\"12\" y1=\"0.55\" x2=\"12\" y2=\"23.45\"/><line class=\"climb-cls-1\" x1=\"22.5\" y1=\"6.27\" x2=\"22.5\" y2=\"23.45\"/><line class=\"climb-cls-1\" x1=\"1.5\" y1=\"2.45\" x2=\"12\" y2=\"2.45\"/><line class=\"climb-cls-1\" x1=\"1.5\" y1=\"6.27\" x2=\"12\" y2=\"6.27\"/><line class=\"climb-cls-1\" x1=\"1.5\" y1=\"10.09\" x2=\"12\" y2=\"10.09\"/><line class=\"climb-cls-1\" x1=\"1.5\" y1=\"13.91\" x2=\"12\" y2=\"13.91\"/><line class=\"climb-cls-1\" x1=\"1.5\" y1=\"17.73\" x2=\"12\" y2=\"17.73\"/><line class=\"climb-cls-1\" x1=\"1.5\" y1=\"21.55\" x2=\"12\" y2=\"21.55\"/><line class=\"climb-cls-1\" x1=\"12\" y1=\"8.18\" x2=\"22.5\" y2=\"8.18\"/><line class=\"climb-cls-1\" x1=\"12\" y1=\"12\" x2=\"22.5\" y2=\"12\"/><line class=\"climb-cls-1\" x1=\"12\" y1=\"15.82\" x2=\"22.5\" y2=\"15.82\"/><line class=\"climb-cls-1\" x1=\"12\" y1=\"19.64\" x2=\"22.5\" y2=\"19.64\"/></svg>" }, swing: { title: "ブランコ", svg: "<svg viewBox=\"0 0 430 430\" aria-hidden=\"true\" fill=\"currentColor\"><path d=\"M412,410h-16V54.09C396,31.984,378.016,14,355.91,14h-67.432v-4c0-5.523-4.478-10-10-10s-10,4.477-10,10v4H161.521v-4 c0-5.523-4.477-10-10-10s-10,4.477-10,10v4H74.09C51.984,14,34,31.984,34,54.09V410H18c-5.523,0-10,4.477-10,10s4.477,10,10,10h52 c5.523,0,10-4.477,10-10s-4.477-10-10-10H54V54.09C54,43.012,63.012,34,74.09,34h67.432v314c0,5.523,4.477,10,10,10h126.958 c5.522,0,10-4.477,10-10V34h67.432C366.988,34,376,43.012,376,54.09V410h-16c-5.522,0-10,4.477-10,10s4.478,10,10,10h52 c5.522,0,10-4.477,10-10S417.523,410,412,410z M161.521,338v-13.383h106.958V338H161.521z M268.479,304.617H161.521V34h106.958 V304.617z\"/></svg>" }, teeter: { title: "シーソー", svg: "<svg viewBox=\"0 0 493.927 493.927\" aria-hidden=\"true\" fill=\"currentColor\"><g>\n\t<path d=\"M38.758,234.499c16.794-4.117,27.073-21.056,22.956-37.851c-4.108-16.801-21.048-27.074-37.842-22.965\n\t\tC7.072,177.801-3.209,194.74,0.907,211.534C5.025,228.337,21.964,238.607,38.758,234.499z\"/>\n\t<path d=\"M400.077,146.024c16.803-4.109,27.073-21.057,22.957-37.842c-4.11-16.802-21.049-27.074-37.835-22.965\n\t\tc-16.809,4.117-27.073,21.048-22.964,37.85C366.351,139.861,383.291,150.141,400.077,146.024z\"/>\n\t<path d=\"M493.565,256.893c-1.646-6.725-8.503-10.825-15.138-9.188l-19.46,4.77c0.327-1.818,0.205-3.71-0.098-5.618\n\t\tc-0.978-4.075-18.383-76.988-19.817-80.91c-2.593-11.021-16.6-18.929-29.381-15.823c-12.457,3.057-20.307,14.942-18.773,27.366\n\t\tl-38.96,37.369c-6.651,6.384-6.872,16.949-0.489,23.609c1.06,1.1,2.365,1.736,3.62,2.478c-5.25,2.005-8.421,7.484-7.044,13.084\n\t\tl5.91,24.155l-84.064,20.576c-5.333-5.698-12.865-9.31-21.285-9.31c-13.41,0-24.58,9.074-28.018,21.384l-79.826,19.549\n\t\tl-5.919-24.163c-1.36-5.528-6.563-8.951-12.064-8.365c0.725-1.199,1.435-2.421,1.851-3.831c2.584-8.853-2.495-18.122-11.34-20.714\n\t\tl-51.831-15.146c-4.387-11.732-16.786-18.677-29.3-15.596c-12.627,3.09-21.528,16.532-18.749,27.571\n\t\tc0.538,3.994,19.809,80.942,19.809,80.942c0.611,1.826,1.37,3.563,2.504,5.014l-19.445,4.762\n\t\tc-6.716,1.646-10.833,8.421-9.185,15.138c1.654,6.767,8.486,10.825,15.138,9.187l64.491-15.79l-3.146,19.916\n\t\tc-1.435,9.114,4.776,17.657,13.884,19.1c9.179,1.434,17.673-4.827,19.1-13.882l5.331-33.742l102.953-25.207\n\t\tc2.202,3.082,4.974,5.698,8.169,7.728l-24.961,39.448c-3.408,5.396-3.62,12.211-0.54,17.804c3.074,5.585,8.952,9.058,15.327,9.058\n\t\th51.538c6.376,0,12.253-3.473,15.327-9.058c3.081-5.593,2.869-12.408-0.539-17.804l-24.961-39.448\n\t\tc7.076-4.493,12.008-11.927,13.215-20.601l107.331-26.273l20.307,27.456c5.486,7.409,15.938,8.967,23.355,3.498\n\t\tc7.411-5.486,8.975-15.946,3.497-23.357l-11.992-16.206l64.483-15.791C491.096,270.384,495.211,263.609,493.565,256.893z\n\t\t M399.824,215.202l6.375,26.013l-28.377,6.954c-2.666,0.653-5.07,1.948-7.061,3.71l-0.789-3.227\n\t\tc-0.563-2.308-1.932-4.118-3.58-5.593c3.139-0.563,6.196-1.729,8.667-4.101L399.824,215.202z M108.589,306.043\n\t\tc1.647,0,3.245-0.311,4.784-0.775c-0.701,1.988-1.043,4.124-0.496,6.334l0.79,3.219c-2.576-0.636-5.307-0.676-7.972-0.023\n\t\tl-28.386,6.946l-6.368-26.014C74.839,296.87,104.856,306.043,108.589,306.043z\"/>\n</g></svg>" }, - spring: { title: "スプリング遊具", svg: "<svg viewBox=\"0 0 512 512\" aria-hidden=\"true\" fill=\"currentColor\"><rect x=\"99.667\" y=\"143.442\" style=\"fill:#FFE97C;\" width=\"307.853\" height=\"106.786\"/>\n<g>\n\t<polygon style=\"fill:#FFF6CC;\" points=\"99.669,238.684 99.669,154.986 10.199,173.265 10.199,220.405 \t\"/>\n\t<path style=\"fill:#FFF6CC;\" d=\"M132.379,94.377h-32.71l25.013,49.064h56.761l0,0C181.442,116.344,159.476,94.377,132.379,94.377z\"\n\t\t/>\n\t<path style=\"fill:#FFF6CC;\" d=\"M132.379,299.292h-32.71l25.013-49.064h56.761l0,0C181.442,277.326,159.476,299.292,132.379,299.292\n\t\tz\"/>\n</g>\n<g>\n\t<polygon style=\"fill:#FF9ECA;\" points=\"501.801,196.834 407.521,152.864 407.521,240.805 \t\"/>\n\t<path style=\"fill:#FF9ECA;\" d=\"M297.38,170.379h-87.571c-14.877,0-26.937-12.061-26.937-26.937l0,0h141.446l0,0\n\t\tC324.317,158.318,312.258,170.379,297.38,170.379z\"/>\n</g>\n<path style=\"fill:#FFE97C;\" d=\"M301.697,422.433h-103.9c-7.97,0-14.431-6.461-14.431-14.431l0,0c0-7.97,6.461-14.431,14.431-14.431\n\th103.9c7.97,0,14.431,6.461,14.431,14.431l0,0C316.127,415.971,309.666,422.433,301.697,422.433z\"/>\n<g>\n\t<path style=\"fill:#4D1E1E;\" d=\"M176.632,186.155h-5.773c-5.633,0-10.199,4.566-10.199,10.199c0,5.633,4.566,10.199,10.199,10.199\n\t\th5.773c5.633,0,10.199-4.566,10.199-10.199C186.831,190.721,182.265,186.155,176.632,186.155z\"/>\n\t<path style=\"fill:#4D1E1E;\" d=\"M190.746,133.242c-4.851-27.833-29.168-49.064-58.367-49.064H99.67\n\t\tc-3.548,0-6.843,1.845-8.697,4.871s-2.001,6.799-0.39,9.961l17.452,34.233H99.67c-5.633,0-10.199,4.566-10.199,10.199v3.219\n\t\tL8.158,163.272C3.41,164.242,0,168.418,0,173.265v47.14c0,4.846,3.41,9.023,8.158,9.993l81.312,16.611v3.219\n\t\tc0,5.633,4.566,10.199,10.199,10.199h8.365L90.583,294.66c-1.611,3.162-1.465,6.934,0.39,9.961\n\t\tc1.854,3.026,5.148,4.871,8.697,4.871h32.709c29.199,0,53.516-21.232,58.367-49.064h52.284c0.056,0.027,0.107,0.058,0.164,0.084\n\t\tl9.186,4.083l-34.814,5.247c-6.176,0.931-10.66,5.94-10.904,12.181c-0.244,6.242,3.835,11.585,9.92,12.997\n\t\tc0.058,0.013,0.116,0.027,0.174,0.039l25.064,5.351l-25.077,4.551c-0.05,0.009-0.101,0.019-0.151,0.029\n\t\tc-6.091,1.2-10.346,6.375-10.346,12.583c0,6.208,4.253,11.383,10.345,12.585c0.05,0.01,0.102,0.019,0.152,0.029l25.098,4.555\n\t\tl-25.862,5.526c-0.057,0.012-0.115,0.025-0.172,0.039c-6.014,1.395-10.096,6.679-9.924,12.852\n\t\tc0.172,6.172,4.541,11.221,10.623,12.279l43.458,7.559l-17.067,10.38h-45.099c-13.581,0-24.63,11.049-24.63,24.629\n\t\tc0,13.581,11.049,24.63,24.63,24.63h103.9c13.581,0,24.63-11.049,24.63-24.63c0-13.58-11.049-24.629-24.63-24.629h-19.548\n\t\tl5.636-3.428c4.611-2.804,6.943-8.042,5.938-13.345c-1.004-5.303-5.088-9.326-10.404-10.249l-24.81-4.314l25.126-5.369\n\t\tc0.057-0.012,0.115-0.026,0.172-0.039c5.947-1.379,10.029-6.605,9.927-12.708c-0.102-6.103-4.356-11.191-10.345-12.371\n\t\tc-0.05-0.01-0.1-0.019-0.15-0.029l-21.766-3.951l21.766-3.95c0.05-0.009,0.101-0.019,0.15-0.029\n\t\tc5.99-1.18,10.243-6.267,10.345-12.371c0.102-6.103-3.981-11.329-9.927-12.708c-0.058-0.013-0.116-0.027-0.174-0.039l-21.866-4.667\n\t\tl19.313-2.911c5.689-0.857,10.029-5.264,10.799-10.965c0.472-3.494-0.482-6.871-2.499-9.503h118.139\n\t\tc5.633,0,10.199-4.566,10.199-10.199v-2.925l88.391-41.224c3.592-1.676,5.888-5.28,5.888-9.244s-2.296-7.568-5.888-9.244\n\t\tl-88.391-41.224v-2.925c0-5.633-4.566-10.199-10.199-10.199h-39.827V99.767h2.307c5.633,0,10.199-4.566,10.199-10.199\n\t\tc0-5.633-4.566-10.199-10.199-10.199h-26.937c-5.633,0-10.199,4.566-10.199,10.199c0,5.633,4.566,10.199,10.199,10.199h4.232\n\t\tv33.476H190.746z M305.928,408.002c0,2.334-1.898,4.232-4.232,4.232H197.797c-2.334,0-4.232-1.898-4.232-4.232\n\t\tc0-2.334,1.898-4.231,4.232-4.231h103.9C304.03,403.771,305.928,405.669,305.928,408.002z M109.868,206.553h28.282\n\t\tc5.633,0,10.199-4.566,10.199-10.199c0-5.633-4.566-10.199-10.199-10.199h-28.282v-32.514h64.241\n\t\tc4.445,15.531,18.761,26.937,35.7,26.937h87.571c16.94,0,31.256-11.405,35.7-26.937h64.241v86.387H109.868V206.553z\n\t\t M310.644,153.641c-3.063,3.974-7.87,6.539-13.263,6.539H209.81c-5.394,0-10.2-2.565-13.263-6.539H310.644z M116.316,104.577\n\t\th16.062c17.903,0,33.017,12.167,37.508,28.666H130.93L116.316,104.577z M89.469,167.479v18.675H20.398v-4.563L89.469,167.479z\n\t\t M20.398,212.078v-5.525h69.071v19.637L20.398,212.078z M132.378,289.092h-16.062l14.614-28.666h38.955\n\t\tC165.394,276.927,150.28,289.092,132.378,289.092z M417.721,224.795v-55.92l59.951,27.96L417.721,224.795z\"/>\n</g></svg>" }, + spring: { title: "スイング遊具", svg: "<svg viewBox=\"0 0 512 512\" aria-hidden=\"true\" fill=\"currentColor\"><rect x=\"99.667\" y=\"143.442\" style=\"fill:#FFE97C;\" width=\"307.853\" height=\"106.786\"/>\n<g>\n\t<polygon style=\"fill:#FFF6CC;\" points=\"99.669,238.684 99.669,154.986 10.199,173.265 10.199,220.405 \t\"/>\n\t<path style=\"fill:#FFF6CC;\" d=\"M132.379,94.377h-32.71l25.013,49.064h56.761l0,0C181.442,116.344,159.476,94.377,132.379,94.377z\"\n\t\t/>\n\t<path style=\"fill:#FFF6CC;\" d=\"M132.379,299.292h-32.71l25.013-49.064h56.761l0,0C181.442,277.326,159.476,299.292,132.379,299.292\n\t\tz\"/>\n</g>\n<g>\n\t<polygon style=\"fill:#FF9ECA;\" points=\"501.801,196.834 407.521,152.864 407.521,240.805 \t\"/>\n\t<path style=\"fill:#FF9ECA;\" d=\"M297.38,170.379h-87.571c-14.877,0-26.937-12.061-26.937-26.937l0,0h141.446l0,0\n\t\tC324.317,158.318,312.258,170.379,297.38,170.379z\"/>\n</g>\n<path style=\"fill:#FFE97C;\" d=\"M301.697,422.433h-103.9c-7.97,0-14.431-6.461-14.431-14.431l0,0c0-7.97,6.461-14.431,14.431-14.431\n\th103.9c7.97,0,14.431,6.461,14.431,14.431l0,0C316.127,415.971,309.666,422.433,301.697,422.433z\"/>\n<g>\n\t<path style=\"fill:#4D1E1E;\" d=\"M176.632,186.155h-5.773c-5.633,0-10.199,4.566-10.199,10.199c0,5.633,4.566,10.199,10.199,10.199\n\t\th5.773c5.633,0,10.199-4.566,10.199-10.199C186.831,190.721,182.265,186.155,176.632,186.155z\"/>\n\t<path style=\"fill:#4D1E1E;\" d=\"M190.746,133.242c-4.851-27.833-29.168-49.064-58.367-49.064H99.67\n\t\tc-3.548,0-6.843,1.845-8.697,4.871s-2.001,6.799-0.39,9.961l17.452,34.233H99.67c-5.633,0-10.199,4.566-10.199,10.199v3.219\n\t\tL8.158,163.272C3.41,164.242,0,168.418,0,173.265v47.14c0,4.846,3.41,9.023,8.158,9.993l81.312,16.611v3.219\n\t\tc0,5.633,4.566,10.199,10.199,10.199h8.365L90.583,294.66c-1.611,3.162-1.465,6.934,0.39,9.961\n\t\tc1.854,3.026,5.148,4.871,8.697,4.871h32.709c29.199,0,53.516-21.232,58.367-49.064h52.284c0.056,0.027,0.107,0.058,0.164,0.084\n\t\tl9.186,4.083l-34.814,5.247c-6.176,0.931-10.66,5.94-10.904,12.181c-0.244,6.242,3.835,11.585,9.92,12.997\n\t\tc0.058,0.013,0.116,0.027,0.174,0.039l25.064,5.351l-25.077,4.551c-0.05,0.009-0.101,0.019-0.151,0.029\n\t\tc-6.091,1.2-10.346,6.375-10.346,12.583c0,6.208,4.253,11.383,10.345,12.585c0.05,0.01,0.102,0.019,0.152,0.029l25.098,4.555\n\t\tl-25.862,5.526c-0.057,0.012-0.115,0.025-0.172,0.039c-6.014,1.395-10.096,6.679-9.924,12.852\n\t\tc0.172,6.172,4.541,11.221,10.623,12.279l43.458,7.559l-17.067,10.38h-45.099c-13.581,0-24.63,11.049-24.63,24.629\n\t\tc0,13.581,11.049,24.63,24.63,24.63h103.9c13.581,0,24.63-11.049,24.63-24.63c0-13.58-11.049-24.629-24.63-24.629h-19.548\n\t\tl5.636-3.428c4.611-2.804,6.943-8.042,5.938-13.345c-1.004-5.303-5.088-9.326-10.404-10.249l-24.81-4.314l25.126-5.369\n\t\tc0.057-0.012,0.115-0.026,0.172-0.039c5.947-1.379,10.029-6.605,9.927-12.708c-0.102-6.103-4.356-11.191-10.345-12.371\n\t\tc-0.05-0.01-0.1-0.019-0.15-0.029l-21.766-3.951l21.766-3.95c0.05-0.009,0.101-0.019,0.15-0.029\n\t\tc5.99-1.18,10.243-6.267,10.345-12.371c0.102-6.103-3.981-11.329-9.927-12.708c-0.058-0.013-0.116-0.027-0.174-0.039l-21.866-4.667\n\t\tl19.313-2.911c5.689-0.857,10.029-5.264,10.799-10.965c0.472-3.494-0.482-6.871-2.499-9.503h118.139\n\t\tc5.633,0,10.199-4.566,10.199-10.199v-2.925l88.391-41.224c3.592-1.676,5.888-5.28,5.888-9.244s-2.296-7.568-5.888-9.244\n\t\tl-88.391-41.224v-2.925c0-5.633-4.566-10.199-10.199-10.199h-39.827V99.767h2.307c5.633,0,10.199-4.566,10.199-10.199\n\t\tc0-5.633-4.566-10.199-10.199-10.199h-26.937c-5.633,0-10.199,4.566-10.199,10.199c0,5.633,4.566,10.199,10.199,10.199h4.232\n\t\tv33.476H190.746z M305.928,408.002c0,2.334-1.898,4.232-4.232,4.232H197.797c-2.334,0-4.232-1.898-4.232-4.232\n\t\tc0-2.334,1.898-4.231,4.232-4.231h103.9C304.03,403.771,305.928,405.669,305.928,408.002z M109.868,206.553h28.282\n\t\tc5.633,0,10.199-4.566,10.199-10.199c0-5.633-4.566-10.199-10.199-10.199h-28.282v-32.514h64.241\n\t\tc4.445,15.531,18.761,26.937,35.7,26.937h87.571c16.94,0,31.256-11.405,35.7-26.937h64.241v86.387H109.868V206.553z\n\t\t M310.644,153.641c-3.063,3.974-7.87,6.539-13.263,6.539H209.81c-5.394,0-10.2-2.565-13.263-6.539H310.644z M116.316,104.577\n\t\th16.062c17.903,0,33.017,12.167,37.508,28.666H130.93L116.316,104.577z M89.469,167.479v18.675H20.398v-4.563L89.469,167.479z\n\t\t M20.398,212.078v-5.525h69.071v19.637L20.398,212.078z M132.378,289.092h-16.062l14.614-28.666h38.955\n\t\tC165.394,276.927,150.28,289.092,132.378,289.092z M417.721,224.795v-55.92l59.951,27.96L417.721,224.795z\"/>\n</g></svg>" }, slide: { title: "滑り台", svg: "<svg viewBox=\"0 0 32 32\" aria-hidden=\"true\" fill=\"currentColor\"><style type=\"text/css\">\n\t.slide-bentblocks_een{fill:#0B1719;}\n</style>\n<path class=\"slide-bentblocks_een\" d=\"M12,4H4v20h2v-2h4v2h2v-8.114L20,28h8L12,4z M6,6.801L6.792,8H6V6.801z M6,10h2.113l1.321,2H6V10z\n\t M10,20H6v-2h4V20z M10,16H6v-2h4V16z M7.868,6h3.062l13.333,20h-3.187L7.868,6z\"/></svg>" }, flyingfox: { title: "ロープウェイ", svg: "<svg viewBox=\"0 0 512 512\" aria-hidden=\"true\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M46.244 18l170.172 72.932 7.586 18.982L242.18 155.4l26.775 11.487-4.412 49.513c3.896-2.256 7.913-4.446 12.102-6.49l.685-.334.733-.215a38.637 38.637 0 0 1 5.28-1.15l3.018-33.858 21.488 9.216 64.54-25.793L494 209.895v-19.583L352.756 129.78c10.44-5.566 17.607-16.574 17.607-29.145 0-18.12-14.88-33-33-33-8.92 0-17.05 3.61-23.01 9.433 0-.145.01-.288.01-.433 0-18.12-14.88-33-33-33-18.12 0-33 14.88-33 33 0 3.096.443 6.093 1.254 8.94L91.937 18H46.245zm235.12 43.635c8.39 0 15 6.61 15 15s-6.61 15-15 15c-8.392 0-15-6.61-15-15s6.608-15 15-15zm56 24c8.39 0 15 6.61 15 15s-6.61 15-15 15c-8.392 0-15-6.61-15-15s6.608-15 15-15zm-32.99 14.566c0 .146-.01.29-.01.435 0 3.096.442 6.093 1.253 8.94l-8.86-3.796a33.383 33.383 0 0 0 7.618-5.58zm-55.595 23.212l77.7 33.328-18.388 7.348-51.965-22.29-7.348-18.386zm-88.813 44.465c-1.564.03-3.078.278-4.53.736-5.804 1.835-10.49 6.994-13.12 15.508-2.627 8.515-2.697 19.943.974 31.56 3.672 11.617 10.297 20.93 17.34 26.386 7.045 5.457 13.845 6.983 19.65 5.15 5.804-1.836 10.49-6.993 13.118-15.507 2.63-8.515 2.7-19.943-.972-31.56-3.672-11.617-10.296-20.927-17.34-26.384-5.283-4.093-10.428-5.977-15.12-5.89zm128.265 57.992c-1.4.004-2.946.266-4.543.68-16.685 8.293-31.973 20.153-49.28 29.423-17.458 9.35-37.674 15.72-61.853 10.865-11.962-1.176-16.464 4.17-17.71 9.943-1.218 5.632.82 12.564 11.155 16.76 55.347 5.065 101.237-31.265 126.685-52.144.002 0 0-.002.002-.003 4.028-3.38 5.42-6.192 5.8-7.913.38-1.72.105-2.63-.76-3.83-1.296-1.8-4.77-3.796-9.498-3.78zm-115.675 40.968c.095.01.18.01.277.02l-.883-.137c.204.043.404.077.607.118zm104.746 9.178c-5.806 4.074-12.11 8.176-18.862 12.086 4.013 9.28 7.354 19.894 9.945 31.99 1.61.113 3.294.26 4.955.398l3.963-44.474zm-34.82 20.457c-20.36 9.566-43.922 16.344-69.917 15.54 2.902 4.44 6.194 8.82 9.725 13.038 5.8 6.925 12.3 13.454 18.59 19.218 7.647-1.047 19.705-4.422 30-9.143 6.385-2.927 12.267-6.335 16.405-9.57a29.504 29.504 0 0 0 3.274-2.98c-2.216-10.03-4.95-18.662-8.078-26.102zm17.345 42.033c-.493.404-.95.832-1.457 1.228-5.738 4.487-12.654 8.39-19.985 11.752-6.59 3.022-13.37 5.63-19.96 7.563 5.682 4.404 9.88 7.312 11.093 8.052 8.19 5.004 20.968 8.01 34.627 9.54 3.935-12.394.912-24.61-4.317-38.136zm19.342.512c4.085 12.243 6.466 25.26 3.312 38.824 2.596.06 5.167.077 7.684.05 21.71-.245 39.418-2.925 39.418-2.925l14.576-2.213-4.693 13.976c-7.496 22.323-10.164 38.087-17.156 59.038l55.614 24.933 9.418-18.973-39.594-16.97 4.678-8.667c3.575-6.625 9.348-20.202 13.79-33.983 3.962-12.288 6.61-24.973 6.827-32.623-.047-.03-.026-.033-.076-.062-1.7-1.004-4.682-2.357-8.45-3.71-7.535-2.71-18.256-5.546-30.214-8.087-17.38-3.692-37.464-6.792-55.133-8.607zm32.142 55.933c-5.626.428-12.035.78-18.986.905l-26.097 43.653 35.194 11.67 1.342-3.64a265.75 265.75 0 0 0 4.83-14.364l-14.076-5.15 17.793-33.073z\"/></svg>" }, sand: { title: "砂場", svg: "<svg viewBox=\"0 0 100 100\" aria-hidden=\"true\" fill=\"currentColor\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M92.3,8.2C92.2,8,92,7.8,91.8,7.7C76,0.6,57.2,4.1,45,16.3L25.8,35.4c-0.4,0.4-0.4,1,0,1.4l12.6,12.6l-4.8,4.8 c-1.5-1.4-4-1.3-5.5,0.1L4.9,77.7c-1.6,1.6-1.6,4.1,0,5.7l11.8,11.8c0.8,0.8,1.8,1.2,2.8,1.2s2.1-0.4,2.8-1.2l23.3-23.3 c1.5-1.5,1.5-3.9,0.1-5.5l4.8-4.8l12.6,12.6c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3L83.7,55C95.9,42.8,99.4,24,92.3,8.2z M44.3,64.9l-9.3-9.2l5.5-5.5c0,0,0,0,0,0s0,0,0,0l2.3-2.3c0.8-0.8,2.1-0.8,2.8,0l6.4,6.4c0.8,0.8,0.8,2,0,2.8L44.3,64.9z M44.2,70.4L20.8,93.7c-0.8,0.8-2.1,0.8-2.8,0L6.3,82c-0.8-0.8-0.8-2,0-2.8l23.3-23.3c0.4-0.4,0.9-0.6,1.4-0.6s1,0.2,1.4,0.6 l0.5,0.5l0,0l10.7,10.7c0,0,0,0,0,0l0.5,0.5C44.9,68.4,44.9,69.6,44.2,70.4z M82.3,53.6L63.9,72L52,60.1l1.6-1.6 c1.6-1.6,1.6-4.1,0-5.7l-6.4-6.4c-1.5-1.5-4.1-1.5-5.7,0L39.9,48L28,36.1l18.4-18.4C57.9,6.1,75.7,2.8,90.7,9.3 C97.2,24.3,93.9,42.1,82.3,53.6z\"/><path d=\"M85.7,13c-0.5,0.2-0.7,0.8-0.5,1.3c5.1,11.4,2.5,25-6.4,33.9c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3 s0.5-0.1,0.7-0.3c9.5-9.5,12.2-24,6.8-36.2C86.8,13,86.2,12.8,85.7,13z\"/><path d=\"M13.9,80.7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4 L13.9,80.7z\"/><path d=\"M17.5,77.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4 L17.5,77.2z\"/><path d=\"M21,73.6c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4 L21,73.6z\"/></g></svg>" }, playground: { title: "複合遊具", svg: "<svg viewBox=\"0 0 512.001 512.001\" aria-hidden=\"true\" fill=\"currentColor\"><g>\n\t<g>\n\t\t<path d=\"M501.335,170.587h-352v-21.333h10.667c4.181,0,7.979-2.453,9.728-6.251c1.728-3.819,1.067-8.299-1.685-11.435\n\t\t\tL93.377,46.235c-4.053-4.651-12.011-4.651-16.064,0L2.647,131.569c-2.752,3.157-3.435,7.616-1.685,11.435\n\t\t\tc1.728,3.797,5.525,6.251,9.707,6.251h10.667v309.333c0,5.888,4.779,10.667,10.667,10.667s10.667-4.779,10.667-10.667v-10.667\n\t\t\th85.333v10.667c0,5.888,4.779,10.667,10.667,10.667s10.667-4.779,10.667-10.667V191.921h64V300.55\n\t\t\tc-12.395,4.416-21.333,16.149-21.333,30.037c0,17.643,14.357,32,32,32s32-14.357,32-32c0-13.888-8.939-25.621-21.333-30.037\n\t\t\tV191.921h85.333v87.296c-12.395,4.416-21.333,16.149-21.333,30.037c0,17.643,14.357,32,32,32c17.643,0,32-14.357,32-32\n\t\t\tc0-13.888-8.939-25.621-21.333-30.037v-87.296h64v266.667c0,5.888,4.779,10.667,10.667,10.667c5.888,0,10.667-4.779,10.667-10.667\n\t\t\tV191.921h42.667v23.573c-6.4,2.667-10.667,7.531-10.667,13.76c0,6.229,4.267,11.093,10.667,13.76v31.147\n\t\t\tc-6.4,2.667-10.667,7.531-10.667,13.76s4.267,11.093,10.667,13.76v31.147c-6.4,2.667-10.667,7.531-10.667,13.76\n\t\t\tc0,6.229,4.267,11.093,10.667,13.76v31.147c-6.4,2.667-10.667,7.531-10.667,13.76c0,6.229,4.267,11.093,10.667,13.76v18.24\n\t\t\tc0,5.888,4.779,10.667,10.667,10.667c5.888,0,10.667-4.779,10.667-10.667v-18.24c6.4-2.667,10.667-7.531,10.667-13.76\n\t\t\tc0-6.229-4.267-11.093-10.667-13.76v-31.147c6.4-2.667,10.667-7.531,10.667-13.76c0-6.229-4.267-11.093-10.667-13.76v-31.147\n\t\t\tc6.4-2.667,10.667-7.531,10.667-13.76c0-6.229-4.267-11.093-10.667-13.76v-31.147c6.4-2.667,10.667-7.531,10.667-13.76\n\t\t\ts-4.267-11.093-10.667-13.76v-23.573h10.667c5.888,0,10.667-4.779,10.667-10.667S507.223,170.587,501.335,170.587z\n\t\t\t M128.001,426.587H42.668v-42.667h85.333V426.587z M128.001,362.587H42.668v-42.667h85.333V362.587z M128.001,298.587H42.668\n\t\t\tv-42.667h85.333V298.587z M128.001,234.587H42.668v-85.333h85.333V234.587z M34.177,127.921l51.157-58.475l51.157,58.475H34.177z\n\t\t\t M224.001,341.254c-5.888,0-10.667-4.779-10.667-10.667s4.779-10.667,10.667-10.667s10.667,4.779,10.667,10.667\n\t\t\tS229.889,341.254,224.001,341.254z M330.668,319.921c-5.888,0-10.667-4.779-10.667-10.667s4.779-10.667,10.667-10.667\n\t\t\ts10.667,4.779,10.667,10.667S336.556,319.921,330.668,319.921z\"/>\n\t</g>\n</g></svg>" }, picnic: { title: "ピクニック・広場", svg: "<svg viewBox=\"0 0 512 512\" aria-hidden=\"true\"><g>\n\t<rect x=\"10.199\" y=\"228.645\" style=\"fill:#FF7731;\" width=\"491.602\" height=\"62.593\"/>\n\t<path style=\"fill:#FF7731;\" d=\"M482.422,291.243H29.578v85.334c0,66.844,54.187,121.031,121.031,121.031h210.784\n\t\tc66.843-0.001,121.03-54.188,121.03-121.031V291.243z\"/>\n</g>\n<rect x=\"361.613\" y=\"56.441\" style=\"fill:#BDCED4;\" width=\"50.068\" height=\"50.905\"/>\n<path style=\"fill:#FF2E48;\" d=\"M455.075,209.154c0-23.966-19.428-43.395-43.395-43.395v-58.416H361.61v58.416\n\tc-23.966,0-43.395,19.428-43.395,43.395v19.495h136.86V209.154z\"/>\n<rect x=\"224.607\" y=\"14.39\" style=\"fill:#FF7731;\" width=\"62.786\" height=\"276.847\"/>\n<rect x=\"58.135\" y=\"173.273\" style=\"fill:#BDCED4;\" width=\"138.709\" height=\"55.382\"/>\n<path d=\"M501.801,218.451h-36.526v-9.296c0-26.065-18.704-47.844-43.396-52.62v-49.191V56.438c0-5.633-4.567-10.199-10.199-10.199\n\th-50.071c-5.632,0-10.199,4.566-10.199,10.199v50.905v49.191c-24.69,4.776-43.394,26.555-43.394,52.62v9.296H297.59V14.391\n\tc0-5.633-4.567-10.199-10.199-10.199h-62.783c-5.632,0-10.199,4.566-10.199,10.199v204.06h-7.365v-45.177\n\tc0-5.633-4.567-10.199-10.199-10.199H58.135c-5.632,0-10.199,4.566-10.199,10.199v45.177H10.199C4.567,218.451,0,223.017,0,228.65\n\tv62.595c0,5.633,4.567,10.199,10.199,10.199h9.179v75.134c0,72.36,58.87,131.23,131.23,131.23h210.783\n\tc72.36,0,131.23-58.87,131.23-131.23v-75.134h9.179c5.632,0,10.199-4.566,10.199-10.199V228.65\n\tC512,223.017,507.433,218.451,501.801,218.451z M371.809,66.638h29.673v30.507h-29.673V66.638z M328.414,209.154\n\tc0-18.303,14.892-33.195,33.195-33.195c5.632,0,10.199-4.566,10.199-10.199v-48.217h29.673v48.217\n\tc0,5.633,4.567,10.199,10.199,10.199c18.305,0,33.196,14.892,33.196,33.195v9.296H328.414V209.154z M297.59,281.044v-42.196h194.011\n\tv42.196H297.59z M234.808,24.59h42.385v256.454h-42.385L234.808,24.59L234.808,24.59z M68.335,183.471h118.311v34.978H68.335\n\tV183.471z M20.398,281.044v-42.196H214.41v42.196H20.398z M472.223,301.443v75.134c0,61.113-49.719,110.832-110.832,110.832H150.609\n\tC89.496,487.408,39.777,437.69,39.777,376.577v-75.134H472.223z\"/>\n<path d=\"M386.55,343.599h12.239c5.632,0,10.199-4.566,10.199-10.199c0-5.633-4.567-10.199-10.199-10.199H386.55\n\tc-5.632,0-10.199,4.566-10.199,10.199C376.351,339.033,380.918,343.599,386.55,343.599z\"/>\n<path d=\"M62.215,333.4c0,5.633,4.567,10.199,10.199,10.199h269.259c5.632,0,10.199-4.566,10.199-10.199\n\tc0-5.633-4.567-10.199-10.199-10.199H72.414C66.782,323.201,62.215,327.767,62.215,333.4z\"/>\n<path d=\"M398.789,371.137H72.414c-5.632,0-10.199,4.566-10.199,10.199s4.567,10.199,10.199,10.199h326.375\n\tc5.632,0,10.199-4.566,10.199-10.199S404.421,371.137,398.789,371.137z\"/>\n<path d=\"M398.789,419.073H94.853c-5.632,0-10.199,4.566-10.199,10.199s4.567,10.199,10.199,10.199h303.936\n\tc5.632,0,10.199-4.566,10.199-10.199S404.421,419.073,398.789,419.073z\"/></svg>" }, ball: { title: "ボール遊び", svg: "<svg viewBox=\"0 0 64 64\" aria-hidden=\"true\" fill=\"currentColor\"><path d=\"M61.934 31.992c.021-.713.209-10.904-5.822-17.538c-.268-.593-1.539-2.983-5.641-5.904a41.959 41.959 0 0 0-5.775-3.763l-.008-.004C44.432 4.646 39.43 2 33.359 2c-.461 0-.917.027-1.368.058V2.05c-4.629-.101-9.227 1.09-11.998 2.341c-2.458 1.11-5.187 2.971-5.384 3.115C11.205 9.41 4.75 17.051 4.239 21.1c-2.063 2.637-3.787 14.482.004 21.697c2.658 10.027 12.664 15.045 13.46 15.43c.484.309 5.937 3.68 12.636 3.68c.281 0 1.98.094 2.586.094c7.241 0 17.971-5.104 20.217-9.102c6.171-4.514 9.37-16.147 8.792-20.907M17.758 47.055c-2.869-4.641-4.504-10.705-4.854-12.098c.908-1.361 5.387-7.965 7.939-9.952c1.445.266 7.479 1.374 13.17 2.404c.715 1.853 3.852 10.029 4.75 13.185c-.99 1.174-4.879 5.702-8.708 9.248c-4.065.019-10.979-2.326-12.297-2.787M53.824 14.58c-.012.45-.119 2.05-.885 3.887c-1.521-.777-5.344-2.441-10.584-2.722c-.793-1.171-3.777-5.254-8.49-8.086c.645-1.262 1.543-2.801 2.068-3.27c.17-.048.434-.092.836-.092c2.527 0 6.893 1.655 7.273 1.802c.403.213 8.251 4.439 9.782 8.481M11.773 34.012c-3.423-.584-5.458-1.648-6.066-2.008c-1.273-4.617-.248-9.607-.09-10.322c1.256-2.246 4.832-7.971 7.191-9.058c2.445-.499 5.494.121 6.736.424c-.117 1.615-.342 6.127.326 10.862c-2.706 2.178-6.989 8.447-8.097 10.102M31.685 3.53c.768.057 1.895.225 2.667.454c-.77 1.024-1.559 2.542-1.932 3.292c-1.57.257-7.533 1.397-12.211 4.43c-.943-.25-3.791-.917-6.488-.687c.668-1.293 1.666-2.249 1.773-2.347c.371-.266 7.513-5.263 16.191-5.155v.013m19.096 38.093c-1.17-.048-5.678-.305-10.621-1.466c-.947-3.302-4.074-11.444-4.789-13.296a556.586 556.586 0 0 1 6.928-9.654c5.688.312 9.682 2.387 10.455 2.82c3.295 5.299 4.018 10.711 4.117 11.615c-1.75 5.446-5.211 9.113-6.09 9.981M3.655 28.519c.084 1.266.287 2.599.654 3.917a11.738 11.738 0 0 0-.682 2.651a33.039 33.039 0 0 1 .028-6.568m9.644 23.359c1.508-1.453 3.367-2.867 4.088-3.401c1.63.574 8.324 2.837 12.591 2.837c.727.975 3.104 4.028 6.018 6.362c-1.814 1.775-4.434 2.613-4.897 2.752c-8.127.218-16.042-4.35-17.8-8.55m21.463 8.538c.922-.537 1.883-1.244 2.678-2.139c1.297-.179 6.863-1.137 11.893-4.832c.332.036.879.08 1.49.063c-3.018 2.957-10.382 6.26-16.061 6.908m15.424-8.376c1.807-4.708 1.73-8.258 1.641-9.392c.992-.972 4.396-4.599 6.285-10.113c1.018.17 1.68.429 1.994.574c.109.4.291 1.324.188 2.725c-.77 5.043-3.428 12.6-8.084 15.941c-.468.239-1.292.291-2.024.265\" fill=\"currentColor\"></path></svg>" }, + bench: { title: "ベンチ・椅子", svg: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 6.5h17\"/><path d=\"M3.5 9h17\"/><path d=\"M4.5 6.5v6\"/><path d=\"M19.5 6.5v6\"/><path d=\"M3 12.5h18\"/><path d=\"M5 12.5v6.5\"/><path d=\"M19 12.5v6.5\"/></svg>" }, + pond: { title: "じゃぶじゃぶ池", svg: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><ellipse cx=\"12\" cy=\"14\" rx=\"9\" ry=\"5\"/><path d=\"M6 12.5c1.6-.9 2.9-.9 4.5 0s2.9.9 4.5 0 2.4-.8 3-.4\"/></svg>" }, + grass: { title: "草地広場", svg: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 20h18\"/><path d=\"M8 20c0-2.7 1-5 3-7\"/><path d=\"M8 20c-.4-2.4-1.5-4.2-3.2-5.5\"/><path d=\"M16 20c0-2.7-1-5-3-7\"/><path d=\"M16 20c.4-2.4 1.5-4.2 3.2-5.5\"/></svg>" }, + special: { title: "特殊遊具", svg: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"currentColor\"><path d=\"M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.6 6.1 20.7l1.2-6.6L2.5 9.5l6.6-.9z\"/></svg>" }, }; |
