TL;DR
- Chrome DevTools: 「その他のツール」→「センサー」
- GPSなどから取得された「実際の現在地」ではなく、任意の場所（経緯度）を設定できる。プリセットもある
開き方
-
- まずDevToolsを開く
- キーボードショートカット:
F12/Ctrl + Shift + I/Cmd+Opt+I - メニュー: 「表示」 → 「開発/管理」 → 「デベロッパー ツール」
-
- 次に、DevToolsメニューの右端にある3点リーダー → 「その他のツール」 → 「センサー」を選択する
-
- もしくは
Ctrl+Shift+P/Command+Shift+Pでコマンドメニューを表示し、センサーと入力して出てくる「センサーメニュー」を選択する
- もしくは
できること
- 「場所（現在地）」を設定できます
- 精度や、タイムゾーン、言語/地域も編集できます
- 場所のプリセットもあります
- 「Tokyo」は、新宿の都庁あたりの位置
- 「その他」を選択すると、任意の経緯度を設定できます
- 「場所が不明」を選択すると、エラー状態を再現できます
- その他、「向き」や「タップ」などの機能もあります
参考
- センサー: デバイス センサーをエミュレートする | Chrome DevTools | Chrome for Developers
- れきちず | 現代風デザインの地図サイト（スクリーンショットの例に使った地図）
- Locate the user - MapLibre GL JS（ウェブ地図制作ライブラリMapLibre GL JSでの、現在地機能の例）
- 幸せの形はどれも似ているが、不幸なプロジェクトはそれぞれの形がある（mizchi, JSConf JP 2024）（ウェブサイトのパフォーマンスに関する発表 - DevToolsの解説有り）
当記事で紹介したChrome DevToolsの「センサー」は、MIERUNE同僚のNEKOYASANさんに教えてもらいました。ありがとうございます！
Discussion