[!TIP]

もっと高度な屋内ナビゲーションソリューションをお探しですか？

OpenIndoorMaps をお試しください - マップ編集、3Dビュー、屋外マップ統合機能を搭載。

Pathpal: ウェブベースの屋内案内システム

Pathpalは屋内ナビゲーションを革新するために設計された革新的なウェブアプリケーションです。インタラクティブな地図と効率的な経路探索アルゴリズムを使用し、複雑な屋内空間を直感的にナビゲートするソリューションを提供します。
デモ: Pathpalを訪問

アプリについて

本プロジェクトは、屋内案内とナビゲーションのためのインタラクティブマップに焦点を当てた私の卒業プロジェクトのバリエーションです。インタラクティブなSVGマップを特徴とし、ダイクストラアルゴリズムを利用して注目地点（POI）への最短経路を計算します。当初はBLE技術を用いた屋内位置測定を試みましたが、Bluetooth Web APIの実験的性質のため、このバリエーションでは省略されています。

[!WARNING]

本プロジェクトのバックエンドは削除されています。すべてのデータはJSONファイルに保存されています。本プロジェクトはプロトタイプであり、本番環境での使用は推奨されません。より包括的なソリューションについては、新しいプロジェクトOpenIndoorMapsをご覧ください。

スクリーンショット

	クリック時にオブジェクト情報を表示
	最短経路計算のデモンストレーション

機能

インタラクティブなSVGマップ：複雑な屋内空間を簡単にナビゲート。
ダイクストラの経路探索：目的地までの最短経路を計算。
レスポンシブデザイン：あらゆるデバイスと画面サイズに最適化。
カスタマイズ可能なPOI：興味ポイントの名前とカテゴリを編集可能。
ピンチズーム：タッチジェスチャーで地図の拡大縮小が簡単。

技術

Pathpalは速度、効率性、適応性のために最新のウェブ技術で構築されています：

React
Vite
TypeScript
TailwindCSS
SVG
ダイクストラのアルゴリズム

セットアップ

以下の手順でプロジェクトを起動してください：

リポジトリをクローン：お好みのGitクライアントを使って、このリポジトリをローカルマシンにクローンします。

Node.jsをインストール：このプロジェクトにはNode.jsが必要です。Node.jsバージョン21がインストールされていない場合は、nodejs.orgからダウンロードしてインストールしてください。

依存関係をインストール：ターミナルでプロジェクトディレクトリに移動し、以下のコマンドを実行して必要な依存関係をインストールします：

bash
   npm install


アプリケーションの起動: 依存関係がインストールされたら、ターミナルで以下のコマンドを実行してアプリケーションを起動できます。

bash
   npm run dev


これらのコマンドを実行すると、デフォルトのウェブブラウザが自動的に開き、

localhost:5173` にアクセスして実行中のアプリケーションを確認できます。

技術的な洞察

マップ技術

SVG形式: マップは主にSVGで作成されており、その柔軟性とインタラクティブな機能により、詳細なナビゲーションに最適です。
画像形式のサポート: PNGやJPEGなどの様々な形式のマップ背景をサポートしており、インタラクティブな機能はSVGに最適化されています。

経路探索

ルート定義: マップ内のパスはナビゲーション可能なルートを表し、ダイクストラアルゴリズムが効率的な経路を計算するために不可欠です。
ダイクストラアルゴリズム: POI間の正確で迅速なナビゲーションを保証します。

コアマップ技術

SVGをデフォルト形式として使用: 本アプリケーションはスケーラビリティと操作の容易さから、主にSVG（スケーラブルベクターグラフィックス）ファイルをマップに使用しています。SVGは屋内空間のインタラクティブかつ動的な描画を可能にし、詳細なナビゲーション経路に最適です。
様々な画像形式のサポート: SVGがデフォルトですが、PNGやJPEGなど任意の画像形式をマップ背景として利用できる設計になっています。この柔軟性により、既存のフロアプランや地図をSVGに変換せずに使用可能です。ただし、主要なインタラクティブおよびナビゲーション機能はSVGに最適化されています。

経路描画とウェイファインディング

経路描画: ナビゲーション機能には、マップ内でパスを定義する必要があります。これらのパスは歩行可能なルートを示し、ウェイファインディングアルゴリズムにとって重要です。SVGファイルでは、パスを直接描画および編集でき、ナビゲーションルートを正確に制御できます。
ウェイファインディングアルゴリズム: アプリケーションは、ダイクストラアルゴリズムを利用してマップ上の注目地点（POI）間の最短経路を計算します。このアルゴリズムはマップ上に描かれたパスのネットワーク上で動作し、効率的かつ正確なナビゲーションを実現します。

マップのカスタマイズ

編集ツール: 開発者はAdobe IllustratorやBoxy SVGなどのベクターグラフィック編集ツールを利用してSVGマップを修正できます。この修正にはレイアウトの更新、POIの追加または削除、パスの調整が含まれます。以下のスクリーンショットはBoxy SVGを使用したマップ編集の例です。SVGからJSXへの変換にはTransform Toolsが便利です。

クレジット

このプロジェクトは私の卒業論文に触発され、メンターや仲間、maciejb2kのpathfinding appのようなリソースの支援によって大きな影響を受けました。

ライセンス

PathpalはMITライセンスのもとでオープンソース化されています。貢献やフィードバックを歓迎します！

--- Tranlated By Open Ai Tx | Last indexed: 2026-02-15 ---

indoor-wayfinder