# 更新方法と設計メモ

## 方針

このマップは「赤ちゃん連れで今どこに逃げ込めるか」を素早く判断するためのものです。見栄えより、授乳室の有無、おむつ替え可否、館内の場所、公式リンクを優先します。

原則として、各ビル・商業施設の公式サイト、または施設運営者の公式エリア案内から抽出します。口コミサイトは候補探しには使えますが、データの主ソースにはしません。

対象範囲は東京駅周辺から広げ、現在は東京都内の広域を対象にしています。モバイルでは現在地が取れた場合に周辺施設を優先表示し、通常時は東京駅からの直線距離順で並びます。

## ファイル構成

- `index.html`: 画面構造、Leaflet読み込み
- `styles.css`: レイアウトと見た目
- `data.js`: 施設データ
- `app.js`: 地図、検索、フィルター、リスト表示
- `README.md`: 利用者向けの短い説明
- `METHODOLOGY.md`: このファイル
- `docs/VPS_ARCHITECTURE.md`: さくらVPS移行時のAPI、DB、Nginx設計
- `docs/OPERATIONS.md`: GitHub Pages公開、独自ドメイン、AdSense運用手順
- `docs/THIRD_PARTY_NOTICES.md`: Leaflet、OpenStreetMap、東京都オープンデータ、AdSenseの表記

## 将来のさくらVPS移行方針

現在はGitHub Pagesで配信できる静的サイトです。将来的にさくらのVPSへ移す場合も、まずはフロントエンドを静的ファイルとして配信し、サーバー必須の機能だけをAPI化します。

移行時の想定:

- Nginxで `index.html`、`styles.css`、`app.js`、地図ライブラリ、画像などを配信する。
- `/api/facilities` で施設データを返せるようにし、初期移行では `data.js` と同じJSON形を維持する。
- `/api/likes/:facilityId` または `/api/likes` で全ユーザー合算のいいね数を扱う。
- DBは小さく始めるならSQLite、本格的に管理画面や投稿審査を入れるならPostgreSQLを検討する。
- GitHub Pages版でも動くよう、APIがない場合は現在の `data.js` と `localStorage` にフォールバックする。

そのため、フロントエンドでは施設データ、いいね、検索条件をできるだけ独立した関数で扱い、直接DOMや地図処理に混ぜ込みすぎないようにします。

## データ構造

`data.js` の `window.NURSING_ROOM_DATA` に施設を追加します。

```js
{
  id: "unique-id",
  name: "施設名",
  area: "東京駅周辺",
  address: "住所",
  lat: 35.0,
  lng: 139.0,
  location: "館内の場所",
  nursing: true,
  diaper: true,
  hotWater: true,
  sink: true,
  diaperTrash: true,
  microwave: false,
  strollerFriendly: null,
  maleSharedArea: true,
  womenOnlyNursing: true,
  notes: "公式情報から読める補足",
  sourceName: "公式サイト名",
  sourceUrl: "https://...",
  verifiedAt: "2026-07-01",
  confidence: "high"
}
```

値の意味:

- `true`: 公式ページで確認できた
- `false`: 公式ページでなし、または別設備として未提供と読める
- `null`: 公式ページから判断できない

`confidence` は以下の運用です。

- `high`: 施設個別ページまたは公式エリア案内で設備・場所が明記されている
- `medium`: 公式ページで存在は確認できるが詳細が薄い、または表現が施設単位で曖昧
- `low`: 原則使わない。追加調査が必要な場合の一時状態

## 追加・更新手順

1. 対象施設の公式サイトで「授乳室」「ベビー休憩室」「おむつ」「赤ちゃん」「ベビールーム」を検索する。
2. 場所、授乳室有無、おむつ替え可否、調乳用お湯、電子レンジ、男性利用可否を読む。
3. `data.js` に施設を追加または更新する。
4. `verifiedAt` を更新日へ変更する。
5. 公式URLを `sourceUrl` に入れる。
6. 位置座標は建物代表点でよい。館内の正確な位置は `location` に書く。
7. 座標は必ず地図サービスやジオコーディングで確認する。手入力の推測座標だけで追加しない。
8. 下記チェックを実行する。

```bash
node --check outputs/nursing-room-map/app.js
node --check outputs/nursing-room-map/data.js
python3 -m http.server 8766 --directory outputs/nursing-room-map
```

座標の範囲チェック:

```bash
node - <<'NODE'
global.window = {};
require('./outputs/nursing-room-map/data.js');
const data = window.NURSING_ROOM_DATA;
const bad = data.filter(x => !(x.lat > 35.45 && x.lat < 35.95 && x.lng > 139.15 && x.lng < 140.05));
console.log({ count: data.length, bad });
NODE
```

この範囲は、東京都内の広域を対象にした現在のデータ向けです。島しょ部まで含める場合は、境界値と地図初期表示を別途更新してください。

## 手動確認チェック

- 地図が表示される
- ピンを押すとポップアップが出る
- カードを押すと地図が移動する
- 検索で施設名・場所が絞り込める
- 各フィルターが正しく効く
- モバイル幅で現在地取得を許可すると、現在地2km以内の施設だけ表示される
- 現在地周辺ボタンを再度押すと、全件表示と東京駅距離に戻る
- 公式リンクが開く
- スマホ幅でリストと地図が崩れない

## 設計上の注意

- 公式ページの短い文言をそのまま大量転載しない。必要最小限を要約する。
- ユーザー投稿や口コミ情報を公式情報と混ぜない。
- Leaflet、OpenStreetMap、東京都オープンデータ、AdSenseの表記は `docs/THIRD_PARTY_NOTICES.md` に集約する。
- 東京都「赤ちゃん・ふらっと」由来のデータは、アプリ用に編集・加工したデータとして扱い、東京都が作成・保証したように見せない。
- 広告・協賛枠は施設データの掲載基準と混ぜない。広告主の施設であっても、設備情報は公式情報に基づいて通常施設と同じ形式で扱う。
- 広告は地図操作、検索、フィルター、緊急時の施設確認を邪魔しない位置と頻度にする。
- Google AdSenseを使う場合は、`app.js` の `ADSENSE_CONFIG` だけを変更する。広告コードをカード描画や施設データに直書きしない。
- AdSense未承認、広告未配信、開発環境ではローカル協賛枠にフォールバックできる状態を維持する。
- 授乳室が女性専用でも、おむつ替えスペースや共用部が男性利用可能な場合があるため、`womenOnlyNursing` と `maleSharedArea` を分ける。
- 「おむつ替えのみ」の施設も残す。赤ちゃん連れには価値がある。
- オンライン地図タイルが落ちてもリストは読める構造を維持する。
- 地図ピンは建物代表点であり、館内位置ではないことを画面上に明記する。
- 現在地はクライアント側の絞り込みだけに使い、保存や送信をしない。VPS移行後も、現在地検索は明示的な仕様変更がない限りサーバーへ送らない。