Geolocation API

Transcript

1. Geolocation API
   2018/05/25 第7回 TG社フロントエンド勉強会
   Tatsuya Nakano(howdy39)
   

   View Slide

2. Geolocation API
   ブラウザで位置情報を取得するAPI
   基本的にどのブラウザでも使える
   https://caniuse.com/#feat=geolocation
   

   View Slide

3. 用途
   

   View Slide

4. その１ 地図
   ● Google Maps
   ● Yahoo!地図
   ● Bing Maps
   ● etc
   

   View Slide

5. その２ 周辺情報を調べる
   位置情報を求めてくるパターン
   ● 「天気」でGoogle検索
   ● 「カフェ」でGoogle検索
   ● 「ATM」でGoogle検索
   ※これらは周辺情報を調べようとしている（と判断）
   

   View Slide

6. Geolocation API で取れる情報
   

   View Slide

7. 取れる情報
   ● 緯度
   ● 経度
   ● 緯度/経度の精度
   ● 高度
   ● 高度の精度
   ● 方位
   ● 速度
   

   View Slide

8. Geolocation API の使い方
   

   View Slide

9. 使い方
   現在の位置情報を取得する
   navigator.geolocation.getCurrentPosition(
   success, error, option
   );
   ※ getCurrentPositionをwatchPositionにすると定期的に取得
   

   View Slide

10. navigator.geolocation.getCurrentPosition(
    success, error, options
    );
    成功時の処理
    

    View Slide

11. success Function
    Position オブジェクトに位置情報が入っている
    function (position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    ...
    }
    

    View Slide

12. navigator.geolocation.getCurrentPosition(
    success, error, options
    );
    失敗時の処理
    

    View Slide

13. error Function
    PositionError オブジェクトにエラーコードが入っている
    function (error) {
    const errorCode = error.code;
    }
    エラーコードは次の３つのどれか
    1: 位置情報の利用が許可されていない
    2: 位置が特定できない
    3: タイムアウト
    

    View Slide

14. navigator.geolocation.getCurrentPosition(
    success, error, options
    );
    オプション
    

    View Slide

15. geoOptions Object
    オプションは3つだけ
    const options = {
    enableHighAccuracy: false, // 高精度の有効化
    timeout: 5 * 1000, // タイムアウト(ms)
    maximumAge: 10 * 1000 // 位置情報の有効期限(ms)
    };
    

    View Slide

16. デモ
    https://howdy39.github.io/study-device-api/geolocation/
    

    View Slide

17. Google Maps JavaScript API
    Google マップを使うAPI
    使うには Cloud Console で API KEY を作ってJS読み込み時に
    設定する
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFbYxhyD8zKleiXY8
    O7wxuRZvUGtJTldk&v=3.exp&sensor=false">
    

    View Slide

18. デモ
    https://howdy39.github.io/study-device-api/geolocation/map.ht
    ml
    

    View Slide

19. 参考
    ユーザーの現在地
    https://developers.google.com/web/fundamentals/native-hardware/user-location/
    Geolocationの利用
    https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation
    

    View Slide