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
580
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
190
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.6k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
690
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
680
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.7k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.5k
Promise
howdy39
1
390
カラーユニバーサルデザイン / color universal design
howdy39
0
950
Other Decks in Programming
See All in Programming
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
240
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.1k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
390
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
950
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
The Pragmatic Product Professional
lauravandoore
36
6.9k
BBQ
matthewcrist
89
9.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Applications with DynamoDB
mza
96
6.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
GitHub's CSS Performance
jonrohan
1032
460k
How to Think Like a Performance Engineer
csswizardry
27
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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