Posting Map (ポスティング管理マップ)

ポスティング（チラシ配布）活動支援アプリです。 地図上で配布エリアを管理し、配布状況（予定・完了・中止）を可視化します。

主な機能

• 現在地表示: アプリ起動時に現在地周辺の地図を自動表示し、すぐに活動を開始できます。
• エリア作図: 地図上に配布するエリア（多角形）を指でなぞって描画できます。
• ステータス管理: 各エリアを色で直感的に管理。
  • 🔵 予定 (Planned):
    
  • 🟢 完了 (Completed):
    
  • 🔘 中止 (Cancelled):
    
• ゲスト利用: Googleアカウントを持っていないユーザーも「ゲスト」として参加・編集が可能です。
• 枚数管理: 各エリアごとに「予定枚数」と「完了枚数」を数値で正確に記録できます。
• メモ機能: 記入者の名前やメモ、注意事項を記録できます。
• データ管理:
  • バックアップ: 設定画面から全データをJSONファイルとして保存・復元できます。
  • CSV連携: スポット情報をCSV形式でエクスポート・インポート可能。Excel等での分析やデータ移行に便利です。（写真URLの出力有無や不正データの自動除外機能付き）
  • 一括削除: 開発・テスト用に、エリアやスポットを一括削除する機能（Danger Zone）も備えています。
• 写真付きスポット登録: アルバムから写真をアップロードして地図上にピンを立てられます。EXIF情報があれば自動で位置を特定します。
  • 写真の建物の個別情報を記録できます。（「建物名称」の入力、「配布禁止/注意事項あり/その他」の分類と関連タグが選択できます。）
• PWA対応: スマートフォンのホーム画面に追加することで、ネイティブアプリのように全画面で動作します。

開発の軌跡

開発の過程、技術的な課題、デザインの変遷などは PROGRESS.md に詳しくまとめています。

今後の展望 (ロードマップ)

今後の機能追加や改善計画については ROADMAP.md をご覧ください。

技術スタック

• Framework: Next.js 16 (App Router)
• Database: Firebase Firestore (NoSQL)
• Auth: Firebase Authentication (Google Login)
• Map: React-Leaflet / Leaflet Draw
• Styling: Tailwind CSS (Custom Theme: Mint/Teal)
• Deployment: Vercel

アーキテクチャ選定理由 (Architecture Decision Record)

なぜ Firebase Storage ではなく Firestore なのか？

当初は大容量のデータを扱える Firebase Storage（ファイルストレージ）の利用も検討されましたが、最終的に Cloud Firestore（NoSQLデータベース）を選定しました。理由は以下の通りです。

1. 同時編集（コンフリクト）の防止:
   • File Storage は「エクセルファイルの共有」に似ており、複数人が同時に編集するとデータの上書きや消失のリスクがあります。
   • Firestore はデータベースであり、行単位・フィールド単位での更新が可能なため、チームでの同時利用に最適です。
2. パフォーマンスと通信量:
   • Storage はデータの一部だけ欲しくてもファイル全体をダウンロードする必要があります。
   • Firestore は画面に必要なデータだけをピンポイントで取得・更新できるため、データ量が増えても高速に動作します。
3. 将来的な拡張性 (Hybrid構成):
   • 将来的に写真の容量などが増えた場合でも、現在の Firestore 構成を捨てずに、「写真は Storage へ、場所データは Firestore へ」というハイブリッド構成へスムーズに移行可能です。

使い方（簡易）

1. Googleアカウント（管理者）またはゲストでログインします。
2. エリア配布:
   • 画面左上の「多角形アイコン」をタップして、地図上に配るエリアを描きます。
   • エリアをタップして「予定」「完了」「中止」などのステータスを変更したり、「予定枚数」「完了枚数」を記録して「保存」します。
3. 写真登録:
   • 画面右下のカメラアイコンから、その場所の写真をアップロードして地図上にピン留めできます。（カメラアイコンからの撮影はできません。）
   • 建物名や「配布禁止」「注意事項」などのタグ付けが可能です。
4. 表示切り替え:
   • 画面右下の「レイヤーアイコン」で、エリアとスポットの表示/非表示を切り替えられます。
5. データ管理:
   • 設定画面（管理者のみ）から、以下の機能が利用できます。
     • バックアップ: 全データをJSONファイルとして保存・復元。
     • CSV連携: スポット情報のCSVエクスポート・インポート。
     • 一括削除: 開発・テスト用のデータ全消去（Danger Zone）。

導入・開発ガイド

このアプリは、エンジニアでない方でも簡単に導入できる「クイックスタート」と、エンジニア向けの「ローカル開発」の両方に対応しています。

1. クイックスタート (初心者・一般利用向け)

※現在あまり初心者向けになっていないので随時改善中です。すみません。20260108作者

詳細な知識がなくても、以下の「Deploy」ボタンからこのアプリをローカルPCにセットアップできます。 ※ 事前にGoogleアカウントとGitHubアカウントの作成が必要です。

1. Deployボタンをクリック: GitHubリポジトリの作成とVercelへのデプロイが自動で始まります。
2. デプロイ完了: Vercelの完了画面に表示されるリンクからアプリを開きます。
3. セットアップウィザード: アプリを開くと案内画面（ウィザード）が表示されます。指示に従ってFirebaseの設定を行ってください。
   • ウィザードの最後に、本番運用に必要な環境変数（Vercel用）も案内されます。

2. ローカル開発手順 (エンジニア向け)

ソースコードを手元で編集・実行するための手順です。

前提条件

• Node.js 18以上
• Git

手順

1. リポジトリのクローン

   git clone https://github.com/calico-blanket/posting-map.git
   cd posting-map

2. 依存関係のインストール

   npm install

3. 環境変数の設定 ルートディレクトリに .env.local ファイルを作成し、以下の変数を設定してください。

   NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
   NEXT_PUBLIC_ADMIN_EMAILS=admin@example.com,another@example.com

   ※ Firebase Console の「プロジェクトの設定」から取得できます。

4. 開発サーバーの起動

   npm run dev

   http://localhost:3000 で起動します。

ライセンス

このプロジェクトは MIT License のもとで公開されています。 This project is licensed under the MIT License - see the LICENSE file for details.

作者

猫柄毛布（calico-blanket）

使用AI

Antigravitiy