Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Geolocation API
Search
howdy39
May 25, 2018
Programming
0
110
Geolocation API
howdy39
May 25, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
500
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
150
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.4k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
620
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
640
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.6k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
Promise
howdy39
1
340
カラーユニバーサルデザイン / color universal design
howdy39
0
870
Other Decks in Programming
See All in Programming
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
AIコーディングの理想と現実
tomohisa
22
29k
Thank you <💅>, What's the Next?
ahoxa
1
110
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
130
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
480
Kamal 2 – Get Out of the Cloud
aleksandrov
1
190
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
Do Dumb Things
mitsuhiko
0
440
リストビュー画面UX改善の振り返り
splcywolf
0
140
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1k
DataStoreをテストする
mkeeda
0
290
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
GraphQLとの向き合い方2022年版
quramy
46
14k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Optimizing for Happiness
mojombo
377
70k
Bash Introduction
62gerente
611
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Transcript
Geolocation API 2018/05/25 第7回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)
Geolocation API ブラウザで位置情報を取得するAPI 基本的にどのブラウザでも使える https://caniuse.com/#feat=geolocation
用途
その1 地図 • Google Maps • Yahoo!地図 • Bing Maps
• etc
その2 周辺情報を調べる 位置情報を求めてくるパターン • 「天気」でGoogle検索 • 「カフェ」でGoogle検索 • 「ATM」でGoogle検索 ※これらは周辺情報を調べようとしている(と判断)
Geolocation API で取れる情報
取れる情報 • 緯度 • 経度 • 緯度/経度の精度 • 高度 •
高度の精度 • 方位 • 速度
Geolocation API の使い方
使い方 現在の位置情報を取得する navigator.geolocation.getCurrentPosition( success, error, option ); ※ getCurrentPositionをwatchPositionにすると定期的に取得
navigator.geolocation.getCurrentPosition( success, error, options ); 成功時の処理
success Function Position オブジェクトに位置情報が入っている function (position) { const latitude =
position.coords.latitude; const longitude = position.coords.longitude; ... }
navigator.geolocation.getCurrentPosition( success, error, options ); 失敗時の処理
error Function PositionError オブジェクトにエラーコードが入っている function (error) { const errorCode =
error.code; } エラーコードは次の3つのどれか 1: 位置情報の利用が許可されていない 2: 位置が特定できない 3: タイムアウト
navigator.geolocation.getCurrentPosition( success, error, options ); オプション
geoOptions Object オプションは3つだけ const options = { enableHighAccuracy: false, //
高精度の有効化 timeout: 5 * 1000, // タイムアウト(ms) maximumAge: 10 * 1000 // 位置情報の有効期限(ms) };
デモ https://howdy39.github.io/study-device-api/geolocation/
Google Maps JavaScript API Google マップを使うAPI 使うには Cloud Console で
API KEY を作ってJS読み込み時に 設定する <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFbYxhyD8zKleiXY8 O7wxuRZvUGtJTldk&v=3.exp&sensor=false"></script>
デモ https://howdy39.github.io/study-device-api/geolocation/map.ht ml
参考 ユーザーの現在地 https://developers.google.com/web/fundamentals/native-hardware/user-location/ Geolocationの利用 https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation