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

プリザンター

はじめまして。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. 画面項目（今回は説明Ｂ）に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接続する環境が必要になると思います。

参考にしたサイト

スマートスピーカー受付システムを実験中です

IIS石崎です。
オフィスの受付にスマートスピーカーによる受付システムを作成・導入しました。

f:id:imageinformationsystem:20180219132348j:plain

導入の狙い

導入の成果はまだ評価する段階ではないですが、次のような点に期待しています。
※私個人の意見です。所属する組織を代表するものではありません。

  • 内線電話と違い声だけで操作できるので、ご来訪者さまがお荷物を床に置くなどの手間が不要になる
  • ご来訪者様が訪問先部署名などの訪問先を告げる手間が不要になる
  • 電話機に手や耳が触れず口も近づけなくてよいので衛生的
  • 電話が鳴らなくなるため、メンバーの生産性が向上する

特に三番目の衛生面についての非接触操作のメリットに注目しています。入力インターフェイスが音声に絞られることで主に費用面で導入しやすくなり遂に弊社でも導入することができました。

是非お試しください

まだまだ日本では音声での操作に気恥ずかしさを感じる方も多いと思いますが、我々はそれを乗り越えて新しい価値にチャレンジして行きます。弊社はシステム開発を提供する会社なので。新しい価値を生み出し続けることが使命ですから。
IISオフィスへお越しの際は是非スマートスピーカー受付システムをお試しください。

一緒に新しい価値を生み出し続けてくれる方へ

IISでは一緒に新しい価値を生み出し続けてくれる方を募集中です。新しい価値を生み出すことに関心のある方、是非一度弊社に遊びにいらしてください。

神保町 Kotlin 勉強会

勉強会報告

IIS石崎です。
IIS会議室を会場として「神保町 Kotlin 勉強会」を開催しました。

受付の様子

会場の様子

参加者の皆さん進捗を出していただけたようです。

IISでは今のところはまだKotlinを業務では扱っていませんが、今後必要になってくる技術だと思っています。
今後も定期的に開催して行きますのでKotlinをこれから頑張りたい方、一緒に学んで行きましょう。

今後の予定

神保町 Kotlin 勉強会も毎月第１火曜日に開催予定です。
また、Unity & Unreal Engine 勉強会は毎月第２火曜日に開催しています。
イベントは開催が決定したら connpass サイトで告知・募集していますので是非チェックしてください。

神保町 Unity & Unreal Engine 勉強会

勉強会報告

IIS石崎です。
IIS会議室を会場として「神保町 Unity & Unreal Engine 勉強会」を開催しました。

受付の様子

会場の様子

参加者の皆さん進捗を出していただけたようです。

IISでは今のところはまだUnityやUnreal Engineを業務では扱っていませんが、今後必要になってくる技術だと思っています。
今後も定期的に開催して行きますのでUnityやUnreal Engineをこれから頑張りたい方、一緒に学んで行きましょう。

今後の予定

神保町 Unity & Unreal Engine 勉強会は毎月第２火曜日に開催予定です。
また、Kotlin 勉強会も毎月第１火曜日に開催しています。
イベントは開催が決定したら connpass サイトで告知・募集していますので是非チェックしてください。

インプリムさんの新オフィスに行ってきました

IISの片柳です。
「プリザンター」を開発する株式会社インプリム（https://implem.co.jp/）さんが引っ越したとのことで、早速新オフィスにお邪魔してきました。
インプリムさんとは、「プリザンター」を一緒に盛り上げようというパートナーの関係。
色々と夢のある話ができて、とても楽しかったです。

こちらオフィス内の風景
https://cdn-ak.f.st-hatena.com/images/fotolife/i/imageinformationsystem/20180130/20180130152311.jpg

こちら内田社長（奥）と森井さん（手前）
※内田さん、目を閉じた瞬間しかなく、すみません。。。
https://cdn-ak.f.st-hatena.com/images/fotolife/i/imageinformationsystem/20180130/20180130152328.jpg

訪問後、魅力ある中野ワールドも堪能できました。
ぜひまた行きたいところです。

はじめまして、イメージ情報システムです

ご挨拶・報告

はじめまして

はじめまして、イメージ情報システムです。
イメージ情報システムは東京・神田地区の独立系 SIer です。 英語で書くと Image Information System。頭をとって IIS と覚えてください。

https://cdn-ak.f.st-hatena.com/images/fotolife/i/imageinformationsystem/20180129/20180129143356.jpg

このブログについて

このブログでは、IIS のメンバーの技術的なチャレンジや日常を綴って行こうと思います。

技術的な話題

オープンソースソフトウェアへの貢献に力を入れて行く予定です。このブログでもいろいろな活動を報告して行きたいと思っています。

神田地区の話題

カレーの街として有名な神田神保町。実はカレーばかりでなくラーメンや老舗の洋食店なども有名です。
皇居にも近く皇居ランを支援するお店も多くあるスポーツの街でもあります。

その他の話題

レクリエーションや、外出時の行先の土地のこと。メンバーで流行っているホビーなど。
何気ない日常の話題も綴って行きたいと思っています。

よろしくお願いします

出来たばかりで、まだこれからの IIS ですが、皆様どうぞよろしくお願いします。