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
540
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
170
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.5k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
650
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
670
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.7k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
Promise
howdy39
1
380
カラーユニバーサルデザイン / color universal design
howdy39
0
920
Other Decks in Programming
See All in Programming
コーディングエージェント概観(2025/07)
itsuki_t88
0
120
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
110
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
770
ソフトウェア設計とAI技術の活用
masuda220
PRO
24
6.4k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
230
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
340
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
102
39k
#QiitaBash MCPのセキュリティ
ryosukedtomita
2
1.5k
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Ace a Technical Interview
jacobian
278
23k
4 Signs Your Business is Dying
shpigford
184
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Cult of Friendly URLs
andyhume
79
6.5k
Producing Creativity
orderedlist
PRO
346
40k
How to train your dragon (web standard)
notwaldorf
96
6.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Fireside Chat
paigeccino
37
3.5k
Building Applications with DynamoDB
mza
95
6.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
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