このトピックでは、PLATEAU VIEW 1.1のソースコードを改良し、バリアフリールート情報に関する機能を追加します。バリアフリールート情報とは、段差や勾配、幅員（道の幅）、エレベータの有無、歩行者用信号の有無、点字ブロックの有無などの情報を持つ歩行ルート情報のことです。

PLATEAU VIEW 1.1は、TerriaJS（およびTerriaMap）をベースとしたWebGISです。TerriaJSを機能拡張するUIの作り方や外部APIの呼び出し方などTerriaJSにおけるプログラミングのほか、地理空間情報をPLATEAU VIEW 1.1で扱える形式に変換して配信する方法、さらには、データベースに格納された地理空間情報から、条件に合う最短ルートを見つける方法など、地理空間情報の扱い方全般も解説します。

本トピックの内容は「Terriaを用いたPLATEAU VIEWでの経路検索Webアプリの作り方」（2023年度PLATEAU Hands-onアーカイブ動画）でも制作方法をハンズオン形式で紹介しています。

【目次】

19.1　  このトピックの見どころ

　19.1.1　 このトピックの内容

　19.1.2　 トピックの構成

　19.1.3　 このトピックの見どころ

19.2　  想定する環境と事前準備

　19.2.1　 本トピックにおける環境の想定

　19.2.2　 Docker for Windows

　19.2.3　 QGIS

　19.2.4　 Anaconda

　19.2.5　 Spring Tools 4

19.3　  PLATEAU VIEW 1.1をホスティングする

　19.3.1　 Dockerイメージの構成

　19.3.2　 ファイル一式のダウンロード

　19.3.3　 Dockerコンテナの起動

　19.3.4　 PLATEAU VIEW 1.1の動作確認

19.1 _ このトピックの見どころ

19.1.1 _ このトピックの内容

このトピックでは、PLATEAU VIEW 1.1のソースコードを改良し、次の2つの機能を追加します。

①歩行ルート情報の表示

データカタログから、歩行ルートを選び、地図上に重ねて表示できるようにします。この歩行ルートは、国土交通省が提供する「歩行空間ネットワークデータ」（詳しくはコラム「歩行空間ネットワークについて」を参照）を変換したものです（図19-1）。変換した情報には、勾配や幅員などの情報も含まれており、経路をクリックすると、その詳細が表示されます（図19-2）。

②2点間のバリアフリールートの探索

歩行空間ネットワークデータが提供されている地域において、マウスクリックで「始点」と「終点」を選択し、「健常者向け」「車いす利用者向け」「高齢者・乳幼児連れ向け」「視覚障害者向け」のいずれかの条件を選ぶと、その条件に基づき、適したバリアフリールートを表示します。例えば、車いす利用者向けであれば、階段をできるだけ避けるルートを提示します（図19-3）。

19.1.2 _ トピックの構成

これらの2つの機能を追加するため、PLATEAU VIEW 1.1を中心に、図19-4のように構成します。

図に示したように、「歩行ルート情報の表示」（①）と「2点間のバリアフリールートの探索」（②）の機能は、独立しています（互いに関連しないので、どちらか一方だけを実装することもできます）。

①歩行ルート情報の表示

歩行ルート情報の表示は、「データカタログ」の機能を使って実現します。
データカタログはTerriaJSの機能であり、PLATEAU VIEW 1.1では、この機能を使って、「鉄道駅」「ランドマーク」「人流データ」などのデータセットが選べるように作られています。このトピックでは、このデータカタログから、「歩行ルート情報」を選べるようにします。

PLATEAU VIEW 1.1のベースとなっているTerriaJSでは、WMSプロトコルで配信されているマップ情報をデータカタログとして表示できます。

WMSプロトコルで歩行ルートを配信するのに使うのが、GeoServerです。GeoServerでは、PostgreSQLデータベースにGIS機能を追加するPostGISをインストールした環境と連携し、データベースに格納した地理空間情報を配信できます。

そこで、歩行空間ネットワークとして提供されているデータを変換して、PostGISにインポートしておきます。変換やインポート作業には、オープンソースのGISソフトであるQGISを使います。

このトピックでは、GeoServerから、こうして変換した歩行空間ネットワークデータを配信しますが、この手法は、地図と重ねたいデータを配信する汎用的な方法として使えます。例えば、バスの路線、渋滞情報など、交通に関する情報はもちろん、敷設された水道管やガス管などの情報を表示するなどにも応用できるでしょう。

