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
99
Geolocation API
howdy39
May 25, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
450
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
81
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.2k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
580
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
610
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.5k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.3k
Promise
howdy39
1
330
カラーユニバーサルデザイン / color universal design
howdy39
0
830
Other Decks in Programming
See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
140
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
2
840
CNCF Project の作者が考えている OSS の運営
utam0k
5
680
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
最近のVS Codeで気になるニュース 2025/01
74th
1
250
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.5k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
39
13k
『品質』という言葉が嫌いな理由
korimu
0
150
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Faster Mobile Websites
deanohume
306
31k
Rails Girls Zürich Keynote
gr2m
94
13k
Fireside Chat
paigeccino
34
3.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Code Review Best Practice
trishagee
66
17k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Code Reviewing Like a Champion
maltzj
521
39k
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