# 機能設計書 66-マップウィジェット

## 概要

本ドキュメントは、Decap CMSのマップウィジェット（Map Widget）の機能設計を定義する。マップウィジェットは、OpenLayersベースの地図インターフェースによる空間データ（ジオメトリ）入力機能を提供するUIコンポーネントである。

### 本機能の処理概要

マップウィジェットは、OpenLayers（ol）ライブラリを使用した地図ベースの空間データ入力ウィジェットである。Point（点）、LineString（線）、Polygon（面）の3種類のジオメトリタイプの描画・編集に対応し、GeoJSON形式でデータを出力する。

**業務上の目的・背景**：店舗位置、イベント会場、サービスエリアなど、地理的な位置情報をCMSで管理する需要がある。マップウィジェットにより、テキストベースの座標入力ではなく、地図上でのインタラクティブな位置指定が可能になる。

**機能の利用シーン**：エントリ編集画面でフィールドタイプが`map`に設定されているフィールドに対して利用される。店舗情報、イベント情報、不動産物件情報など、位置データを含むコンテンツの管理に使用される。

**主要な処理内容**：
1. OpenStreetMap（OSM）ベースの地図タイル表示
2. Point/LineString/Polygonのジオメトリ描画
3. GeoJSON形式でのジオメトリデータ入出力
4. 座標精度の設定（decimals）
5. 既存ジオメトリの表示とビューフィット
6. リサイズ対応（ResizeObserver）
7. カスタム地図・フォーマットのプラグイン対応（getMap/getFormat）

**関連システム・外部連携**：OpenLayers（ol）ライブラリ、OpenStreetMapタイルサーバー。

**権限による制御**：特になし。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 6 | エントリ編集画面 | 主画面 | マップフィールドの編集 |
| 7 | エントリ新規作成画面 | 主画面 | マップフィールドの入力 |

## 機能種別

UI入力コンポーネント / 地図データ入力

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| field | ImmutableMap | Yes | フィールド定義（type, decimals等） | - |
| value | string | No | GeoJSON形式のジオメトリ文字列 | デフォルトは空文字列 |
| onChange | function | Yes | 値変更コールバック | - |
| height | string | No | 地図の高さ | デフォルトは'400px' |
| classNameWrapper | string | No | CSSクラス名ラッパー | - |

### 入力データソース

- 画面入力: 地図上でのジオメトリ描画
- フィールド定義: type（Point/LineString/Polygon）、decimals（座標精度）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| value | string | GeoJSON形式のジオメトリ文字列 |

### 出力先

- Redux Store: エントリのフィールド値として保存

## 処理フロー

### 処理シーケンス

```
1. ウィジェット初期化（componentDidMount）
   └─ GeoJSONフォーマット作成、既存値からフィーチャー読込
2. 地図作成
   └─ OSMタイルレイヤー + ベクターレイヤーで地図インスタンス生成
3. 既存ジオメトリ表示
   └─ フィーチャーがあればビューをフィット（maxZoom: 16, padding: 80）
4. 描画インタラクション追加
   └─ Draw({type: field.get('type', 'Point')})を地図に追加
5. 描画完了
   └─ drawend時にfeaturesSource.clear() + format.writeGeometry()でGeoJSON出力
6. リサイズ対応
   └─ ResizeObserverで地図コンテナの変更を監視、map.updateSize()を呼出
7. クリーンアップ
   └─ componentWillUnmountでResizeObserverを切断
```

### フローチャート

```mermaid
flowchart TD
    A[MapControl componentDidMount] --> B[GeoJSONフォーマット作成]
    B --> C{既存値あり?}
    C -->|Yes| D[フィーチャー読込]
    C -->|No| E[空フィーチャーソース]
    D --> F[地図インスタンス作成]
    E --> F
    F --> G[Draw インタラクション追加]
    G --> H{ジオメトリ描画}
    H --> I[drawend イベント]
    I --> J[featuresSource.clear]
    J --> K[format.writeGeometry → onChange]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-66-01 | ジオメトリタイプ | field.type設定によりPoint/LineString/Polygonを切替（デフォルトPoint） | 常時 |
| BR-66-02 | 座標精度 | decimals設定（デフォルト7）によりGeoJSON出力時の座標小数点桁数を制御 | 常時 |
| BR-66-03 | 描画上書き | 新規描画時にfeaturesSource.clear()で既存ジオメトリをクリアし、最新の描画のみ保持 | drawend時 |
| BR-66-04 | 座標系変換 | 入力はEPSG:4326（WGS84）、地図表示はEPSG:3857（WebMercator）で変換 | 常時 |
| BR-66-05 | カスタム拡張 | withMapControl({ getFormat, getMap })でカスタムフォーマット・地図を注入可能 | カスタム使用時 |

### 計算ロジック

- GeoJSON出力: `format.writeGeometry(feature.getGeometry(), { decimals: field.get('decimals', 7) })`
- 座標系変換: `dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'`

