# techis-yumori/yeg-map architecture

> Architecture diagram of the GitHub repository techis-yumori/yeg-map, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/techis-yumori/yeg-map
- Repository: https://github.com/techis-yumori/yeg-map

## Overview

松山YEGの夜間飲食店マップは、来訪者が地図・一覧から店舗を探し、条件で絞り込み、店舗の詳細や道案内を確認するWebアプリです。運用側はフォーム回答をMAP掲載シートへ取り込み、内容を整えて公開データを更新します。READMEに記載された構成と運用機能を反映していますが、GASの内部実装とHTMLの詳細は未サンプルのため、内部処理の関係はREADMEで確認できる範囲に限っています。

Main entry points: [`js/app.js`](https://github.com/techis-yumori/yeg-map/blob/main/js/app.js) (店舗検索・一覧), [`gas/Code.gs`](https://github.com/techis-yumori/yeg-map/blob/main/gas/Code.gs) (取込・管理処理), [`js/locate.js`](https://github.com/techis-yumori/yeg-map/blob/main/js/locate.js) (現在地機能), [`js/data-source.js`](https://github.com/techis-yumori/yeg-map/blob/main/js/data-source.js) (データ取得・整形)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["店舗検索サイト"]
  node_pages["GitHub Pages"]
  node_shell["画面の骨組み<br/>[index.html]"]
  node_shop_ui["店舗検索・一覧<br/>[app.js]"]
  node_filters["検索・絞り込み<br/>[app.js]"]
  node_shop_data["データ取得・整形<br/>[data-source.js]"]
  node_genre["ジャンル色設定<br/>[genre-colors.js]"]
end

subgraph group_map["地図機能"]
  node_landmarks["目印データ<br/>[landmarks.js]"]
  node_map_ui["地図・店舗ピン<br/>[app.js]"]
  node_locate["現在地機能<br/>[locate.js]"]
  node_leaflet_osm["Leaflet・OpenStreetMap"]
  node_browser_geo["ブラウザー位置情報"]
end

subgraph group_ops["店舗データ運用"]
  node_form["会員の回答フォーム"]
  node_response_sheet[("フォーム回答シート")]
  node_map_sheet[("MAP掲載シート")]
  node_gas_admin["取込・管理処理<br/>[Code.gs]"]
  node_geocoder["住所位置取得"]
end

subgraph group_backend["公開データ配信"]
  node_publisher["公開データ作成<br/>[Code.gs]"]
  node_gas_api["店舗データAPI<br/>[Code.gs]"]
end

node_visitor(("来訪者"))
node_google_maps["Googleマップアプリ"]

node_visitor -->|"サイトを開く"| node_pages
node_pages -->|"画面を提供"| node_shell
node_shell -->|"画面を構成"| node_shop_ui
node_shop_ui -->|"店舗データを取得"| node_shop_data
node_shop_data -->|"データを要求"| node_gas_api
node_gas_api -->|"店舗JSONを返す"| node_shop_data
node_shop_ui -->|"条件で絞る"| node_filters
node_shop_ui -->|"選択を連動"| node_map_ui
node_map_ui -->|"店舗を選択"| node_shop_ui
node_shop_ui -->|"色を参照"| node_genre
node_shop_ui -->|"目印を描画"| node_landmarks
node_map_ui -->|"地図を表示"| node_leaflet_osm
node_shop_ui -->|"現在地を初期化"| node_locate
node_locate -->|"位置を取得"| node_browser_geo
node_locate -->|"地図を移動"| node_map_ui
node_form -->|"回答を記録"| node_response_sheet
node_gas_admin -->|"回答を読み取る"| node_response_sheet
node_gas_admin -->|"回答を取り込む"| node_map_sheet
node_gas_admin -->|"住所から位置取得"| node_geocoder
node_gas_admin -->|"公開更新を実行"| node_publisher
node_publisher -->|"掲載内容を読む"| node_map_sheet
node_publisher -->|"公開データを更新"| node_gas_api
node_shop_ui -->|"道案内を開く"| node_google_maps

click node_shell "https://github.com/techis-yumori/yeg-map/blob/main/index.html"
click node_shop_ui "https://github.com/techis-yumori/yeg-map/blob/main/js/app.js"
click node_filters "https://github.com/techis-yumori/yeg-map/blob/main/js/app.js"
click node_shop_data "https://github.com/techis-yumori/yeg-map/blob/main/js/data-source.js"
click node_genre "https://github.com/techis-yumori/yeg-map/blob/main/js/genre-colors.js"
click node_landmarks "https://github.com/techis-yumori/yeg-map/blob/main/js/landmarks.js"
click node_map_ui "https://github.com/techis-yumori/yeg-map/blob/main/js/app.js"
click node_locate "https://github.com/techis-yumori/yeg-map/blob/main/js/locate.js"
click node_gas_admin "https://github.com/techis-yumori/yeg-map/blob/main/gas/Code.gs"
click node_publisher "https://github.com/techis-yumori/yeg-map/blob/main/gas/Code.gs"
click node_gas_api "https://github.com/techis-yumori/yeg-map/blob/main/gas/Code.gs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_pages,node_shell,node_shop_ui,node_filters,node_shop_data,node_genre toneBlue
class node_landmarks,node_map_ui,node_locate,node_leaflet_osm,node_browser_geo toneAmber
class node_form,node_response_sheet,node_map_sheet,node_gas_admin,node_geocoder toneMint
class node_publisher,node_gas_api toneRose
class node_visitor,node_google_maps toneIndigo
```

## Components

### 店舗検索サイト

- **GitHub Pages**
- [画面の骨組み](https://github.com/techis-yumori/yeg-map/blob/main/index.html): `index.html`
- [店舗検索・一覧](https://github.com/techis-yumori/yeg-map/blob/main/js/app.js): `js/app.js`
- [検索・絞り込み](https://github.com/techis-yumori/yeg-map/blob/main/js/app.js): `js/app.js`
- [データ取得・整形](https://github.com/techis-yumori/yeg-map/blob/main/js/data-source.js): `js/data-source.js`
- [ジャンル色設定](https://github.com/techis-yumori/yeg-map/blob/main/js/genre-colors.js): `js/genre-colors.js`

### 地図機能

- [目印データ](https://github.com/techis-yumori/yeg-map/blob/main/js/landmarks.js): `js/landmarks.js`
- [地図・店舗ピン](https://github.com/techis-yumori/yeg-map/blob/main/js/app.js): `js/app.js`
- [現在地機能](https://github.com/techis-yumori/yeg-map/blob/main/js/locate.js): `js/locate.js`
- **Leaflet・OpenStreetMap**
- **ブラウザー位置情報**

### 店舗データ運用

- **会員の回答フォーム**
- **フォーム回答シート**
- **MAP掲載シート**
- [取込・管理処理](https://github.com/techis-yumori/yeg-map/blob/main/gas/Code.gs): `gas/Code.gs`
- **住所位置取得**

### 公開データ配信

- [公開データ作成](https://github.com/techis-yumori/yeg-map/blob/main/gas/Code.gs): `gas/Code.gs`
- [店舗データAPI](https://github.com/techis-yumori/yeg-map/blob/main/gas/Code.gs): `gas/Code.gs`

### Other components

- **来訪者**
- **Googleマップアプリ**

## Connections

- 来訪者 → GitHub Pages: サイトを開く (evidence: `README.md`)
- GitHub Pages → 画面の骨組み: 画面を提供 (evidence: `README.md`)
- 画面の骨組み → 店舗検索・一覧: 画面を構成 (evidence: `README.md`)
- 店舗検索・一覧 → データ取得・整形: 店舗データを取得 (evidence: `README.md`)
- データ取得・整形 → 店舗データAPI: データを要求 (evidence: `README.md`)
- 店舗データAPI → データ取得・整形: 店舗JSONを返す (evidence: `README.md`)
- 店舗検索・一覧 → 検索・絞り込み: 条件で絞る (evidence: `js/app.js`)
- 店舗検索・一覧 → 地図・店舗ピン: 選択を連動 (evidence: `js/app.js`)
- 地図・店舗ピン → 店舗検索・一覧: 店舗を選択 (evidence: `js/app.js`)
- 店舗検索・一覧 → ジャンル色設定: 色を参照 (evidence: `js/app.js`)
- 店舗検索・一覧 → 目印データ: 目印を描画 (evidence: `js/app.js`)
- 地図・店舗ピン → Leaflet・OpenStreetMap: 地図を表示 (evidence: `README.md`)
- 店舗検索・一覧 → 現在地機能: 現在地を初期化 (evidence: `js/app.js`)
- 現在地機能 → ブラウザー位置情報: 位置を取得 (evidence: `js/locate.js`)
- 現在地機能 → 地図・店舗ピン: 地図を移動 (evidence: `js/locate.js`)
- 会員の回答フォーム → フォーム回答シート: 回答を記録 (evidence: `README.md`)
- 取込・管理処理 → フォーム回答シート: 回答を読み取る (evidence: `README.md`)
- 取込・管理処理 → MAP掲載シート: 回答を取り込む (evidence: `README.md`)
- 取込・管理処理 → 住所位置取得: 住所から位置取得 (evidence: `README.md`)
- 取込・管理処理 → 公開データ作成: 公開更新を実行 (evidence: `README.md`)
- 公開データ作成 → MAP掲載シート: 掲載内容を読む (evidence: `README.md`)
- 公開データ作成 → 店舗データAPI: 公開データを更新 (evidence: `README.md`)
- 店舗検索・一覧 → Googleマップアプリ: 道案内を開く (evidence: `README.md`)