sakura.io + Arduino + GROVE でGPSロガー (6)

公開日 2019年3月6日

最終更新日 2024年4月24日

さくらインターネットのsakura.io を使って電子工作初心者がIoTなGPSロガーを作るメモ。その6
[その1] [その2] [その3] [その4] [その5] [その6]

仕様

前回「Outgoing Webhook」を使いPHPで受信したデータをファイル毎に完全保存する方法を書きました。

今回はもっとシンプルに直近の10,000件の座標データを1つのファイルに書き込み、GoogleMapにリアルタイムに表示するシステムを作ってみます。

「Outgoing Webhook」をPHPで受信する

index.php の内容

<?php

//---PHP設定用のファイル
require_once("./config.inc.php");

//---Secret（コンパネに入力した文字列）
$secret = 'hoge';

//---POSTデータを受信する
$json = file_get_contents('php://input');

//---JSONをPHP連想配列に変換
$json_ary = json_decode($json , true);

//---すべてのレスポンスヘッダを取得（Apacheのみ）
$header_ary = getallheaders();

//---------------------------------------------
//   +JsonデータとSecretとヘッダーの署名が必須
//---------------------------------------------

if($json && $secret && !empty($header_ary['X-Sakura-Signature'])){

    //---受信した署名と比較
    if($header_ary['X-Sakura-Signature'] === hash_hmac('sha1', $json, $secret)){

        //---座標データをファイルに追記する
        dataAryAdd($json_ary);
    }
}

///=======================================================================
//   +座標データをファイルに追記する
///=======================================================================
function dataAryAdd($p_json_ary){

    $path = "../../_data/simple_gps/last_location.psrv";

    $index = 0;
    $data_ary = array();

    //---必要なデータが含まれていたら
    if(!empty($p_json_ary['payload']['channels'][0])){

        //---既存のファイルがある場合には読み込み
        if(is_file($path)){

            $data_ary = unserialize(file_get_contents($path));
        }

        //---配列を展開する
        foreach ($p_json_ary['payload']['channels'] as $value_ary){

            $channel = $value_ary['channel'];
            $value = $value_ary['value'];

            //---datetimeを変換する
            $time = datetimeToTime($value_ary['datetime']);

            //---緯度
            if($channel == 0){

                //---channel[0]の時間をキーとする。
                $index = $time;

                $data_ary[$index]['lat'] = $value;

                //---経度
            }elseif($channel == 1){

                $data_ary[$index]['lng'] = $value;
            }

            //---最大10000件を超えたら古いデータを削除する
            if(count($data_ary) > 10000){

                $keys = array_keys($data_ary);

                unset($data_ary[$keys[0]]);
            }
        }

        //---ファイルに書き込む
        file_put_contents($path, serialize($data_ary));
    }
}

///=======================================================================
//   +datetimeをUNIXタイムスタンプに変換する
///=======================================================================
function datetimeToTime($p_datetime){

    $result = 0;

    //---マイクロタイム7桁以上でエラーとなるので無視する
    $p_datetime = mb_ereg_replace(".[0-9]{1,}Z$" , ".000Z" , $p_datetime);

    $d = new DateTime($p_datetime);
    $d->setTimeZone(new DateTimeZone('Asia/Tokyo'));

    $result = $d->getTimestamp();

    //---------------------
    //   +返り値
    //---------------------

    return $result;
}

?>

※config.inc.phpは各自お好きな内容を記載してください。

config.inc.php の内容

<?php

//---タイムゾーン
date_default_timezone_set('Asia/Tokyo');

//---文字コード
ini_set('default_charset', 'UTF-8');

?>

※手元の環境ではdatetimeをUNIXタイムスタンプに変換する際にマイクロタイム7桁以上でエラーとなるので無視するようにしています。PHPのバージョンの問題なのかもしれません。

GoogleMap APIで表示する

index.phpで出力したlast_location.psrvを読み込んでGoogleMap APIを使い地図上に表示します。
$apikey = xxxxxxxxxxxxxxxxxxxxxxxx;の部分は各自で取得したKEYに書き換えてください。

location.php の内容

<?php

//---PHP設定用のファイル
require_once("./config.inc.php");

//---GoogleMapのAPIキー
$apikey = 'xxxxxxxxxxxxxxxxxxxxxxxx';

$path = "../../_data/simple_gps/last_location.psrv";

//---変数の初期化
$last_lat = $last_lng = $last_time = 0;
$list_html = $lastupdate = "";

//---ファイルがあれば読み込む
if(is_file($path)){

    $data_ary = unserialize(file_get_contents($path));

    $list_ary = array();

    foreach ($data_ary as $key_time => $value_ary){

        $last_time = $key_time;
        $lat = $last_lat = $value_ary['lat'];
        $lng = $last_lng = $value_ary['lng'];

        $list = "new google.maps.LatLng({$lat}, {$lng})";
        $list_ary[] = $list;
    }

    $list_html = implode(",ntt" , $list_ary);

    //---最終更新日
    $lastupdate = date("Y/m/d H:i:s" , $last_time);
}

//---自動リロード用の記述
if(!empty($_GET['reload']) && $_GET['reload'] === 'on'){

    $reload_html = '<meta http-equiv="refresh" content="20">';

} else{

    $reload_html = '';
}


///=======================================================================
//   +HTML表示部分
///=======================================================================
echo <<<HERE

<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
{$reload_html}

<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=700">

<title>Simple GPS</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key={$apikey}"></script>
<script type="text/javascript">

function initialize() {

    //---地図の中心位置を指定
    var map = new google.maps.LatLng({$last_lat}, {$last_lng});

    //---地図オプション
    var map_option = {
        zoom: 16,
        center: map,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //---地図の生成
    var map = new google.maps.Map(document.getElementById("map_canvas"),map_option);

    //---座標一覧
    var lists = [
        {$list_html}
    ];

    //---ポリラインオプション
    var line_option = {
        path: lists,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 5
    };  

    //---ポリラインの生成
    var paths = new google.maps.Polyline(line_option);

    //---地図にポリラインをセット
    paths.setMap(map);
}


</script>

<style type="text/css">
<!--

/*************************
   +HTML 
*************************/

html {  
    overflow-y:scroll;  
}  

body {
    font-family:HelveticaNeue;
    margin: 0;
    padding: 0;
    background: #FFB845;
    color: #000000; 
}

#map_canvas {
    width: 100%;
    height: 90%;
}

-->
</style>

</head>
<body onload="initialize();">

<div id="map_canvas">
     
</div>

<div style="margin:10px;">
最終更新：{$lastupdate} [<a href="./location.php?reload=off">自動更新停止</a>] [<a href="./location.php?reload=on">再開</a>]
</div>

</body>
</html>

HERE;


?>