②2点間のバリアフリールートの探索

2点の座標と探索条件を渡すと、適切なバリアフリールートを探索して結果を返すWeb APIを開発することで実装します。Web APIは、どのような言語で作ってもかまいませんが、本トピックでは、JavaのSpring Bootフレームワークを使って実装します。

このWeb APIでは、PostgreSQLに格納された歩行空間ネットワーク情報を対象にルート探索します。ルートの探索には、PostgreSQLに経路探索機能を追加するpgRoutingモジュールを使います。

PLATEAU VIEW 1.1のソースを改良し、マウスで始点・終点をクリックし、「健常者向け」「車いす利用者向け」などの探索条件を選べるUIをJavaScriptで実装します。このプログラムから、ルート探索のWeb APIを呼び出して結果を受け取り、その結果をユーザーに表示します。

コラム：歩行空間ネットワークについて

国土交通省は、バリアフリー・ナビプロジェクトとして、ICTを活用した歩行者移動支援サービスの普及を推進しています。歩行空間ネットワークは、このサービスに不可欠なバリアフリー情報です。

歩行空間ネットワークのデータは、段差や幅員などのバリアフリーに関連する情報を付与した「リンク」と、リンクの結節点を示す「ノード」で構成されています。

【歩行空間ネットワークデータの概要】

https://www.mlit.go.jp/sogoseisaku/soukou/seisakutokatsu_soukou_tk_000026.html

■歩行空間ネットワークの利活用

歩行空間ネットワークデータは、バリアフリーマップの作成やバリアフリールートのナビゲーションなどで、ICTを活用した歩行者移動支援サービスを提供し、高齢者、障害者などの利便性向上を実現できます。

歩行空間ネットワークを活用したバリアフリールートの案内例は、例えば図19-7に示すとおりであり、本トピックでは、まさにこれを実現します。

より具体的な方法やプログラムのコードについては、「エリアマネジメント・ダッシュボード構築 技術検証レポート(mlit.go.jp)」に記載されています。本トピックで用いる最適な経路の探索アルゴリズムは、この記載に基づくものです。

■歩行空間ネットワークのデータ構成

歩行空間ネットワークデータの仕様は、国土交通省が定義しており、「歩行空間ネットワークデータ等整備仕様」として公開されています。この仕様では、構成する属性の種類やノード、リンクの配置方法について定義されています。

【歩行空間ネットワークデータ等整備仕様】

https://www.mlit.go.jp/common/001244374.pdf

リンクの情報項目と属性情報の例を、図19-8に示します。

参考までに、歩道分類別のリンクの配置方法の事例を図19-9に示します。

■歩行空間ネットワークのオープンデータ

整備された歩行空間ネットワークデータは、「歩行者移動支援サービスに関するデータサイト」にて公開されており、誰でもダウンロードできます。

【歩行者移動支援サービスに関するデータサイト】

https://www.hokoukukan.go.jp/top.html

■歩行空間ネットワークの整備ツール

提供されている歩行空間ネットワークを使うだけでなく、独自のデータとして作ることもできます。そのためのツールが、「歩行空間ネットワークデータ整備ツール」です。

このツールは、地図（地理院地図2500分の1）に、線データ「リンク」と点「ノード」を直接描画でき、視覚的に入力内容を確認しながらデータを作成できます。

利用申請すれば、誰でも使えます。

【歩行空間ネットワークデータ整備ツールを利用する】

https://www.mlit.go.jp/sogoseisaku/soukou/sogoseisaku_soukou_mn_000008.html

19.1.3 _ このトピックの見どころ

このトピックの見どころは、次のとおりです。

①PLATEAU VIEW 1.1のホスティング

PLATEAU VIEW 1.1は、オープンソースのプロジェクトです。このソースコードを入手し、稼働に必要なソフトウェアをインストールならびに構成して、まずは、PLATEAU VIEW 1.1を、何も手を加えない状態で動くようにします。

次項で説明しますが、Dockerを使って構築します。これらの工程を理解することで、PLATEAU VIEW 1.1を自らホスティングする方法を学べます。

②データカタログから参照可能なデータセットの配信

GeoServerを用いて、PLATEAU VIEW 1.1から参照可能なデータセットを配信する方法を学びます。PostGISを有効にしたPostgreSQLと連携し、格納されているマップデータを配信します。

PostgreSQLデータベースに地理空間情報（シェイプファイル形式）をインポートするには、QGISを使います。

③UIの拡張とWeb APIの呼び出し

