玉川大学コスモス祭 3Dマップ 仕様書 v0.3#

4.1 想定課題#

• 初来場者にはキャンパスの地理が分かりにくい
• 平面マップだけでは位置関係を把握しづらい
• トイレ、受付、模擬店、ステージなどを探すのに時間がかかる
• 現在地が分からないと案内情報の価値が下がる

4.2 解決方針#

本アプリでは、以下の 3 本柱で解決する。

1. 3D マップで場所の関係を把握しやすくする
2. 現在地表示で「今どこにいるか」を明確にする
3. 施設情報の検索・表示で目的地にたどり着きやすくする

5.1 最重要ターゲット#

• 外部来場者
  • 玉川大学キャンパスに不慣れ
  • スマホで会場案内を見たい
  • 受付、模擬店、トイレ、ステージを探したい

5.2 次点ターゲット#

• 在学生
  • 行きたい企画や模擬店を素早く探したい
• 運営スタッフ
  • 来場者案内の補助として使いたい

TIP

MVP では、外部来場者向けの分かりやすさを最優先する。
在学生向けの利便性は歓迎だが、初見ユーザーが迷わないことを優先する。

8.1 3Dマップ表示#

• キャンパス周辺の 3D 表示
• 建物や地形を含む全体俯瞰
• 回転、ズーム、移動に対応

8.2 現在地表示#

• ブラウザの位置情報 API を利用
• 現在地を地図上に表示
• 現在地ボタンで自位置へ戻れる

8.3 施設・会場表示#

以下のカテゴリを地図上に表示する。

• 模擬店
• トイレ
• 総合受付
• ステージ
• 休憩所
• 学食
• 出入口
• その他案内対象施設

8.4 施設詳細表示#

施設をタップしたとき、以下を表示する。

• 名前
• カテゴリ
• 簡単な説明
• 営業時間 / 開催時間
• 写真（可能なら）
• 現在地からの距離

8.5 カテゴリフィルター#

• 食べ物
• 展示
• ステージ
• トイレ
• 受付
• 休憩所 などのカテゴリごとの表示切り替え

8.6 近くの施設表示#

• 現在地付近の施設を簡易表示する
• 例：「近くのトイレ」「近くの模擬店」

10.1 室内対応の方向性#

将来的には、以下を拡張候補とする。

• 特定建物だけフロア切替に対応
• 教室 / 展示室 / ホールなどの室内 POI 表示
• 特定入口から先の案内情報
• 室内 3D モデルの重ね合わせ

10.2 初期版でやらない理由#

• 室内モデル作成コストが高い
• 室内現在地推定は別難易度
• 学園祭までの期間を考えると、まずは屋外案内を完成させる方が価値が高い

NOTE

室内は「今年の必須機能」ではなく、将来拡張として仕様に位置付ける。
ただし、入口・受付・特徴的な会場の 3D 化は、必要に応じて部分的に取り入れる。

11.1 マップ画面（メイン）#

主画面。基本的にここで完結させる。

11.2 施設一覧画面#

地図が苦手なユーザー向け。

11.3 施設詳細画面 / 下部シート#

11.4 イベント情報画面（余裕があれば）#

• ステージイベント
• 時間帯別スケジュール
• 特別企画

12.1 フロントエンド#

• Vite
• React
• TypeScript
• CSS Modules（または素の CSS / SCSS）

12.2 地図エンジン#

• MapLibre GL JS

12.3 3D 表示#

• Three.js
• 必要に応じて 3D Tiles

12.4 背景データ#

• PLATEAU 町田市 2025 年度データを背景ベース候補とする

12.5 学祭データ#

• GeoJSON / JSON で POI・カテゴリ・イベント情報を管理する

12.6 公開#

• Cloudflare Pages

TIP

CSS は Tailwind 前提にしない。
今回は、UI を追い込みやすく、HTML / JSX 構造を見失いにくい
CSS Modules か SCSS を基本方針とする。

13.1 構成イメージ#

1
[ブラウザ]
2
   ├─ React UI
3
   ├─ MapLibre GL JS
4
   ├─ Three.js custom layer
5
   ├─ Geolocation API
6
   ├─ GeoJSON / JSON 読み込み
7
   └─ 必要に応じて Scaniverse 由来 GLB 読み込み
8

9
[静的ファイル]
10
   ├─ public/data/pois.geojson
11
   ├─ public/data/categories.json
12
   ├─ public/data/events.json
