プリザンターで位置情報を取得

はじめまして。IISの田口です。
昨年12月からパートナーであるインプリムさんの「プリザンター」を色々使ってみています。

そこで実現出来たことを公開したいと思います。

やりたいこと

  1. 新規登録した本人が更新する時だけ位置情報取得したい
  2. 新規登録時は取得しない

想定しているケースです。

  • 営業マンが前日に訪問先などの行動予定を登録し、当日の訪問終了後すぐに結果を入力する。
  • そのとき「本当に予定した訪問先に行ったのか」を確認するために位置情報を記録する。

出来ました!

Javascriptで出来そう?」と思ったので、まずはググってみました。当然のことながらあっさりサンプルは出てきました。Geolocation APIを使えば出来るとのこと。
で、こんな感じになりました。

$(function () {
    if( navigator.geolocation )
    {
        // 現在位置を取得できる場合の処理
        // 現在位置取得
        navigator.geolocation.getCurrentPosition(
            // 取得成功
            function(position){
                // ログインユーザと担当者が同じ場合だけ位置情報書き込み
                if( $('#Results_Owner option:selected').text() == $('[data-id="AccountMenu"]').text())
                {
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;
                    
                    var url ='https://maps.google.co.jp/maps?q=lat,lng&z=15';
                    url = url.replace('lat', lat);
                    url = url.replace('lng', lng);
                    $('#Results_DescriptionB').val(url).change();
                }
            },
            
            // 取得失敗
            function(error){
                var errorInfo = [
                    "原因不明のエラー",
                    "位置情報の取得が許可されなかった",
                    "電波状況などで位置情報が取得できなかった",
                    "位置情報の取得に時間がかかりすぎた"
                ]
                alert( error.code + "\n" + errorInfo[error.code] ) ;
            },
            
            // オプション
            {
                enableHighAccuracy: true,
                timeout: 2000,
                maximumAge: 1000,
            }
        );
    }
    else
    {
        // 現在位置を取得できない場合の処理
        alert( "現在位置を取得できません。" ) ;
    }
});

少し解説

※動作確認したプリザンターのバージョンは0.46.38.38493です。
jQueryやGeolocation APIの詳細説明は割愛します。

Geolocation APIのgetCurrentPositionメソッドで現在の位置情報を取得し、取得成功時のコールバック関数内で
1. ログインユーザと対象レコードの担当者が同じかどうかチェック
2. 緯度、経度を取得、GoogleマップのURL文字列生成
3. 画面項目(今回は説明B)にURL文字列をセット

と処理しています。

ソースの詳細説明です。

$('#Results_Owner option:selected').text()
画面上に担当者項目(プルダウン)を表示してあるので、担当者項目のid属性を指定し、かつデフォルトで選択されている値を「対象レコードの担当者」と見なします。(ページのソースからid属性値を見つけました。)

$('[data-id="AccountMenu"]').text()
画面左上に表示しているログインユーザです。
本当は変数などから取得できるとスマートなのですが、ページのソースからカスタムデータ属性を見つけ出し、その属性値を指定して表示内容を取得するという力業で解決しました。

$('#Results_DescriptionB').val(url).change()
生成文字列を項目にセットします。今回は説明B項目にセットしたかったので説明B項目のid属性を指定してます。(ここもページのソースを見てid属性値を見つけました。)
なお、.change()を忘れると、画面表示は変わるけど更新時に前のデータに戻ってしまいます。ソースをざっと見た限りでは項目全てにonChangeイベントが追加されているため、.change()でイベント発火させないと行けないようです。ここで1週間くらい悩みました。
ただし、.change()の副作用として更新画面を開き、何もせずに一覧画面に戻ろうとすると「行った変更が保存されない可能性があります。」の確認メッセージが表示してしまいます。

さあ、テスト! ・・・あれ?

プリザンターで「テーブルの管理」-「スクリプト」で上記スクリプトを貼付、出力先を"編集"にチェックして新規登録→更新とすれば準備完了です。
社内PCから各ブラウザでテストしてみました。

  • Chrome:URL取得できた!地図も猿楽町を示している。
  • FireFox:URL取得できた!これも猿楽町を示している。
  • IE:URL取得できたけど、緯度経度の値が違う?地図見ると清洲白河になっている!?

IEだけが位置情報がおかしいので、ググってみたらどうやらIEは精度が悪いらしいです。でももともとGPSを内蔵していないPCでの取得なので、ある程度は割り切る必要があるかと。

また、Geolocation APIはブラウザによってはhttp接続では位置情報は取得出来ないようですので、原則はhttps接続する環境が必要になると思います。

参考にしたサイト