名古屋市営バス乗り場案内 Web アプリケーション

📌 プロジェクト概要

このプロジェクトは、学校の授業の自由制作として開発した Web アプリケーションです。地図アプリケーション上でバス停の位置が不正確である問題を解決するために、交通局から配布されている公式の GTFS-JP（General Transit Feed Specification for Japan）データを活用し、全国の市営バス停の正確な位置情報をデジタルマップ上に表示します。

GTFS-JP は国土交通省が推奨する標準フォーマットであり、正確な停留所座標、路線情報、時間情報などが含まれています。このアプリケーションからユーザーはバス停の詳細情報を確認でき、各バス停に対してコメントを投稿・閲覧することで、より良いバス利用体験をサポートします。

🎯 開発背景

問題起点：

• 既存の地図アプリケーションではバス停の位置が時々不正確である
• ユーザーが正確な停留所位置を把握しにくい
• 複数の非公式データソースを参照する必要がある

解決方法：

• 交通局から配布される公式の GTFS-JP データを直接インポート
• Leaflet & OpenStreetMap を使用したインタラクティブ地図表示
• ユーザーレビュー機能で停留所の詳細情報を共有

期待される効果：

• 正確なバス停位置情報の提供
• ユーザーの利用体験向上
• 地方交通システムのデジタル化推進

📋 機能

実装済み機能

• ✅ ユーザー管理：ログイン・ログアウト機能
• ✅ バス停表示：バス停一覧と詳細ページ
• ✅ 地図表示：OpenStreetMap と Leaflet によるインタラクティブ地図表示
• ✅ GTFS-JP インポート：交通局の公式データを自動インポート
• ✅ コメント投稿：バス停ごとのコメント投稿機能
• ✅ コメント管理：コメント削除（投稿者のみ）
• ✅ セッション管理：ユーザーのセッション管理
• ✅ 入力検証：express-validator による入力値検証
• ✅ レスポンシブデザイン：モバイル対応 UI

🛠️ 技術スタック

• バックエンド：Node.js + Express.js
• データベース：SQLite + Prisma ORM
• テンプレートエンジン：EJS
• 認証：express-session
• 検証：express-validator
• 地図表示：Leaflet + OpenStreetMap（無料 API）
• CSS：カスタムスタイルシート
• フロントエンド：Vanilla JavaScript

📦 必須ライブラリ

{
  "dependencies": {
    "@prisma/client": "~6.0.1",
    "cookie-parser": "~1.4.6",
    "csv-parse": "^5.5.0",
    "debug": "~4.3.4",
    "ejs": "~3.1.9",
    "express": "~4.18.2",
    "express-session": "^1.18.2",
    "express-validator": "^7.3.1",
    "http-errors": "~2.0.0",
    "morgan": "~1.10.0",
    "prisma": "~6.0.1",
    "sqlite": "^5.1.1",
    "sqlite3": "^5.1.7"
  }
}

🚀 セットアップ手順

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

cd Final-issue
npm install

2. GTFS-JPデータの準備（オプション）

GTFS-JPデータを使用してバス停データを自動インポートする場合：

1. 名古屋市交通局の公式サイトからGTFS-JPデータをダウンロード
   • URL: https://www.kotsu.city.nagoya.jp/etc/kor/transit_data/
2. ダウンロードしたZIPファイルを展開して gtfs-jp/ ディレクトリに配置
3. stops.txt ファイルが gtfs-jp/stops.txt に存在することを確認

# ファイルが正しく配置されたか確認
ls -la gtfs-jp/stops.txt

3. データベースのセットアップ

# Prismaマイグレーション実行
npx prisma migrate dev --name init

# GTFS-JPデータをインポート（gtfs-jp/stops.txt が配置されている場合）
node prisma/seed_gtfs.js

4. アプリケーションの起動

# 開発環境での起動（nodemonを使用）
npm run dev

# または
npm start

サーバーは http://localhost:3000 で起動します。

📂 ディレクトリ構成

Final-issue/
├── app.js                 # メインアプリケーション
├── package.json           # 依存関係定義
├── .env                   # 環境変数
├── bin/
│   └── www               # サーバー起動スクリプト
├── prisma/
│   ├── schema.prisma     # データベーススキーマ
│   ├── dev.db            # SQLite データベースファイル
│   └── seed_gtfs.js      # GTFS-JPデータインポートスクリプト
├── gtfs-jp/
│   └── stops.txt         # GTFS-JPバス停データ
├── routes/
│   ├── index.js          # ホームページルート
│   ├── users.js          # ユーザー認証ルート
│   └── bus-stops.js      # バス停・コメント管理ルート
├── views/
│   ├── error.ejs         # エラーページ
│   ├── users/
│   │   └── login.ejs     # ログインページ
│   └── bus-stops/
│       ├── list.ejs      # バス停一覧ページ
│       └── detail.ejs    # バス停詳細ページ
└── public/
    ├── stylesheets/
    │   └── style.css     # スタイルシート
    └── javascripts/
        ├── map.js        # 地図表示用スクリプト
        └── comments.js   # コメント処理スクリプト

