今度、山手線を歩いて一周しようかなあと思っているのですが、散歩ルートを計画するのに都合がよいアプリが見当たらなかったので、自分で作りました。
以下のようなことができるようにします。
[事前準備]
・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="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アプリ開発の備忘録
アプリ画面
こんな感じです。
以上