本リポジトリでは、2025 年度の Project PLATEAU で開発した「PLATEAU-SNAP-CMS」のソースコードを公開しています。 「PLATEAU-SNAP-CMS」は、スマートフォン撮影画像を活用した3D都市モデルへのテクスチャ付与システム (PLATEAU SNAP) の操作用フロントエンドサーバーです。
スマートフォンで撮影した画像をもとに 3D 都市モデルの建築物のテクスチャ(地物の外観)を抽出・生成し、PLATEAU SNAPのデータベースに登録・蓄積可能なツールを開発しました。
本システム (PLATEAU-SNAP-CMS) は、PLATEAU SNAP の操作用フロントエンドです。 モバイルアプリ (PLATEAU-SNAP-App) で収集された画像に対し、バックエンド (PLATEAU-SNAP-Server) が行う処理（テクスチャ適用、エクスポート等）を指示・制御するユーザーインターフェースを提供します。
各コンポーネントの役割は以下の通りです。
- PLATEAU-SNAP-App: 画像の撮影・アップロード
- PLATEAU-SNAP-Server: データの蓄積、画像処理、モデル生成（バックエンド処理）
- PLATEAU-SNAP-CMS: 処理の実行指示、結果確認、データエクスポート（操作パネル）
※自治体職員が本システムを利用するにあたり、必ずしもすべてのコンポーネントを自ら構築することを前提とするものではありません。運用体制に応じて、外部事業者による構築・保守運用を想定しています。
本システムの構築手順及び利用手順については操作マニュアルを参照してください。
| 機能名 | 機能説明 |
|---|---|
| 撮影画像検索・管理機能 | データベースに登録された撮影画像を一覧表示する機能 |
| テクスチャ編集機能 | 移動・拡大縮小により、撮影画像を建物の面に合わせる機能 |
| テクスチャ適用機能 | 編集したテクスチャ画像を建物の指定した面に貼り付け、3Dモデルに反映させる機能 |
| 3Dモデルエクスポート機能 | テクスチャが付与された3D都市モデルを生成し、ファイルとしてダウンロードする機能 |
| 項目 | 名称 | バージョン | 内容 |
|---|---|---|---|
| 言語 | TypeScript | 5.x | 静的型付け（型チェック）による安全な JavaScript |
| UI ライブラリ | React | 18.x | コンポーネント指向の UI 構築 |
| フレームワーク | Remix | 2.x | React ベースのフルスタック Web フレームワーク |
| ビルド | Vite | 6.x | 開発サーバ・ビルド |
| スタイリング | Tailwind CSS | 3.x | ユーティリティファーストな CSS フレームワーク |
| 状態管理 | Zustand | 5.x | 軽量なステート管理ライブラリ |
| データ取得 | TanStack Query | 5.x | サーバーデータ取得・キャッシュ |
| 画像編集・描画 | Konva / React-Konva | 9.x / 18.x | Canvas 操作、画像の変形・編集に使用 |
| HTTP クライアント | Axios | 1.x | API 通信 |
| テスト | Vitest | 3.x | ユニットテスト・統合テスト |
| コンテナ | Docker | - | アプリケーションのコンテナ化 |
※ バージョン欄はメジャー版（x）で記載しています。正確な依存関係（実際にインストールされる版）は package-lock.json を参照してください。再現性を重視する場合は npm ci を使用してください。
- ブラウザ: Google Chrome, Microsoft Edge, Safari, Firefox 等のモダンブラウザ
- サーバー: Node.js 実行環境、または Docker コンテナ実行環境
| フォルダ名 | 詳細 |
|---|---|
| app | Remix アプリケーション本体（コンポーネント、ルート、ロジック等） |
| app/routes | Remix のルート（ページ、app/routes/api/ 配下は内部 API エンドポイント） |
| app/components | React コンポーネント（共通/機能別/ページ単位） |
| app/hooks | カスタム Hooks（画面ロジックの分離） |
| app/stores | Zustand による状態管理 |
| app/services | 外部 API 連携・HTTP クライアント設定（Axios など） |
| app/actions | ルート（Action/API）から呼び出すサーバー側処理（例: テクスチャ適用等） |
| app/loaders | ルート（Loader）から呼び出すデータ取得処理 |
| app/generated | Swagger/OpenAPI から生成した API クライアント |
| app/constants | 定数（API 定義、エラーメッセージ、テーマ等） |
| app/types | 型定義（アプリ内で共有する型） |
| app/utils | 汎用ユーティリティ関数 |
| app/assets | UI 用アセット（SVG、アイコン定義等） |
| app/test | テスト（Vitest） |
| docker | Docker 関連の構成ファイル |
| public | 静的アセット（そのまま配信されるファイル） |
| docs | ドキュメント（操作マニュアル等） |
| scripts | 開発補助スクリプト（例: API クライアント生成） |
| templates | コード生成用テンプレート（例: Swagger クライアント生成） |
- ソースコード及び関連ドキュメントの著作権は国土交通省に帰属します。
- 本ドキュメントはProject PLATEAUのサイトポリシー（CCBY4.0及び政府標準利用規約2.0）に従い提供されています。
- 本リポジトリは参考資料として提供しているものです。動作保証は行っていません。
- 本リポジトリについては予告なく変更又は削除をする可能性があります。
- 本リポジトリの利用により生じた損失及び損害等について、国土交通省はいかなる責任も負わないものとします。