Kotlinで制作している、GoogleMapを使った、自作のゴミ拾いアプリ。制作11日目。

結論から言うと、本日、完成しました。

Node.jsを使いMySQLと接続する予定でしたが、レンタルサーバでは使えないようなので、PHP+jQueryを使う方法に変更しました。

#PHPでMySQLに接続しJson形式で出力

Qiitaで紹介されているコードを参考に、若干修正を加えて、動作チェック用のシンプルなコードを作成してみました。

sql_read.php

<?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を実行して、結果を、表示するだけのテスト用のシンプルな物です。

sql_read.html

<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から取得した位置情報を、地図上に表示してみます。

index.html

<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で制作したアプリに関しても、最小限の機能しかないので、拡張して機能を増やすなど。