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
86
Geolocation API
howdy39
May 25, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
620
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
440
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
510
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.1k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.1k
Promise
howdy39
1
260
カラーユニバーサルデザイン / color universal design
howdy39
0
640
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
0
150
Media Queries
howdy39
0
69
Other Decks in Programming
See All in Programming
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
350
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
31
21k
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
Why 1 + 1 = 2 in Swift?
1plus4
1
600
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
受託開発でGitLab CI を活用していく
xiombatsg
1
260
オブジェクトしこう
okuramasafumi
2
150
puregoの活用例
aethiopicuschan
0
220
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
350
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
Featured
See All Featured
A Tale of Four Properties
chriscoyier
150
22k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
103
6.6k
What's in a price? How to price your products and services
michaelherold
237
11k
In The Pink: A Labor of Love
frogandcode
137
21k
Into the Great Unknown - MozCon
thekraken
10
980
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Designing for humans not robots
tammielis
247
25k
The Cult of Friendly URLs
andyhume
73
5.7k
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