「日経ソフトウェア１１月号：Googleマップにリアルタイム表示」を行ってみます。
主な内容は、以下の通りです。
１．「バス停名」をテキストで入力
２．入力したバス停名にマッチする都営バスのバス停を、プルダウンに表示する
３．プルダウンで選択したバス停をマーカーで表示し、バス停を経由する「運行系統」をチェックボックスで表示する
４．運行系統のチェックボックスを選択すると、バス路線と路線上のバス停を表示し、運航しているバスがどのバス停にいるのかを示すリアルタイム運行情報を地図上に表示する
５．「交通状況を表示」チェックボックスにチェックを入れると、バスに限らない道路の交通状況を地図上に表示する
アプリケーションの仕組み
このアプリケーションはWebブラウザから操作します。ユーザーの入力はいったんローカル上で動くWebサーバーがリクエストを受取、公共交通オープンデータセンターAPIにリクエストを送ります。その結果をWebブラウザに返して画面に表示しします。
利用するAPI
１．公共交通オープンデータセンター バス情報API/データダンプAPI
２．Googleマップの表示（Maps Javascript API)]
開発環境の整備
Webサーバー動作用にNode.jsを使用します。Node.jsは以下から談ロードできます。
上記URLをクリックすると以下の画面が表示されます。私の環境はWindows10(64bit)なので「Windows INstaller(.ms)」の64-bitをダウンロードします。基本的にダウンロードしたnode-v18.12.1-x64.msiをクリックして「next」を押していけばインストールは完了します。
アプリケーション作成に必要なソースコードは、日経ソフトウェアのサイトからダウンロードできます。
上記URLから「本誌バックナンバーを見る」→「日経ソフトウェア11月号」→「「特集2 バスのリアルタイム運行情報をGoogleマップに表示しよう」（t22211.zip）」の順にクリックするとダウンロードできます。
フォルダ構成
任意のフォルダに「project」という名でフォルダを作成します。
t22211.zipを解凍すると、server.jsとserver-config.jsonファイルがあるので、「project」フォルダの直下に置きます。
また、「project」フォルダ下に「data」フォルダと「public」フォルダを作成し、
「public」フォルダ下にindex.htmlファイルを置きます。
package.jsonの作成とライブラリーのインストール
「Windows PowerShell」を起動し、projectフォルダに移動します。
package.jsonを作成します。 -yをつけると yes/noの選択の省略(yesを選択）となります。
npm init -y
axiosとexpressをインストールします。
npm install -y axios express
実行するとpackage.json内にライブラリのバージョン情報が追加されます。
