はじめに
Busker Beat は路上ライブ演者の「出没情報」を地図上に可視化し、演者が日々の演奏記録をつけ、ファンとつながることができるアプリです。
- 技術スタック
- Flask (Python3)
- PostgreSQL (Renderでホスト)
- HTML/CSS/JavaScript/Leaflet.js
- Git/GitHub + Render でデプロイ・管理
- 完成イメージ: 地図クリックで投稿場所の緯度経度を自動入力 → モーダルからDBへ登録 → 即時マップに反映
アプリ概要
1. 地図（Leaflet.js）
- 地図上で投稿ポイントを可視化
- ダークなタイルレイヤーで独特な雰囲気
2. 投稿機能
- モーダルを使って演者名・投げ銭額・セトリなどを入力
- マップクリックで緯度経度取得
- Ajaxで即反映し、リロードなしでマーカーが増える
3. ユーザー認証
- ログイン・新規登録はモーダルで完結
- Flaskセッションでログイン状態を管理
- ログインユーザーだけが投稿可能
UIのコンセプトは「地図が中心」かつ「オブジェクト指向の直感的操作」です。
ディレクトリ構成
busker_beat/
├── myapp.py # Flaskのエントリポイント
├── requirements.txt
├── static/
│ └── css/
│ └── styles.css # ダークテーマ＋モノトーン＋赤
├── templates/
│ ├── index.html
│ ├── _map.html
│ ├── _post_cards.html
│ └── _auth_modal.html
└── config.py # DB接続情報
- _map.html: 地図 + 投稿フォームモーダル
- _post_cards.html: 投稿一覧（左カラム表示）
- _auth_modal.html: ログイン/新規登録のモーダル
- styles.css: 黒背景＋赤要素のUIテーマを定義
Flaskのルート処理
以下は主要ルートのみ抜粋。
@app.route("/")
def home():
conn = psycopg2.connect(...)
cur = conn.cursor()
cur.execute("SELECT * FROM bb_posts ORDER BY id DESC;")
posts = cur.fetchall()
# postsをテンプレートへ
return render_template("index.html", posts=posts)
@app.route("/login", methods=["GET", "POST"])
def login():
if request.method == "POST":
# DBからユーザー取得
# check_password_hashで照合
# セッションにuser_idを保存
return redirect("/")
return render_template("login.html")
@app.route("/signup", methods=["GET", "POST"])
def signup():
if request.method == "POST":
# generate_password_hashでハッシュ化
# DBにINSERT
return redirect("/")
return render_template("signup.html")
@app.route("/logout")
def logout():
session.clear()
return redirect("/")
@app.route("/posting", methods=["POST"])
def posting():
# Ajaxで受け取ったFormDataをDBにINSERT
# 成功ならJSONで { success: True, ...} 返す
return jsonify(...)
ポイント:
- /posting は画面表示しないバックエンド処理
- /login / /signup はモーダル想定だが、従来の画面遷移にも対応
- session["user_id"] があるかどうかでログイン判定
PostgreSQLでのデータ管理
DB構成は以下。SQLを管理しやすいようにシンプルに作成。
CREATE TABLE bb_users (
id SERIAL PRIMARY KEY,
uname TEXT UNIQUE NOT NULL,
email TEXT UNIQUE NOT NULL,
pw TEXT NOT NULL
);
CREATE TABLE bb_posts (
id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES bb_users(id),
artist_name TEXT,
lat FLOAT NOT NULL,
lng FLOAT NOT NULL,
audience INTEGER,
setlist TEXT,
amount INTEGER,
event_date DATE,
created_at TIMESTAMP DEFAULT now()
);
- ハッシュ化されたパスワードを pw に保存（werkzeug.security利用）
- user_id で bb_users と紐づけ → 投稿者追跡可能
- lat, lng は FLOAT。地図クリック→AjaxでINSERT
SQLの具体的なINSERT/SELECTはFlaskのコードに埋め込んだ。
レイアウト：オブジェクト指向UI
- 地図を画面右側、左に投稿一覧
- クリックで投稿: マップオブジェクトそのものに手を触れるイメージ
- モーダルを多用し、「画面遷移」を最小限に抑えた
これにより、「オブジェクトを配置する感覚」＋「入力フォーム」が直感的にマッチ。
企画図：
ラフ：
Git/GitHub + Renderでのデプロイ
- git add . && git commit -m "feat: add map + modals"
- git push origin main → Renderが自動デプロイ
- Render でDBを作り、環境変数に SECRET_KEY を設定
- 公開URL: https://busker-beat.onrender.com
継続的に変更しても、GitHub連携で自動ビルドされるのが便利。
まとめ & 所感
- Flaskでのルート処理は非常にシンプルに書ける
- Leafletとの連携で直感的な投稿が実現
- PostgreSQLでのリレーション管理により、ユーザー認証と投稿がしっかり紐づく
- オブジェクト指向UI (地図クリック→モーダル投稿→非同期DB保存) は、使ってみるとかなり直感的
今回の制作で学んだのは、シンプルな設計 + UI/UXを意識することで、少ないコード量でも便利なアプリができるということです。
今後の拡張
- ログインユーザー別のマイページ
- コメント機能 or いいね機能
- Tailwind導入でUIをさらに洗練
- Docker化で開発環境を安定化
もし似たような機能を作りたい人がいれば、ぜひ参考にしてみてください！
以上、「Busker Beat」開発の備忘録でした。