Kotlinで制作している、GoogleMapを使った、自作のゴミ拾いアプリ。制作11日目。
結論から言うと、本日、完成しました。
Node.jsを使いMySQLと接続する予定でしたが、レンタルサーバでは使えないようなので、PHP+jQueryを使う方法に変更しました。
#PHPでMySQLに接続しJson形式で出力
Qiitaで紹介されているコードを参考に、若干修正を加えて、動作チェック用のシンプルなコードを作成してみました。
<?php
define('DSN','mysql:host=（ホスト）;dbname=（データベースネーム）');
define('DB_USER','（ID）');
define('DB_PASSWORD','（PASS）');
define('TABLE_NAME','（テーブル名）');
error_reporting(E_ALL & ~E_NOTICE);
mb_language("uni");
mb_internal_encoding("utf-8");
mb_http_input("auto");
mb_http_output("utf-8");
try {
$dbh = new PDO(DSN, DB_USER, DB_PASSWORD);
} catch (PDOException $e) {
echo $e->getMessage();
exit;
}
$sth = $dbh->prepare("SELECT * FROM ".TABLE_NAME);
$sth->execute();
$userData = array();
while($row = $sth->fetch(PDO::FETCH_ASSOC)){
$userData[]=array(
'DATE'=>$row['DATE'],
'type'=>$row['type'],
'latitude'=>$row['latitude'],
'longitude'=>$row['longitude']
);
}
header('Content-type: application/json');
echo json_encode($userData);
?>
出力結果：
※実際の位置情報を伏せる為、「000.000000000」にしています。
参考サイト：
#JavaScript（jQery）からPHPを実行
jQeryを使って、上記で作成したPHPを実行して、結果を、表示するだけのテスト用のシンプルな物です。
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function readPHP() {
return $.ajax({
url: "sql_read.php",
dataType: "json",
async: false
}).responseText;
}
var json = JSON.parse(readPHP());
for (let i = 0; i < json.length; i++) {
document.write(json[i].DATE);
document.write(json[i].type);
document.write(json[i].latitude);
document.write(json[i].longitude);
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
#昨日のコードと組み合わせて、地図上に表示
昨日作成したコードと、今日作成したコードを組み合わせて、MySQLから取得した位置情報を、地図上に表示してみます。
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script async="" src="https://maps.googleapis.com/maps/api/js?key=（APIキー）&callback=initMap"></script>
<script>
function readPHP() {
return $.ajax({
url: "sql_read.php",
dataType: "json",
async: false
}).responseText;
}
function initMap() {
var mapMainPosition = new google.maps.LatLng(（緯度）, （経度）);
var name = { 0: '空き缶/ペットボトル', 1: '袋ゴミ', 2: '粗大ごみ' };
var icon = { 0: 'gomi01.png', 1: 'gomi02.png', 2: 'gomi03.png' };
var json = JSON.parse(readPHP());
var data = new Array();
for (let i = 0; i < json.length; i++) {
var point = new google.maps.LatLng(json[i].latitude, json[i].longitude);
data.push({date: json[i].DATE, position: point, content: name[json[i].type],icon: icon[json[i].type]},);
}
var map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 14,
center: mapMainPosition,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (i = 0; i < data.length; i++) {
var myMarker = new google.maps.Marker({
position: data[i].position,
map: map,
icon: {
url: data[i].icon,
scaledSize: new google.maps.Size(40, 40)
}
});
attachMessage(myMarker, data[i].content,data[i].date);
}
}
function attachMessage(marker, msg,date) {
google.maps.event.addListener(marker, 'click', function(event) {
new google.maps.InfoWindow({
content: msg + "("+date+")"
}).open(marker.getMap(), marker);
});
}
</script>
</head>
<body>
<div id="gmap" style="width:600px; height:400px; background-color:orange"></div>
</body>
</html>
お見せ出来ないですが、MySQLに記録されている位置情報を読み取って、地図上に表示できるようになっています。
#完成？
一応当初の目標だった、
１．Kotlinで制作した地図アプリから位置情報をGET送信
２．サーバサイドで、PHPでGETリクエストを受信し、MySQLに保存
３．非公開の為、BASIC認証を作成
４．MySQLに保存されたデータを、ブラウザで地図上に表示（HTML,CSS,JavaScript,jQuery,PHP）
を達成しました。
#今後の課題
現状は、ただ地図にマーカーを表示するだけなので、一般公開する場合は、セキュリティ面を考慮したり、WEBフレームワークのBootsTrapを使ったり、グラフ表示するなど、必要に応じて、今後カスタムしていくかもです。
Kotlinで制作したアプリに関しても、最小限の機能しかないので、拡張して機能を増やすなど。