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

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

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

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

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

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

https://github.com/poruruba/Planning_Client

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

# 全体構成

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

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

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


# セットアップ手順

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

https://github.com/poruruba/Planning_Client

```
> 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="dev@cordova.apache.org" 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アプリ開発の備忘録](https://qiita.com/poruruba/items/f03b1691fd0f113735b3)

# アプリ画面

こんな感じです。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/9a4077f2-4e58-c9c2-6a52-c90ed86637cf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ccac5fe6-cc81-f577-b781-a38c8a517d85.png)

以上