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 を先に「完全体」にする
-
完了の定義がはっきりしている
「ラジアル削除 or 保留」「位置情報・スライダー・Lucide 統一」をやれば、Phase 1 として完成と宣言しやすい。
-
バックエンドに依存しない
Maps は既存 API のまま完成形にできる。Events の完全体は Synology の n8n + DB が前提で、工数と前提が大きい。
-
1アプリずつ仕上げる
まず Maps を「完成」にし、そのあと Events は「UI/UX とクライアント側は完成 → データは Synology 構築で実化」と段階を分けられる。
-
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 完了で「クライアント完成」とし、データは別計画とする。
この方針で進めれば、機能を積み増しせず、シンプルな完成形を維持できます。