13
   ├─ public/models/*.glb
14
   └─ public/images/*
15

16
[背景3D]
17
   └─ PLATEAU 町田市 3D Tiles / 必要範囲のみ利用
18

19
[デプロイ]
20
   └─ Cloudflare Pages

13.2 役割分担#

• MapLibre：Web 地図の土台
• PLATEAU：町田市 / 玉川大学周辺の背景 3D
• GeoJSON / JSON：模擬店・トイレ・受付・イベントなどの本体データ
• Geolocation API：現在地表示
• Scaniverse（必要に応じて）：玉川大学固有の目印や局所空間の 3D 化

14.1 MapLibre を使う理由#

• Web で扱いやすい
• 静的サイトと相性が良い
• 3D モデルや 3D Tiles と組み合わせ可能
• Mapbox に比べて公開時のコスト設計を単純化しやすい

14.2 PLATEAU を使う理由#

• 町田市の背景 3D を最初から使える
• 建築物や道路の 3D データがある
• 背景をゼロから作らなくてよい
• 学祭に必要な見た目の土台を早く作れる

14.3 学祭データを自作する理由#

• 本当に重要なのは「何がどこにあるか」
• 模擬店、トイレ、受付、ステージ、休憩所などは学祭固有データ
• 学祭当日の情報は自前で管理する必要がある

14.4 Scaniverse を補助的に使う理由#

• 校門、入口、看板、特徴物を 3D 化できる
• 玉川大学らしさを足せる
• 背景全体ではなく「目印」を強くできる

15.1.1 プロジェクト作成#

まずは Vite + React + TypeScript で静的サイトとして始める。

1
npm create vite@latest tamagawa-cosmos-map -- --template react-ts
2
cd tamagawa-cosmos-map
3
npm install

15.1.2 必要ライブラリ導入#

最低限、以下を入れる。

1
npm install maplibre-gl three
2
npm install 3d-tiles-renderer
3
npm install @turf/distance @turf/helpers

必要なら以下も候補にする。

1
npm install zod
2
npm install clsx
3
npm install sass

15.1.3 開発用サーバ起動#

1
npm run dev

NOTE

最初の段階では、地図が出ることだけを目標にする。
まだ 3D も POI も入れなくてよい。

15.2.1 役割#

• app/map/：地図と 3D 関連
• app/ui/：下部シートや一覧 UI
• app/data/：データ読み込み
• app/features/：距離計算、位置取得などのロジック
• public/data/：実データ
• public/models/：GLB など

TIP

最初にフォルダを切っておくと、
後で「地図ロジック」と「UI ロジック」と「データ処理」が混ざりにくい。

15.3.1 最初の到達目標#

• 画面いっぱいに地図が表示される
• 中心が玉川大学周辺
• スマホでも表示される

1
import { useEffect, useRef } from 'react'
2
import maplibregl from 'maplibre-gl'
3
import 'maplibre-gl/dist/maplibre-gl.css'
4

5
export default function MapView() {
6
  const mapRef = useRef<HTMLDivElement | null>(null)
7

8
  useEffect(() => {
9
    if (!mapRef.current) return
10

11
    const map = new maplibregl.Map({
12
      container: mapRef.current,
13
      style: 'https://tiles.openfreemap.org/styles/bright',
14
      center: [139.48, 35.57],
15
      zoom: 16,
16
      pitch: 45,
17
      bearing: 0,
18
      hash: true
19
    })
20

21
    map.addControl(new maplibregl.NavigationControl(), 'top-right')
22

23
    return () => map.remove()
24
  }, [])
25

26
  return <div style={{ width: '100%', height: '100dvh' }} ref={mapRef} />
27
}

WARNING

タイル提供元は 開発用 と 本番用 を分けて考える。
最初は動作確認を優先し、本番前に利用条件・配信方式・キャッシュ方針を確認する。

15.4.1 方針#

• navigator.geolocation.watchPosition を使う
• 現在地マーカーを更新する
• 現在地ボタンで追従できるようにする

15.4.2 ロジックの分離#

app/features/geolocation.ts にまとめる。

1
export type UserLocation = {
2
  lng: number
3
  lat: number
4
  accuracy?: number
5
}
6

7
export function watchUserLocation(
8
  onUpdate: (loc: UserLocation) => void,
9
  onError?: (error: GeolocationPositionError) => void
10
) {
11
  if (!navigator.geolocation) return null
12

13
  const id = navigator.geolocation.watchPosition(
14
    (pos) => {
15
      onUpdate({
16
        lng: pos.coords.longitude,
17
        lat: pos.coords.latitude,
18
        accuracy: pos.coords.accuracy
19
      })
20
    },
21
    (err) => onError?.(err),
22
    {
23
      enableHighAccuracy: true,
24
      maximumAge: 5000,
25
      timeout: 10000
26
    }
27
  )
28

29
  return id
30
}
31

32
export function clearUserLocationWatch(id: number | null) {
33
  if (id !== null && navigator.geolocation) {
34
    navigator.geolocation.clearWatch(id)
35
  }
36
}

15.4.3 UI の考え方#

• 初回は「現在地を使う」ボタンを出す
• 許可後、青い点を出す
• 精度が悪いときは「やや不正確」表示も検討する

NOTE

室内では GPS 精度が落ちる前提で設計する。
初期版では 屋外の現在地表示が主用途 である。

15.5.1 先にコードを書かない#

まず POI データ構造を確定する。

1
{
2
  "type": "FeatureCollection",
3
  "features": [
4
    {
5
      "type": "Feature",
6
      "geometry": {
7
        "type": "Point",
8
        "coordinates": [139.4800, 35.5700]
9
      },
10
      "properties": {
11
        "id": "info-main",
12
        "name": "総合受付",
13
        "category": "info",
14
        "description": "来場者向けの総合受付です",
15
        "hours": "10:00-16:00",
16
        "image": "/images/info-main.jpg",
17
        "tags": ["reception", "guide"]
18
      }
19
    }
20
  ]
21
}

15.5.2 カテゴリも分離する#

1
[
2
  { "id": "food", "label": "食べ物", "color": "#f97316" },
3
  { "id": "stage", "label": "ステージ", "color": "#8b5cf6" },
4
  { "id": "toilet", "label": "トイレ", "color": "#3b82f6" },
5
  { "id": "info", "label": "受付", "color": "#10b981" },
6
  { "id": "rest", "label": "休憩所", "color": "#06b6d4" }
7
]

15.5.3 データを先に整える理由#

• UI を作る前に、必要項目が確定する
• 後から DB を入れなくてもよい
• 静的ホスティングと相性が良い

TIP

学園祭アプリでは、
「どの技術を使うか」より「データをどう持つか」 の方が後々効く。

15.6.1 実装方法#

• GeoJSON を fetch する
• map.addSource で追加
• circle / symbol レイヤで表示
• タップ時に下部シートを開く

15.6.2 まずはシンプルに始める#

• 1レイヤ 1カテゴリでもいい
• 先に動かしてから色分けする

15.7.1 初期版の考え方#

ルート案内ではなく、現在地から近い施設を出す だけでもかなり便利。

15.7.2 実装方法#

• ユーザー位置と POI の距離を計算
• 上位 3〜5 件を出す
• タップで地図移動

1
import distance from '@turf/distance'
2
import { point } from '@turf/helpers'
3

4
export function calcDistanceMeters(
5
  from: [number, number],
6
  to: [number, number]
7
) {
8
  return distance(point(from), point(to), { units: 'kilometers' }) * 1000
9
}

NOTE

初期版で必要なのは 最短経路 ではなく、
「近くに何があるか」 を返すこと。

15.8.1 背景 3D の役割#

• 玉川大学周辺の立体感を出す
• 広いキャンパスの位置関係を把握しやすくする
• “大学祭アプリっぽさ”を強める

15.8.2 方法#

背景 3D は PLATEAU 町田市データ をベース候補とする。
まずは「玉川大学周辺だけ表示」することを前提に考える。

15.8.3 実装のやり方#

選択肢は 2 つ。

15.8.4 custom layer 用の責務#

plateauLayer.ts にまとめる。

1
export function createPlateauLayer() {
2
  // Three.js + 3D Tiles 読み込み処理
3
  // localTransform / MercatorCoordinate / camera sync をここに閉じ込める
4
}

15.9.1 Scaniverse の位置づけ#

Scaniverse は、室内ナビ完成ツールではなく、3D 資産作成ツール として使う。

15.9.2 何をスキャンするか#

優先順位は以下。

1. 校門・建物入口・案内看板
2. 学祭のゲートや特徴的な目印
3. 屋外オブジェ・モニュメント
4. 特定会場の入口周辺
5. 必要なら特定室内空間の簡易 3D 化

15.9.3 どう使うか#

1. Scaniverse でスキャンする
2. GLB などで書き出す
3. public/models/ に配置する
4. MapLibre + Three.js 上で現実座標に配置する

15.9.4 期待しないこと#

• 室内現在地の推定
• 室内経路探索
• 全建物室内対応

WARNING

Scaniverse は 「場所を 3D 化する」ことには強い が、
それだけで 「ナビゲーション」や「測位」まで完成するわけではない。

17.1 施設データ#

施設情報は GeoJSON を基本とする。

1
{
2
  "type": "FeatureCollection",
3
  "features": [
4
    {
5
      "type": "Feature",
6
      "geometry": {
7
        "type": "Point",
8
        "coordinates": [139.48, 35.56]
9
      },
10
      "properties": {
11
        "id": "stall-001",
12
        "name": "たこ焼き研究会",
13
        "category": "food",
14
        "description": "学生団体のたこ焼き模擬店",
15
        "hours": "10:00-16:00",
16
        "image": "/images/stall-001.jpg",
17
        "tags": ["food", "outdoor"]
18
      }
19
    }
20
  ]
21
}

17.2 カテゴリデータ#

1
[
2
  { "id": "food", "label": "食べ物", "color": "#f97316" },
3
  { "id": "stage", "label": "ステージ", "color": "#8b5cf6" },
4
  { "id": "toilet", "label": "トイレ", "color": "#3b82f6" },
5
  { "id": "info", "label": "受付", "color": "#10b981" }
6
]

17.3 イベントデータ#

1
[
2
  {
3
    "id": "event-001",
4
    "title": "軽音ライブ",
5
    "placeId": "stage-main",
6
    "start": "2026-11-01T11:00:00+09:00",
7
    "end": "2026-11-01T11:30:00+09:00",
8
    "description": "メインステージでのライブ企画"
9
  }
10
]

18.1 画面の基本原則#

• 1画面で完結できることを優先
• 2〜3 タップ以内で欲しい情報に到達
• 情報を詰め込みすぎない

18.2 下部シートを主役にする#

施設詳細は別ページ遷移より、
下部シート の方がモバイル体験に向く。

18.3 一覧画面は補助#

地図が苦手な人向けに一覧は用意するが、
主導線はあくまで地図画面に置く。

19.1 GitHub 連携前提#

• GitHub に push
• Cloudflare Pages でリポジトリ接続
• Vite の build 結果 dist を配信

19.2 代表設定#

1
Framework preset: Vite
2
Build command: npm run build
3
Build output directory: dist

19.3 注意点#

• public/ 配下の静的ファイルがそのまま配信される
• 大きすぎるモデルは避ける
• 相対パスの確認を行う

TIP

最初は 静的サイトとして成立する形 を優先する。
サーバサイド処理や DB は入れない。

20.1 最低限確認すること#

• iPhone / Android で開けるか
• 現在地が取れるか
• POI が表示されるか
• タップで詳細が出るか
• フィルターが効くか
• 近くの施設が出るか
• 地図が重すぎないか

20.2 実地確認#

可能なら玉川大学キャンパスで確認する。

• 受付位置が正しいか
• ステージ位置が正しいか
• GPS が現場で使い物になるか
• 入口周辺の案内にズレがないか

リスク1：3Dデータが重い#

対策

• 玉川大学周辺だけに絞る
• 背景 3D は必要範囲のみ
• Scaniverse モデルは後から追加

リスク2：現在地精度が安定しない#

対策

• 屋外中心で使う
• 「だいたいの位置」で使う前提
• 入口案内・施設検索中心にする

リスク3：機能を盛りすぎる#

対策

• 経路探索は入れない
• 室内ナビは入れない
• MVP 以外は後回し

リスク4：開発が長引く#

対策

• 先に地図＋現在地＋POI を完成させる
• 背景 3D は後からでもよい
• Scaniverse は余力追加にする

最優先#

• 地図
• 現在地
• 施設情報

次点#

• 3D の見栄え向上
• 一覧画面
• 近くの施設機能

後回し#

• 経路探索
• 室内ナビ
• 混雑表示
• 高度な演出

26.1 GitHub Syntax の注意#

以下のように書く。

1
> [!NOTE]
2
> これは GitHub Syntax の NOTE です。
3

4
> [!TIP]
5
> これは TIP です。
6

7
> [!WARNING]
8
> これは WARNING です。

26.2 GitHub リポジトリカード#

1
::github {repo="yourname/your-repo"}

26.3 動画埋め込み#

1
<iframe
2
  width="100%"
3
  height="468"
4
  src="https://www.youtube.com/embed/XXXXXXXXXXX"
5
  title="YouTube video player"
6
  frameborder="0"
7
  allowfullscreen>
8
</iframe>

26.4 実装メモ欄#

• 地図の初期表示
• 現在地表示
• POI データ作成
• 施設詳細 UI
• カテゴリフィルター
• 近くの施設
• 背景 3D
• スマホでの動作確認
• Cloudflare Pages 公開
• 必要なら Scaniverse モデル追加