## データベース操作仕様

### 操作別データベース影響一覧

該当なし（クライアントサイドのみの処理）。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | GeoJSON解析エラー | 既存値が不正なGeoJSON形式の場合 | フィーチャー読込をスキップ |

### リトライ仕様

リトライ処理は行わない。

## トランザクション仕様

該当なし。

## パフォーマンス要件

- ResizeObserverによる地図サイズの自動調整
- 地図のデフォルト高さは400px

## セキュリティ考慮事項

- OpenStreetMapタイルサーバーへの外部HTTPリクエストが発生する
- GeoJSONデータは文字列としてのみ保存されるため、直接的なセキュリティリスクは低い

## 備考

- withMapControl HOCパターンにより、OpenLayers以外の地図ライブラリへの差し替えが可能
- MapPreviewは値をテキスト表示するだけの簡素な実装

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | schema.js | `packages/decap-cms-widget-map/src/schema.js` | decimals（整数型）、type（Point/LineString/Polygon enum）のスキーマ定義 |

**読解のコツ**: マップウィジェットの値はGeoJSON形式の文字列（例: `{"type":"Point","coordinates":[139.7,35.6]}`）。座標はEPSG:4326（経度,緯度）。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.js | `packages/decap-cms-widget-map/src/index.js` | withMapControl()を引数なしで呼び出してデフォルト地図を使用 |

**主要処理フロー**:
1. **1-3行目**: withMapControl, MapPreview, schemaをインポート
2. **5行目**: `withMapControl()`でデフォルトのMapControlを生成

#### Step 3: 制御コンポーネント（MapControl - withMapControl HOC）を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | withMapControl.js | `packages/decap-cms-widget-map/src/withMapControl.js` | 114行のHOC。OpenLayers初期化、Draw描画、ResizeObserver |

**主要処理フロー**:
- **14-17行目**: formatOptions - EPSG:4326/3857の座標系変換設定
- **19-21行目**: getDefaultFormat() - GeoJSONフォーマット生成
- **23-29行目**: getDefaultMap() - OSMタイル + ベクターレイヤーで地図生成
- **51-82行目**: componentDidMount() - 地図初期化、Draw追加、drawendイベント、ResizeObserver
- **68行目**: Draw type設定（field.get('type', 'Point')）
- **72-74行目**: drawendイベント - clear() + writeGeometry() → onChange()
- **84-88行目**: componentWillUnmount - ResizeObserver切断

### プログラム呼び出し階層図

```
withMapControl({ getFormat?, getMap? }) → MapControl
    │
    ├─ componentDidMount()
    │   ├─ getFormat/getDefaultFormat() → GeoJSON
    │   ├─ format.readFeature(value) → features
    │   ├─ VectorSource/VectorLayer
    │   ├─ getMap/getDefaultMap() → Map (OSM + Vector)
    │   ├─ map.getView().fit() （既存データ時）
    │   ├─ Draw({ type }) → map.addInteraction()
    │   ├─ draw.on('drawend') → onChange(writeGeometry)
    │   └─ ResizeObserver → map.updateSize()
    │
    └─ componentWillUnmount()
        └─ resizeObserver.disconnect()
```

### データフロー図

```
[入力]                       [処理]                        [出力]

GeoJSON文字列 ─────▶ format.readFeature() ──▶ OpenLayers Feature
(既存値)                                          │
                                                 ▼
地図描画操作 ─────▶ Draw.drawend ──▶ writeGeometry() ──▶ GeoJSON文字列
(Point/Line/Polygon)    │                                    │
                       ▼                                    ▼
               featuresSource.clear()                  onChange(string)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.js | `packages/decap-cms-widget-map/src/index.js` | ソース | ウィジェット登録エントリーポイント |
| withMapControl.js | `packages/decap-cms-widget-map/src/withMapControl.js` | ソース | 地図制御HOC（メインロジック） |
| MapPreview.js | `packages/decap-cms-widget-map/src/MapPreview.js` | ソース | マッププレビューコンポーネント |
| schema.js | `packages/decap-cms-widget-map/src/schema.js` | ソース | ウィジェットスキーマ定義 |
