200 lines
12 KiB
Markdown
200 lines
12 KiB
Markdown
# Posimai Events / Maps 監査と完成ロードマップ
|
||
|
||
**目的**: 単体ミニマルアプリとしての現状整理・改善点の優先度付け・Maps/Events どちらを先に「完全体」にするかの方針。
|
||
**前提**: 機能を積み増ししすぎず、シンプル＆スタイリッシュを維持。既存アプリ（Feed / Brain / Reader）との整合性・Lucide アイコン統一を重視する。
|
||
|
||
---
|
||
|
||
## 1. デザインシステム共通チェック（全アプリ）
|
||
|
||
| 項目 | Feed | Brain | Reader | Maps | Events |
|
||
|------|------|-------|--------|------|--------|
|
||
| ヘッダー高さ 52px | ○ | ○ (--topbar-h) | - | 要確認 | ○ |
|
||
| Inter フォント | ○ | ○ | - | 要確認 | ○ |
|
||
| :root / [data-theme="light"] | ○ | ○ | - | ○ | ○ |
|
||
| --bg, --surface, --text, --accent, --radius: 8px | ○ | ○ | - | ○ | ○ |
|
||
| Lucide のみ（絵文字・他アイコンなし） | ○ | ○ | - | ○ | **要修正** |
|
||
| PWA manifest + theme-color | ○ | ○ | - | ○ | ○ |
|
||
| テーマ切替（sun/moon アイコン） | ○ | ○ | - | ○ | ○ |
|
||
|
||
**結論**: Events の「絞り込み」シート内の一部アイコン名が Lucide にない可能性あり（後述）。それ以外はおおむね統一されている。
|
||
|
||
---
|
||
|
||
## 2. Posimai Events — 現状と改善点
|
||
|
||
### 2.1 実装済み（維持する）
|
||
|
||
| 項目 | 内容 |
|
||
|------|------|
|
||
| **レイアウト** | 52px ヘッダー、タブ（今日/今週/すべて）、リスト＋日付バッジ、ボトムシート詳細 |
|
||
| **データ** | モック JSON ＋ localStorage キャッシュ／オフライン表示、Synology API URL 対応 |
|
||
| **パーソナライズ** | 興味タグ・対象者タグ・オプション（無料/申込不要/屋外・屋内）の絞り込み、設定は localStorage で永続化 |
|
||
| **連携** | Brain 保存（URL＋title で開く）、詳細リンク（外部）、場所→Google Maps 検索 |
|
||
| **PWA** | manifest.json, sw.js, インストール可能、オフラインでキャッシュ表示 |
|
||
| **テーマ** | ダーク/ライト切替、Events 専用アクセント #6EE7B7 |
|
||
| **Lucide** | ヘッダー・カード・シート・トーストで `data-lucide` を一貫使用 |
|
||
|
||
### 2.2 改善点（優先度順）
|
||
|
||
#### 優先度：高（見た目・一貫性・信頼性）
|
||
|
||
| # | 内容 | 理由 | 工数目安 |
|
||
|---|------|------|----------|
|
||
| E1 | **Lucide アイコン名の検証・修正** | 絞り込みタグで `beer`, `glass-water`, `circle-dollar-sign`, `door-open`, `hand-heart` 等を使用。Lucide にない/名前違いがあると表示欠けやコンソールエラーの原因になる。 | 0.5h |
|
||
| E2 | **API フォールバック順の明確化** | 現状「Synology URL 優先 → 失敗時 Vercel /api/events」だが、Synology 未構築時は初回から失敗する。Vercel をデフォルトにし、設定で Synology URL を差し替える方が運用しやすい。 | 0.5h |
|
||
| E3 | **空状態・エラー時の文言統一** | 「この条件のイベントは見つかりません」等、Feed/Brain に近いトーンで簡潔に。 | 0.25h |
|
||
|
||
#### 優先度：中（UX の磨き）
|
||
|
||
| # | 内容 | 理由 | 工数目安 |
|
||
|---|------|------|----------|
|
||
| E4 | **絞り込みシートの「適用」でシートを閉じる** | 現状どおりで問題なし。閉じたあとトーストで「絞り込みを適用しました」と出しているのでそのまま維持でよい。 | - |
|
||
| E5 | **カードのタップ領域** | カード全体タップで詳細、右端アイコンは別アクション。`event.stopPropagation` が効いているか確認。 | 0.25h |
|
||
| E6 | **キーボード・スクリーンリーダー** | ボタンに `aria-label`、シートに `aria-modal="true"` を追加し、既存アプリと水準を揃える。 | 0.5h |
|
||
|
||
#### 優先度：低（将来）
|
||
|
||
| # | 内容 | 理由 |
|
||
|---|------|------|
|
||
| E7 | **API URL の設定 UI** | 開発者向け。設定パネルや localStorage のキー説明を README に記載すれば十分。UI は必須ではない。 |
|
||
| E8 | **Maps 連携** | 「イベント場所→Maps で周辺飲食店」は、Maps 側で URL パラメータが固まってから実装。現状は Google Maps リンクで代替。 |
|
||
|
||
### 2.3 意図的にスコープ外（ミニマル維持）
|
||
|
||
- イベントの編集・削除（管理画面は別）
|
||
- 複数地域・複数カレンダー
|
||
- プッシュ通知
|
||
- ログイン・ユーザー別データ（単体アプリのまま）
|
||
|
||
---
|
||
|
||
## 3. Posimai Maps — 現状と改善点
|
||
|
||
### 3.1 実装済み（OVERVIEW 等より）
|
||
|
||
| 項目 | 内容 |
|
||
|------|------|
|
||
| **コア** | Google Places API (New) searchNearby、最大20件、半径・タイプ・ランキング対応、moveend 再検索、0件時 UX |
|
||
| **UI** | 地図右下に現在地・ズーム、ヘッダーに人気順/近い順、カテゴリタブ、店舗詳細パネル、テーマ切替 |
|
||
| **連携** | Brain 保存、Google マップ連携、Carto タイル（ダーク/ライト） |
|
||
| **PWA** | manifest, sw.js |
|
||
| **Lucide** | locate, sun, utensils, x, map-pin, phone, sticky-note, clock 等を利用 |
|
||
|
||
### 3.2 改善点（優先度順）
|
||
|
||
#### 優先度：高（負債解消・一貫性）
|
||
|
||
| # | 内容 | 理由 | 工数目安 |
|
||
|---|------|------|----------|
|
||
| M1 | **ラジアル UI の扱いを確定** | CRITICAL_ACTION_PLAN 通り「削除」か「保留（触らない）」を決定。削除なら関連 JS/CSS を削り、スライダーのみで完成形に。 | 0.5h |
|
||
| M2 | **位置情報オプション** | `enableHighAccuracy: true`, `timeout: 10000`, `maximumAge` の調整（OVERVIEW 1.3 の推奨）。 | 0.25h |
|
||
| M3 | **スライダー見た目** | トラック 1.5px・ポインタ 16px リング型（未適用なら実施）。 | 0.25h |
|
||
| M4 | **Lucide の徹底** | 地図コントロール・リスト・詳細パネルで Lucide 以外のアイコンやインライン SVG が残っていれば Lucide に統一。 | 0.5h |
|
||
|
||
#### 優先度：中
|
||
|
||
| # | 内容 | 理由 |
|
||
|---|------|------|
|
||
| M5 | **カテゴリと API の連携** | タブ選択で `includedTypes` を変え、カテゴリごとに最大20件を取得（OVERVIEW 推奨）。 |
|
||
| M6 | **取得幅の設定** | 歯車で範囲（m）を設定・保存する場合は、既存「1.5km 固定」を維持しつつオプションとして追加。 |
|
||
|
||
#### 優先度：低
|
||
|
||
| # | 内容 |
|
||
|---|------|
|
||
| M7 | **20件超の表示** | 複数回検索の併合は、需要とコストを見てから。 |
|
||
| M8 | **営業時間なしの表記** | 詳細パネルで「営業時間未登録」等の文言を仕様化。 |
|
||
|
||
### 3.3 意図的にスコープ外（Phase 1 完全体の範囲外）
|
||
|
||
- ラジアルの「改良」（削除 or 保留のみ）
|
||
- Phase 2 の SNS/Web 営業時間補完
|
||
- レビュー・写真の表示（API 次第）
|
||
|
||
---
|
||
|
||
## 4. Lucide アイコン統一チェック
|
||
|
||
### Events で使用しているアイコン名（絞り込みタグ含む）
|
||
|
||
| 用途 | 指定名 | Lucide での存在 |
|
||
|------|--------|-----------------|
|
||
| 日本酒 | wine | ○ あり |
|
||
| クラフトビール | beer | △ **要確認**（無ければ `wine` や `glass-water` で代替） |
|
||
| ワイン・お酒 | glass-water | ○ あり |
|
||
| ボランティア | hand-heart | ○ あり |
|
||
| 無料 | circle-dollar-sign | ○ あり |
|
||
| 申込不要 | door-open | ○ あり |
|
||
|
||
**対応**: ビルドまたはブラウザで実際に表示を確認し、存在しない名前だけ `lucide.dev` で正式名に差し替える。
|
||
|
||
### 全アプリ共通ルール
|
||
|
||
- アイコンは **Lucide のみ**。絵文字・Font Awesome・インライン SVG は使わない。
|
||
- サイズは `width`/`height` または CSS で統一（例: ヘッダー 18px、リスト 14px）。
|
||
- 色は `color: var(--text2)` / `var(--accent)` 等、テーマ変数に合わせる。
|
||
|
||
---
|
||
|
||
## 5. Maps と Events のどちらを先に「完全体」にするか
|
||
|
||
### 判定の観点
|
||
|
||
| 観点 | Maps | Events |
|
||
|------|------|--------|
|
||
| **バックエンド** | 既存（Google Places API + Vercel serverless）で完結。Synology 不要。 | 本番データは Synology（n8n + PostgreSQL）が前提。未構築ならモックのまま。 |
|
||
| **負債** | ラジアルの削除/保留の決定が未了。 | なし（新規プロトタイプ）。 |
|
||
| **スコープ** | 検索・表示・連携まで一通り実装済み。あとは整理と仕様確定。 | UI/UX と絞り込みはある。実データは n8n+DB 構築が必要。 |
|
||
| **ユーザー価値** | 「今空いている飲食店」は単体で価値が明確。 | 「自分用イベント一覧」はデータが入って初めて価値が立つ。 |
|
||
| **工数** | ラジアル処理＋位置情報＋スライダー＋Lucide で **1〜2h** 程度。 | Lucide 修正＋API デフォルト＋軽微 UX で **1h 以内**。Synology 側は別計画。 |
|
||
|
||
### 推奨方針：**Maps を先に「完全体」にする**
|
||
|
||
1. **完了の定義がはっきりしている**
|
||
「ラジアル削除 or 保留」「位置情報・スライダー・Lucide 統一」をやれば、Phase 1 として完成と宣言しやすい。
|
||
|
||
2. **バックエンドに依存しない**
|
||
Maps は既存 API のまま完成形にできる。Events の完全体は Synology の n8n + DB が前提で、工数と前提が大きい。
|
||
|
||
3. **1アプリずつ仕上げる**
|
||
まず Maps を「完成」にし、そのあと Events は「UI/UX とクライアント側は完成 → データは Synology 構築で実化」と段階を分けられる。
|
||
|
||
4. **Events は「見た目と動きは完成、データはモック or 任意 Synology」**
|
||
Lucide 修正・API デフォルト・アクセシビリティだけ整え、単体ミニマルアプリとして完成とする。実データは別タスク（n8n + Synology API）で対応。
|
||
|
||
### ロードマップ（案）
|
||
|
||
```
|
||
Phase A: Maps 完全体（1〜2h）
|
||
M1 ラジアル削除 or 保留確定 → 実装
|
||
M2 位置情報オプション
|
||
M3 スライダー見た目（未適用なら）
|
||
M4 Lucide 徹底
|
||
|
||
Phase B: Events クライアント完成（1h 以内）
|
||
E1 Lucide アイコン名検証・修正
|
||
E2 API フォールバック順（Vercel デフォルト）
|
||
E3 空状態・エラー文言
|
||
E6 アクセシビリティ（aria）
|
||
|
||
Phase C: ドキュメント・計画の更新
|
||
CRITICAL_ACTION_PLAN に「Maps 完全体済み」「Events クライアント完成」を反映
|
||
Events の実データ（n8n + Synology）は別ロードマップで計画
|
||
```
|
||
|
||
---
|
||
|
||
## 6. まとめ
|
||
|
||
| アプリ | 現状 | 完全体の定義 | 優先度 |
|
||
|--------|------|--------------|--------|
|
||
| **Maps** | 機能はほぼ揃っている。ラジアル・位置情報・スライダー・Lucide の整理が残り。 | ラジアル処理済み・位置情報推奨値・スライダー見た目・Lucide 統一。Phase 1 として宣言。 | **先に完了** |
|
||
| **Events** | UI/UX・絞り込み・PWA・Brain 連携まで実装。モック or Synology で表示。 | クライアント: Lucide 修正・API デフォルト・文言・aria。実データは n8n+Synology で別対応。 | **Maps の次** |
|
||
|
||
- **シンプル＆スタイリッシュ**: 新機能の追加は行わず、上記の「高」と「中」の改善に絞る。
|
||
- **整合性**: ヘッダー 52px、Inter、CSS 変数、Lucide のみ、PWA、テーマ切替は全アプリで揃える。
|
||
- **完成の切り分け**: Maps ＝ このドキュメントの Phase A 完了で「完全体」。Events ＝ Phase B 完了で「クライアント完成」とし、データは別計画とする。
|
||
|
||
この方針で進めれば、機能を積み増しせず、シンプルな完成形を維持できます。
|