新しい HTML Geolocation 要素

navigator.geolocation.getCurrentPosition() を実装したことがあれば、その手順はご存知でしょう。コールバックを記述し、エラーを処理し、パーミッション状態を管理し、ユーザーがプロンプトを何度も却下したことでブラウザが黙ってそれを無視しないことを祈る、といった具合です。新しい <geolocation> HTML 要素は、まったく異なるアプローチを取ります。HTML での宣言的な位置情報取得を、ブラウザ自身が処理するのです。

この要素が何であるか、どのように動作するか、そして使用する前に知っておくべきことを説明します。

<geolocation> HTML 要素とは?

<geolocation> HTML 要素は、ユーザーがページから直接位置情報を共有できる、実験的なブラウザ制御のボタンです。JavaScript がパーミッションプロンプトをトリガーする代わりに、ユーザー自身がコントロールを有効化します。ブラウザがパーミッションフローを処理し、開発者はその結果をリッスンします。

Chrome 144 で実装されました。2026年初頭の時点では、これは Chromium 主導の機能であり、他のエンジンではまだ実装されていません。フォールバックなしで広く実装するのではなく、実験的なものとして扱ってください。現在の実装状況は https://caniuse.com/mdn-html_elements_geolocation で追跡できます。

Geolocation API の問題点

navigator.geolocation API は命令的です。スクリプトが getCurrentPosition() を呼び出し、ブラウザがプロンプトを表示するかどうかを決定します。ユーザーがそのプロンプトを複数回却下した場合、Chrome は一定期間、静かにそれをブロックする可能性があります。エラーもフィードバックもなく、ただ沈黙するだけです。

コンテキストの欠如が状況を悪化させます。説明なしに表示されるプロンプトは反射的に拒否されます。その拒否は固定化される可能性があり、ユーザーがそれを元に戻す明確な方法はありません。

HTML での宣言的な位置情報取得がこれをどう解決するか

<geolocation> 要素はモデルを反転させます。ユーザーがボタンをクリックします。そのクリックがパーミッション信号です。ブラウザはリクエストが意図的なユーザーアクションから来たことを認識するため、サイレントブロックのシナリオを回避し、以前にアクセスを拒否した場合でもユーザーに明確な回復パスを提供できます。

HTMLGeolocationElement インターフェースは、要素上で直接結果を公開します。

<geolocation onlocation="handleLocation(event)"></geolocation>

function handleLocation(event) {
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log(latitude, longitude);
  } else if (event.target.error) {
    console.error(event.target.error.message);
  }
}

要素は position と error プロパティを公開し、ブラウザが結果を返したときに location などのイベントをリッスンします。

主要な属性

• autolocate — パーミッションが以前に付与されている場合、クリックを必要とせずにページロード時に location イベントを発火します。パーミッションがまだ付与されていない場合は何もしません。
• watch — watchPosition() を反映し、デバイスが移動するにつれて継続的に発火します。
• accuracymode — "precise" または "approximate" を受け付けます。精密モードは enableHighAccuracy: true にマッピングされ、ボタンアイコンが十字線に変わります。デスクトップでは違いがほとんど無視できることが多いため、実際の違いを確認するには屋外でモバイルデバイスでテストしてください。

知っておく価値のある1つの特性:1ページあたり最大3つの <geolocation> 要素しか使用できません。それを超えると、すべてが動作しなくなります。

この要素は、Geolocation API と同じ基盤となるセキュリティモデルに依存しており、セキュアコンテキスト(HTTPS)と明示的なユーザーパーミッションが必要です。

Geolocation API vs HTML Geolocation 要素:どちらを使うべきか?

現時点では、両方です。<geolocation> HTML 要素は navigator.geolocation を置き換えるものではなく、それをラップします。サポートされている場合は要素を使用し、適切にフォールバックします。

<geolocation onlocation="updateMap()">
  <!-- <geolocation> をサポートしていないブラウザでのみレンダリングされます -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    現在地を使用
  </button>
</geolocation>

サポートしているブラウザは子コンテンツを抑制します。サポートしていないブラウザはフォールバックボタンをレンダリングします。より自動化されたアプローチが必要な場合は、標準 API に基づくカスタム要素に置き換える npm の polyfill があります。

機能検出は簡単です。

if ('HTMLGeolocationElement' in window) {
  // 要素がサポートされています
} else {
  // navigator.geolocation を使用
}

スタイリングには厳しい制限があります

要素はボタンのように見えますが、CSS の観点からはボタンのように動作しません。ブラウザは欺瞞的なパターンを防ぐために制約を適用します。opacity は 1 に固定され、テキストと背景のコントラストは少なくとも 3:1 でなければならず、歪曲する変形はブロックされます。コントラストやフォントサイズが最小しきい値を下回った場合、ボタンは視覚的に無効化されるのではなく、単に動作しなくなります。パーミッションが付与された後にボタンをスタイリングするには、:granted 疑似クラスを使用できます。

今後の展開

<geolocation> 要素は、計画されている一連の機能固有要素の最初のものです。カメラとマイクアクセス用の <usermedia> 要素は、すでにオリジントライアル中です。宣言的、ユーザー主導、ブラウザ仲介というパターンは、明らかにプラットフォームが向かっている方向です。

まとめ

<geolocation> 要素は、ブラウザが機密性の高いパーミッションを処理する方法における意味のある変化を表しています。トリガーをスクリプトからユーザーアクションに移すことで、命令的 API のサイレントブロックの落とし穴の多くを回避し、ユーザーに位置情報を共有するかどうか、いつ共有するかについてより明確な制御を提供します。ブラウザサポートはまだ限定的ですが、フォールバックパターンはクリーンで、API サーフェスは最小限です。今日からプログレッシブエンハンスメントで実験を始めましょう。パーミッション UX はユーザーにとって本当に優れており、宣言的モデルは Web プラットフォームが向かっている方向です。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.