PLAVEAU VIEW 1.1のソースコードを改良し、マウスクリックで2点を選んだり、探索条件を指定するUIを作ったりすることで、UIを拡張する方法を学びます。

このトピックで習得したことを応用すれば、PLATEAU VIEW 1.1にメニューやボタンをはじめとした、さまざまなUIを追加できます。また地図上でクリックして、その経緯度を取得するUIは、標準のPLATEAU VIEW 1.1には存在しないので、そうしたUIを実装したいときは、大きく参考になるでしょう。またWeb APIを呼び出す方法を知ることで、外部のプログラムとの連携方法も習得できます。

なおこの手法は、PLATEAU VIEW 1.1に限らず、TerriaJS全般で利用できる手法です。

④ルート探索

ルート探索は、PLATEAU VIEWの話題とは少し離れ、歩行空間ネットワークのデータを、条件に基づいて探索する内容を解説します。

ルート探索には、PostgreSQLにルート探索の機能を追加するpgRoutingを利用します。最適なルートを探索するプログラムは、地理空間情報上で経路を探し出したい、さまざまな場面で活用できるでしょう。

19.2 _ 想定する環境と事前準備

19.2.1 _ 本トピックにおける環境の想定

本トピックでは、図19-11に示す環境を想定します。

構成するソフトウェアとバージョンは、表19-1のとおりです。

■Linux

OSは、Ubuntu22.04を使います。

■PLATEAU VIEW 1.1

PLATEAU VIEW 1.1の環境は、Node.js上で動かします。CesiumとTerria.jsを取り込んで構成しています。

■GeoServer

WebマップサービスのGeoServer は、Javaで作られたソフトウェアです。Tomcat上で稼働させます。

■経路探索Web API

経路探索Web APIは Javaで作り、同じく、Tomcatで稼働させます。

■データベース

データベースは、PostgreSQLを使います。PostgreSQLに、位置情報を扱う拡張であるPostGISと、ルート探索を扱う拡張であるpgRoutingを追加します。

■Webサーバー

全体のWebサーバーとしては、Apacheをつかいます。PLATEAU VIEW 1.1とWeb API、Geo Serverへのリバースプロキシとして動作させます（図19-12）。
3D Tilesは外部に公開されているWebサーバーから取得し動作させます。

19.2.2 _ Docker for Windows

このトピックの内容は、実際の物理的なサーバーでも構築できますが、手軽に行うため、仮想化ソフトウェアであるDockerを用いて構築します。
PLATEAU VIEW 1.1を含んだDockerfile一式は、ダウンロード可能な状態で提供しています（URLは後述）。

このトピックでは、提供しているDockerfile一式を「Docker for Windows」で動かすことを想定します。
あらかじめ、下記のサイトからDocker for Windowsをダウンロードし、インストールしておいてください。

提供するDockerコンテナは、ひとつのDockerコンテナにPLATEAU VIEW 1.1のほか、GeoServerやPostgreSQLなども含まれているため、メモリを多く消費します。メモリが少ない環境では、動作しない可能性があるので注意してください。このトピックでは、16MBのメモリ環境のPCで動作確認をしています。

［Docker for Windows］

https://docs.docker.jp/docker-for-windows/install.html

19.2.3 _ QGIS

「歩行空間ネットワーク」のデータを変換したり、PostgreSQLにインポートしたりするため、オープンソースのGISである「QGIS」を使います。下記のサイトからダウンロードし、インストールしておいてください。
このトピックでは、バージョン3.24.3を使いました。

［QGIS］

https://qgis.org/

19.2.4 _ Anaconda

詳しくは後述しますが、2点間のバリアフリールートを探索する処理では、「健常者向け」「車いす利用者向け」「高齢者・乳幼児連れ向け」「視覚障害者向け」などの条件に合うルートを探索するため、歩行空間ネットワークのデータとして含まれるそれぞれの経路に対して、「段差がどの程度か」「幅員がどのぐらいか」などを、あらかじめ事前にコストとして計算しておき、ルートを探索する際は、条件に応じ、もっともコストが低いルートを見つける仕組みで実装することにします。

事前のコスト計算には、Pythonで書いた小さなプログラムを使います。そのプログラムを動かすための環境として、Anacondaを使います。下記のサイトからダウンロードし、インストールしておいてください。

［Anaconda］

https://www.anaconda.com/

19.2.5 _ Spring Tools 4

