はじめに
喫煙者にとって、外出先で喫煙所を探すのは意外と大変です。そこで、誰でも喫煙所の位置情報を地図上で確認・共有できるWebアプリ「喫煙所サーチ」を開発しました。
この記事では、Next.js、Firebase、Leaflet.jsを使ったアプリケーション開発の過程と、実装した主要機能について紹介します。
アプリの概要
喫煙所サーチは、地図ベースで喫煙所の位置情報を検索・共有できるコミュニティ型のWebアプリケーションです。
主な機能
- 📍 地図上での喫煙所検索: OpenStreetMapベースの地図で、現在地周辺の喫煙所を表示
- ➕ 喫煙所の新規追加: ユーザーが自由に喫煙所の位置情報を投稿可能
- 🎯 直感的なUI: 地図中心にピンを合わせて位置を指定する、モバイルフレンドリーな操作性
- 🔐 ユーザー認証: Firebaseによる安全な認証システム
- 📱 レスポンシブデザイン: PC・スマートフォンの両方で快適に利用可能
- 📝 メモ機能: 各喫煙所に「屋外」「灰皿あり」などの補足情報を追加可能
技術スタック
フロントエンド
- Next.js 14 (App Router)
- TypeScript: 型安全性を確保
- Tailwind CSS: モダンでカスタマイズ可能なスタイリング
- React Leaflet: 地図表示とインタラクション
バックエンド・インフラ
- Firebase
- Firestore: NoSQLデータベースとして喫煙所情報を保存
- Authentication: ユーザー認証（メール/パスワード、Google認証）
- Vercel: デプロイ・ホスティング
- Docker: 開発環境のコンテナ化
開発のポイント
1. 地図のビューポートベース取得による最適化
当初は全ての喫煙所データを一度に取得していましたが、Firebaseの無料枠を考慮して、表示中の地図範囲（ビューポート）内のデータのみを取得する仕組みに変更しました。
// 緯度範囲でフィルタリングし、経度はクライアント側でフィルタconst q = query( collection(db, SMOKING_AREAS_COLLECTION), where('latitude', '>=', minLat), where('latitude', '<=', maxLat));
これにより、読み取り回数を大幅に削減し、コストを抑えつつパフォーマンスも向上しました。
2. 直感的な位置指定UI
従来の「地図をクリックして位置を指定」方式から、地図中央に固定されたピンに合わせて地図を動かす方式に変更しました。
- モバイルでの操作性が大幅に向上
- タップした位置と実際の選択位置のズレを解消
- より正確な位置指定が可能に
3. セキュリティとプライバシー
- 利用規約・プライバシーポリシーを整備
- 投稿時の注意事項表示
- Firebaseのセキュリティルールによるデータ保護
4. モバイルファーストなデザイン
- タッチ操作に最適化されたボタン配置
- レスポンシブなメッセージボックス
- 画面サイズに応じた動的レイアウト調整
技術的な課題と解決策
課題1: Firestoreの複合クエリ制約
Firestoreでは、複数の範囲フィルタ（緯度と経度の両方）を同時に使用できません。
解決策:
- サーバー側（Firestore）: 緯度の範囲で絞り込み
- クライアント側（JavaScript）: 経度でフィルタリング
これにより、複合インデックス不要で効率的にデータを取得できました。
課題2: SSRとLeafletの互換性
LeafletはブラウザのDOM APIに依存するため、Next.jsのSSRと相性が悪い問題がありました。
解決策:
const MapComponent = dynamic(() => import('@/components/MapComponent'), { ssr: false,});
動的インポートとSSR無効化により、クライアントサイドでのみLeafletを読み込むようにしました。
課題3: カスタムピンのデザイン
既存の喫煙所（赤いピン）と追加予定地（緑のピン）を視覚的に区別する必要がありました。
解決策:
- CSSで3D風のカスタムピンを作成
- グラデーションとシャドウで立体感を表現
- 色の変更だけでテーマを切り替え可能な設計
デプロイとCI/CD
- Vercel: プレビュー環境とプロダクション環境の自動デプロイ
- Docker: ローカル開発環境の統一
- GitHubワークフロー: コードレビューとマージの管理
今後の展開
以下の機能追加を検討しています：
- 🔍 検索機能: 住所や駅名から喫煙所を検索
- ⭐ 評価システム: ユーザーによる喫煙所の評価
- 📸 画像のアップロード: 喫煙所の写真を追加可能に
- 🗺️ ルート案内: 現在地から喫煙所までのナビゲーション
まとめ
Next.js、Firebase、Leaflet.jsを組み合わせることで、ユーザーフレンドリーな位置情報共有アプリを構築できました。
特に以下の点が学びになりました：
- パフォーマンス最適化: ビューポートベースのデータ取得
- UX改善: モバイルファーストの設計思想
- コスト管理: Firebaseの無料枠を最大限活用
このアプリが、喫煙者の皆さんにとって少しでも役立つサービスになれば嬉しいです。
リンク
使用技術まとめ
| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js 14 (App Router) |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| 地図ライブラリ | Leaflet.js, React Leaflet |
| データベース | Firebase Firestore |
| 認証 | Firebase Authentication |
| ホスティング | Vercel |
| 開発環境 | Docker |
ご覧いただきありがとうございました！ 質問やフィードバックがありましたら、お気軽にコメントください。
コメント