# 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 完了で「クライアント完成」とし、データは別計画とする。 この方針で進めれば、機能を積み増しせず、シンプルな完成形を維持できます。