経路探索のWeb APIはJavaを使い、フレームワークとして、Spring Bootを使って構築します。そのための開発環境として、Spring Tools 4を使います。

「Spring Tools 4 for Visual Studio Code」「Spring Tools 4 for Eclipse」「Spring Tools 4 for Theia」がありますが、このトピックでは、Spring Tools 4 for Eclipseを使います。下記のサイトからダウンロードし、インストールしておいてください。ソースコードの編集やwarファイルのビルドに使います。

［Spring Tools 4］

https://spring.io/tools

19.3 _ PLATEAU VIEW 1.1をホスティングする

まずは、PLATEAU VIEW 1.1を自身のPC（サーバー）で動かすところまでを説明します。

19.3.1 _ Dockerイメージの構成

このチュートリアルでは、手軽に試せるように、必要なソフトウェア一式があらかじめインストールされたDockerイメージを提供しています。
Dockerイメージには、次のものが含まれています。

・Ubuntu
・Node.js
・PLATEAU VIEW 1.1（Cesium＋TerriaJS）
・Apache
・Tomcat
・PostgreSQL+PostGIS, pgRouting

次のものは、Dockerイメージには含まれません。Dockerコンテナを起動してから、別途、インストールします。

・GeoServer
・経路探索の Web API
・歩行空間ネットワークデータ

19.3.2 _ ファイル一式のダウンロード

必要なファイル一式を、以下のリポジトリからダウンロードしてください

【PLATEAU-Terria-web-app】

https://github.com/Project-PLATEAU/PLATEAU-Terria-web-app.git

ファイルの構成は、下記のとおりです。

19.3.3 _ Docker コンテナの起動

次の手順で、Dockerコンテナを起動します。

【手順】PLATEAU VIEW 1.1 がインストールされたDockerコンテナの起動

［1］作業フォルダを用意する

適当な作業フォルダを用意します。例えば、C:¥workなどです。

［2］作業フォルダのコピー

前述のGitHubからダウンロードしたファイル一式のうち、Settings/docker以下のファイルの中身をすべて、［1］のフォルダの直下にコピーします。

［3］GeoServerの準備

GeoServerのwarファイルを用意します。下記のページから、ZIP形式でダウンロードします。

［1］のフォルダの下にwebappsという名前のフォルダを作り、ZIPファイルに含まれるgeoserver.warファイルをコピーします。

【GeoServerのダウンロード】

https://sourceforge.net/projects/geoserver/files/GeoServer/2.20.4/geoserver-2.20.4-war.zip/download

C:¥work
├docker-compose.yaml
├Dockerfile
├mods_proxy_settings.txt
├README.md
├startup.sh
└webapps
     └geoserver.war

図19-13 作業フォルダの構成

※上記リスト内、「¥」表記の箇所はフォントの設定によっては半角バックスラッシュとなります。なお、文字コードとしては同じですので、リストからコピーのうえ使っていただいて構いません。

［4］コンテナの起動

コマンドプロンプトを開き、［1］のフォルダをカレントフォルダにするため、次のように入力します。

cd C:¥work

※上記リスト内、「¥」表記の箇所はフォントの設定によっては半角バックスラッシュとなります。なお、文字コードとしては同じですので、リストからコピーのうえ使っていただいて構いません。

そして次のように、Dockerイメージをビルドします（最後の「.」を忘れないようにしてください）。環境にもよりますが、イメージのビルドには、15分ほどかかります。

docker build -t badhbh:1.5.

ビルドが完了したら、次のようにdocker compose upコマンドを実行することで、コンテナを起動します（2回目以降の起動は、上記のdocker buildは必要なく、下記のように、docker composeコマンドの実行のみで起動します）。環境にもよりますが、コンテナの起動に10分ほど要します。

※上記リスト内、「¥」表記の箇所はフォントの設定によっては半角バックスラッシュとなります。なお、文字コードとしては同じですので、リストからコピーのうえ使っていただいて構いません。

docker compose up

19.3.4 _ PLATEAU VIEW 1.1の動作確認

コンテナが起動したら、ブラウザから以下にアクセスし、PLATEAU VIEW 1.1が起動することを確認してください。

http://localhost:8080/plateau/

［＋データを地図上で見る］をクリックして、データカタログから何かデータを追加し、それが地図と重ねて表示されることを確認してください。

export NODE_OPTIONS=--max_old_space_size=4096
yarn
yarn gulp
yarn start

ここまでで、PLATEAU VIEW 1.1の起動の準備ができました。