散歩ルート計画アプリを作った

今度、山手線を歩いて一周しようかなあと思っているのですが、散歩ルートを計画するのに都合がよいアプリが見当たらなかったので、自分で作りました。
以下のようなことができるようにします。

[事前準備]
・GoogleMapで観光スポットを検索して散歩ルートに追加する。
・観光スポットの散策順番を入れ替えられる。
・観光スポットごとにメモを書き込んだり、URLを覚えておく。
・乗換案内アプリでの検索結果をメモとして保存しておく。

[当日]
・散歩中はGPS等を使って常に緯度経路を記録する。
・観光スポットの位置を表示する。
・観光スポットまでの道のりをGoogleMapを使ってルート表示する。
・観光スポットごとに写真を記録する。

[後日]
・当日歩行ルートを観光スポットとともに参照できる。

もろもろのソースコードは以下に上げました。

いろんなテクニックを使ったので、のちほど個別に投稿しようと思います。

全体構成

「散歩中はGPS等を使って常に緯度経路を記録する。」を実現するためには、ネイティブアプリが必要です。普段Androidを使っているので、Androidスマホで実現します。また、画面遷移がたくさんあるので、Cordovaを使ってHTML+Javascriptで実装します。

「観光スポットの位置を表示する。」を実現するために、ネイティブアプリのCordova上で地図を表示することになりますが、Map for Javascript（GoogleMap）を使いました。

歩行位置情報は、MariaDBに記録するようにしましたが、必須ではありません。通常はAndroidのSQLiteに保持しています。

セットアップ手順

以下からZIPダウンロードし、展開します。

> unzip Planning_Client-main.zip
> cd Planning_Client-main

MySQLまたはMariDBへのデータベース登録します。

CREATE TABLE `location` (
  `id` int(11) NOT NULL,
  `userid` text DEFAULT NULL,
  `lat` double NOT NULL,
  `lng` double NOT NULL,
  `speed` float NOT NULL,
  `datetime` bigint(20) NOT NULL,
  `location` geometry NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

ALTER TABLE `location`
  ADD PRIMARY KEY (`id`);

nodejs\api\controllers\planning-api\index.js の
以下の部分を書き換え

const DB_HOST = "【MySQLサーバのホスト名】";
const DB_PORT = 【MySQLサーバのポート番号】;
const DB_USER = "【MySQLサーバのユーザ名】";
const DB_PASSWORD = "【MySQLサーバのパスワード】";

> cd nodejs
> npm install
> node app.js

これで、ポート番号30080でWebサーバが立ち上がります。
ただし、Cordovaからアクセスするには、HTTPSにする必要があります。

> cd ..
> cordova create PlanningClient jp.or.myhome.sample.PlanningClient PlanningClient
※それぞれの名前はお好みで

> cd PlanningClient
> cordova plugin add ..\cordova\cordova-plugin-locationrecorder
> cordova plugin add cordova-plugin-camera
> cordova plugin add cordova-plugin-geolocation
> cordova plugin add cordova.plugins.diagnostic
> cordova plugin add https://github.com/napolitano/cordova-plugin-intent

config.xmlを編集します。

<?xml version='1.0' encoding='utf-8'?>
<widget id="jp.or.myhome.sample.PlanningClient" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>PlanningClient</name>
    <description>Sample Apache Cordova App</description>
    <author email="[e-mail]" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    
    <allow-navigation href="https://【立ち上げたサーバのドメイン名】/cordova_base/*" />
    <platform name="android">
      <content src="https://【立ち上げたサーバのドメイン名】/cordova_base/planning_client/android/index.html" />
      <preference name="cordova.plugins.diagnostic.modules" value="LOCATION" />
      <preference name="AndroidLaunchMode" value="singleTask"/>
      <config-file target="AndroidManifest.xml" parent="/manifest/application/activity">
          <intent-filter>
              <action android:name="android.intent.action.SEND" />
              <category android:name="android.intent.category.DEFAULT" />
              <data android:mimeType="text/plain" />
          </intent-filter>
      </config-file>
      <icon density="ldpi" src="res/icon/android/36x36.png" />
      <icon density="mdpi" src="res/icon/android/48x48.png" />
      <icon density="hdpi" src="res/icon/android/72x72.png" />
      <icon density="xhdpi" src="res/icon/android/96x96.png" />
      <icon density="xxhdpi" src="res/icon/android/144x144.png" />
    </platform>
</widget>

cordova\PlanningClient\res をresにコピーします。
cordova\PlanningClient\wwwの内容 を nodejs\public\cordova_base\planning_client\androidにコピーします。

以下のサイト「Google Map Platform」でAPIキーを発行します。
https://console.cloud.google.com/google/maps-apis/api-list

APIは、以下の3つを有効化します。

・Maps JavaScript API
・Places API
・Geocoding API

nodejs\public\cordova_base\planning_client\android\index.html の
以下の部分にAPIキーに書き換え

<script src="https://maps.googleapis.com/maps/api/js?key=【GoogleMapのAPIキー】&libraries=places,geometry&callback=initMap" async defer></script>

nodejs\public\cordova_base\planning_client\android\js\start.js の
以下の部分を書き換え

const base_url = "https://【立ち上げたサーバのURL】";

お好みで、以下の部分をコメントアウト

const vConsole = new VConsole();

> cordova platform add android
> cordova build android

生成されたPlanningClient\platforms\android\platform_www 配下の内容をnodejs\public\cordova_base\planning_client\android にコピーします。

以下のフォルダを作成
nodejs\public\planning

> cordova run android

(参考)
Cordovaアプリ開発の備忘録

アプリ画面

こんな感じです。

以上