🔐 ユーザー管理

現在、このアプリケーションはユーザー登録機能がなく、ログイン機能から始まっています。データベースへのユーザーの直接登録または管理ツールを使用してユーザーを追加する必要があります。

💾 データベーススキーマ

User テーブル

カラム名	型	説明
id	Int	主キー（自動採番）
name	String	ユーザー名（ユニーク）
pass	String	パスワード

BusStop テーブル

カラム名	型	説明
id	Int	主キー（自動採番）
stop_id	String	GTFS-JP の停留所 ID（ユニーク）
stop_name	String	停留所名
stop_lat	Float	緯度
stop_lon	Float	経度
stop_code	String?	停留所コード（オプション）
stop_desc	String?	説明（オプション）
platform_code	String?	のりば番号（オプション）
stop_url	String?	停留所 URL（オプション）
createdAt	DateTime	作成日時（自動生成）
updatedAt	DateTime	更新日時（自動更新）

Comment テーブル

カラム名	型	説明
id	Int	主キー（自動採番）
userId	Int	ユーザー ID（外部キー）
busStopId	Int	バス停 ID（外部キー）
content	String	コメント内容

🌐 API エンドポイント

ホーム

• GET / - ホームページ表示

ユーザー管理

• GET /users/login - ログインページ
• POST /users/login - ログイン処理
• GET /users/logout - ログアウト

バス停・コメント

• GET /bus-stops - バス停一覧（地図表示付き）
• GET /bus-stops/:stop_id - バス停詳細（地図表示付き）
• POST /bus-stops/:stop_id/comments - コメント投稿
• DELETE /bus-stops/:stop_id/comments/:comment_id - コメント削除

🗺️ 地図機能について

このアプリケーションは完全に無料の APIを使用しています：

• OpenStreetMap：オープンソースの地図データ（ライセンス自由）
• Leaflet：軽量で無料の JavaScript 地図ライブラリ

地図の特徴

✅ API キー不要 - 登録やクレジットカードなしで使用可能
✅ オフライン対応可能 - 将来的にキャッシュ機能の追加が可能
✅ 軽量 - 約 40KB の JS ライブラリ
✅ 高機能 - マーカー、ポップアップ、ズーム機能など完全装備

地図表示ページ

1. バス停一覧ページ - 全バス停を地図上に表示

   • 全てのバス停がマーカーで表示
   • マーカーをクリックで詳細ページへリンク
   • 自動ズーム・パン機能で全バス停を表示

2. バス停詳細ページ - 個別バス停の地図表示

   • バス停位置を中心に表示
   • ポップアップでバス停情報を表示
   • ズーム 15 倍のレベルで表示

� 使用例

1. ログイン

1. ホームページで「ログイン」ボタンをクリック
2. ユーザー名とパスワードを入力
3. 「ログイン」をクリック

2. バス停を閲覧

1. 「バス停一覧」をクリック
2. バス停カードをクリックして詳細ページへ

3. コメント投稿

1. バス停詳細ページでコメントを入力
2. 「投稿」ボタンをクリック
3. コメントが表示されます

4. コメント削除

1. 自分のコメント右側の「削除」ボタンをクリック
2. 確認ダイアログで「OK」をクリック

🔧 開発環境の設定

Prisma Studio を使用した DB 確認

npx prisma studio

マイグレーション後の確認

# マイグレーション履歴を表示
npx prisma migrate status

# 新しいマイグレーションを作成
npx prisma migrate dev --name <migration_name>

⚠️ セキュリティに関する注意事項

このプロトタイプは開発学習目的のものです。本番環境での使用前に以下を実施してください：

• ⚠️ パスワードのハッシュ化（bcrypt など）
• ⚠️ SQL インジェクション対策の強化
• ⚠️ XSS 対策の実装
• ⚠️ CSRF 保護の追加
• ⚠️ HTTPS の使用
• ⚠️ 環境変数の適切な管理

🐛 トラブルシューティング

ポート 3000 が既に使用されている場合

PORT=3001 npm start

データベースをリセットしたい場合

# 全データを削除して再初期化
npx prisma migrate reset

Prisma クライアント生成エラー

npx prisma generate

CSV 読み込みエラー

❌ GTFS-JPインポートエラー: CSV parsing error

原因: ファイルのエンコーディングが UTF-8 でない
対応: テキストエディタで UTF-8 に変換して保存

バス停が表示されない

原因: GTFS-JP ファイルが見つからない
対応: gtfs-jp/stops.txt が正しく配置されているか確認してください

📚 参考リンク

• Express.js Documentation
• Prisma Documentation
• EJS Documentation
• GTFS-JP Specification
• Leaflet Documentation
• OpenStreetMap

📄 ライセンス

このプロジェクトは学習目的で作成されました。

---

最終更新: 2026 年 3 月 10 日