傘ログ (Kasalog)

傘の位置情報を記録・管理するWebアプリケーションです。NFCタグを使用して傘の現在位置を簡単に記録できます。

機能

• NFCタグスキャンによる位置情報の自動記録
• 手動での位置情報入力
• 記録された位置情報の一覧表示
• 地図上での位置表示
• 住所の自動取得

NFCタグの設定

書き込むURLの形式

NFCタグには以下の形式のURLを書き込んでください：

https://yourdomain.com/scan?umbrellaId=UMBRELLA_ID

例

https://yourdomain.com/scan?umbrellaId=UMBRELLA_001
https://yourdomain.com/scan?umbrellaId=UMBRELLA_002

重要な注意点

• umbrellaIdパラメータは必須です
• 傘ID（UMBRELLA_ID）は各傘で一意である必要があります
• HTTPSが必要です（位置情報取得のため）
• NFCタグをスキャンすると自動的に位置記録ページが開きます

使用方法

1. NFCタグを傘に取り付け、適切なURLを書き込みます
2. 傘を使用した後、NFCタグをスマートフォンでスキャンします
3. 位置情報の記録方法を選択します：
   • 自動取得（推奨）：GPS位置情報を自動で取得
   • 手動入力：緯度・経度を手動で入力
4. 記録完了後、位置一覧で確認できます

開発・デプロイ

This is a Next.js project bootstrapped with create-next-app.

開発サーバーの起動

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

ブラウザで http://localhost:3000 を開いて結果を確認してください。

app/page.tsxを編集することでページの内容を変更できます。ファイルを編集すると自動的にページが更新されます。

環境要件

• Node.js
• Supabase（データベース）
• HTTPS環境（本番環境での位置情報取得に必要）

技術スタック

• Next.js 15 (App Router)
• TypeScript
• Supabase
• OpenStreetMap (Nominatim API)

フォント

このプロジェクトはnext/fontを使用してGeistフォントを自動的に最適化・読み込みしています。

詳細情報

Next.jsについて詳しく学ぶには、以下のリソースを参照してください：

• Next.js Documentation - Next.jsの機能とAPIについて学ぶ
• Learn Next.js - インタラクティブなNext.jsチュートリアル

Next.js GitHub repositoryもチェックしてみてください。フィードバックやコントリビューションを歓迎します！

デプロイ

Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの制作者によるVercel Platformを使用することです。

Vercelでのデプロイ手順

1. GitHubリポジトリをVercelに接続

2. 環境変数の設定（重要！）

   Vercelダッシュボードの「Settings」→「Environment Variables」で以下を必ず設定：

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   

   ⚠️ 注意: この設定を忘れると「Missing Supabase environment variables」エラーでビルドが失敗します。

3. Supabase側の設定

   Supabaseダッシュボードで以下を設定：

   • Authentication → URL Configuration
     • Site URL: https://your-project-name.vercel.app
     • Redirect URLs: https://your-project-name.vercel.app/**

4. デプロイ実行

   環境変数設定後、Vercelで再デプロイしてください。

トラブルシューティング

ビルドエラー「Missing Supabase environment variables」が発生する場合:

1. Vercelダッシュボードで環境変数が正しく設定されているか確認
2. 環境変数名のタイプミスがないか確認（NEXT_PUBLIC_プレフィックス必須）
3. 設定後に再デプロイを実行

位置情報が取得できない場合:

• HTTPSが有効になっているか確認（Vercelでは自動的に有効）
• ブラウザで位置情報の許可が与えられているか確認

詳細については、Next.jsデプロイメントドキュメントを確認してください。