Web アプリケーションはますますパーソナライズされています。また、複数の理由で位置情報サービスを使用する Web アプリケーションが増加しています。プライバシー、セキュリティ、または特定のロケーションベースの機能のいずれかです。 ユーザーの位置を知ることで、パーソナライズされたコンテンツ、優れた 、天気予報、より多くのローカリゼーション、より優れたユーザー エクスペリエンスなど、さまざまな機能を簡単に提供できます。開発者として、Web アプリケーションのユーザーの場所を取得する方法を知ることは非常に重要です。この記事では、 などの最新の Web テクノロジを使用してユーザーの位置情報を取得する方法について、順を追って説明します。ユーザーの IP アドレスを取得するさまざまな方法と、ユーザーからより多くの地理位置情報データを取得する方法について説明します。それでは、始めましょう! セキュリティ React.js IPまたは地理位置情報とは何ですか? まず、 または とは何かを理解しましょう. IP IPアドレス すべての家に固有の番号またはアドレスがあるように、インターネットを使用する各デバイスには固有のアドレスがあります。デバイスのこの一意のアドレスは と呼ばれます。デバイスがインターネット経由で相互に通信するのに役立ちます。 IP アドレス ここで、 の略で、デバイスがインターネット経由で相互に通信するために使用する一連の規則です。それでは、 理解しましょう。 IP は 「インターネット プロトコル」 Geolocation について 2 つの単語の組み合わせです。 1 つ目は地球を意味する で、2 つ目は地球上のどこにあるかを意味する「 です。 Geolocation は 「Geo」 location」 そのため、 に基づいてデバイスが物理的に配置されている場所を見つける方法です。 データの精度は、データを取得するために使用される方法、データの品質、デバイスの種類など、さまざまな要因によって異なります。モバイル デバイスは頻繁にネットワークを変更するため、データの精度が低くなる可能性があります。それでは、React でユーザーの IP アドレスを取得する方法を見てみましょう。 「IP-Geolocation」は、 IP アドレス IP-Geolocation ユーザーの位置を取得する ユーザーの位置を取得する方法はいくつかあります。この記事では、すべてのブラウザーでサポートされている を使用します。それを使用するために他のサード パーティ ライブラリをインストールする必要はありません。より多くのデータを取得するには、 などのサードパーティ サービスの API を使用できます。 Geolocation API Geocoding API まず、 を使用して React アプリを作成しましょう。 CMD またはターミナルを開き、プロジェクト フォルダーを見つけて、次のコマンドを使用します。 vite npm create vite@latest your-app-name 上記のコマンドを実行すると、フレームワークのリストが表示されます。矢印キーを使用してリストから 選択し、Enter キーを押します。 React を バリアントのリストが表示されるので、それらのバリアントから を選択します。次に、アプリ名でフォルダーを作成し、必要なすべてのファイルを追加します。次のコマンドを使用して、必要なすべてのライブラリをインストールし、開発サーバーを実行します。 Javascript このコマンドは、現在のディレクトリを app ディレクトリに変更します cd your-app-name このコマンドを使用して、必要なすべてのライブラリをインストールします npm install このコマンドは、おそらく localhost:5173 で開発サーバーを起動します npm run dev これで開発用サーバーが起動して実行されたので、ユーザーの IP アドレスを取得しましょう。 Geolocation API を使用してユーザーの緯度と経度の情報を取得する すると、ユーザーは必要に応じて自分の場所を提供できます。このメソッドは、ユーザーが自分の位置情報へのアクセスを許可した場合にのみ機能します。許可しない場合、このブラウザー ベースの API は IP アドレスを取得できません。 Web アプリケーションの機能が本当にユーザーの位置情報を必要とする場合は、適切なテキスト メッセージでユーザーにプロンプトを表示し、位置情報が必要な理由を知らせることができます。 Geolocation API を使用 この Geolocation API は、Geolocation オブジェクトを返すことができるプロパティである への呼び出しを介してアクセスされます。 とは何かを見てみましょう。 navigator.geolocation navigator ユーザーエージェント(ブラウザ)の状態とIDを表すインターフェースです。このナビゲーターをログに記録し、それが提供する他のプロパティを見てみましょう。 navigator: ファイルを開き、return ステートメント内のすべてのコードを消去し、親 クラス に保持してから、次のコードに示すように 内で を使用します。 App.jsx div App useEffect console.log(navigator) import { useEffect } from "react"; import "./App.css"; function App() { useEffect(() => { console.log(navigator); }, []); return <div className="App"></div>; } export default App; 開発サーバー タブで、F12 を押すか、マウスを右クリックしてコンソールを開きます。 、 、 、 などのさまざまなプロパティのリストが表示されます。地理位置情報をログに記録しましょう。この のようにログに地理位置情報を追加するだけです。現時点では地理位置情報にアクセスする権限がないため、コンソールには空のオブジェクトが表示されます。この権限を取得する方法を見てみましょう。次のコードと説明を確認してください。 appCodeName Bluetooth clipboard geolocation console.log(navigator.geolocation) useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); }); } else { console.log("Geolocation is not supported by this browser."); } }, []); 上記の では、まずナビゲーターがあるかどうかを確認します。地理位置情報かどうか、真の場合は権限を確認します。 useEffect ここ、 アクセス許可ステータスのクエリと更新に使用できる Permissions オブジェクトを返します。 navigator.permissions: ユーザー権限の状態を返す Permission のメソッドです。名前と値のペアのカンマ区切りのリストを持つオブジェクトを取ります。ここでは、位置情報の許可のステータスを知りたいので、位置情報を渡しています。 query: ここでは Promise を取得しているため、 キーワードを使用して結果をログに記録します。ブラウザのコンソールを確認すると、次のオブジェクトが表示されます。 then { name: "geolocation", onchange: null, state: "prompt" } 状態は 3 つの異なる値を持つことができます。 つまり、位置情報にアクセスする権限があるため、地理位置情報を直接呼び出すことができます。 付与: ユーザーは許可を求めるポップアップを受け取ります。 prompt: ユーザーが現在地の共有を拒否したことを意味します。 拒否: および 状態では、ユーザーの現在の位置を取得する関数を作成できますが、「 」状態では、ブラウザーで位置情報の許可を有効にする方法を示すことができます。 「許可」 「プロンプト」 拒否 ユーザーが場所の許可を既に拒否している場合、ユーザーがブラウザで手動で有効にしない限り、再度場所の許可を求める方法はありません。 注: 次のように、3 つの許可状態すべてに 3 つの条件を使用しましょう。 useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); 状態で という関数を使いましょう。この関数は次の引数を取ります。 prompt getCurrentPosition : 場所が正常に取得された場合に呼び出されるコールバック関数。 success : ロケーションの取得中にエラーが発生した場合に呼び出されるコールバック関数。これはオプションです。 error : オプションは maximumAge、timeout、enableHighAccuracy などのさまざまなパラメーターを取ります。これらのオプションの詳細については、 ドキュメントを参照してください。これもオプションです。 options MDN の 3 つの引数すべてを実装しましょう。まず、 関数を作成しましょう。 の前に、次の成功関数を追加します。 成功 useEffect function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } このコールバック関数は、座標を意味する を持つ位置オブジェクトを返します。座標から 、 、 などの値を取得できます。ここで、成功関数の後に次の 関数を追加します。 coords 緯度 経度 精度 エラー function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } オブジェクトも宣言しましょう。 オプション var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; 次の行を および 条件に貼り付けて、ブラウザーで出力を確認します。 「prompt」 「granted」 navigator.geolocation.getCurrentPosition(success, errors, options) ブラウザーに、位置情報の許可を求めるプロンプトが 1 つ表示されます。アクセス許可を与えると、コンソール タブに座標値が表示されます。これが完全なコードです。 import { useEffect } from "react"; import "./App.css"; function App() { var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return <div className="App"></div>; } export default App; それでおしまい。これにより、任意のデバイスの緯度と経度の値を簡単に取得できます。この情報だけでは不十分なので、 を使用して、ユーザーの位置に関する詳細情報を取得しましょう。 opencage のリバース ジオコーディング API 逆ジオコーディングによる位置情報サービスの強化 ユーザーのデバイスに関する緯度と経度の情報は既に取得しています。次に、それを使用してその場所に関する詳細情報を取得する方法を見てみましょう。 の API を使用して、場所に関する詳細情報を取得します。そのため、必ずサインアップして API キーを取得してください。 opencage は無料トライアルで 1 日あたり 2,500 件のリクエストを提供するため、料金を支払う必要はありません。 設定の詳細については、Web サイトから確認できます。無料試用版があり、CORS の制限もない Opencage の API を使用しています。それでは、この API を使用する関数を作成しましょう。 opencage 価格 const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); } この 関数は緯度と経度を取得し、緯度、経度、および API キーを取得する opencage の の URL を使用します。この関数では、fetch を使用して URL からデータを取得しました。ステータス コードが の場合は、データを 状態に保存します。ブラウザでコンソールをチェックして、取得しているデータの種類を確認できます。ここでは、 プロパティの値を使用しています。 の詳細については、ドキュメントを確認してください。ここで、既に定義した 関数からこの関数を呼び出しましょう。 getLocationInfo ドキュメント 200 location formatted 応答オブジェクト success function success(pos) { var crd = pos.coords; ... ... getLocationInfo(crd.latitude, crd.longitude); } これで、ユーザーが自分の場所を提供することに同意するたびに、 関数が実行され、緯度と経度の情報が 関数に渡されて実行されます。この場所の状態を使用して、Web アプリで場所を表示できます。 success getLocationInfo 完全なコードは次のとおりです。 import { useEffect, useState } from "react"; import "./App.css"; const APIkey = "Enter-your-api-key"; function App() { const [location, setLocation] = useState(); function getLocationInfo(latitude, longitude) { const url = `https://api.opencagedata.com/geocode/v1/json?q=${latitude},${longitude}&key=${APIkey}`; fetch(url) .then((response) => response.json()) .then((data) => { console.log(data); if (data.status.code === 200) { console.log("results:", data.results); setLocation(data.results[0].formatted); } else { console.log("Reverse geolocation request failed."); } }) .catch((error) => console.error(error)); } var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function success(pos) { var crd = pos.coords; console.log("Your current position is:"); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); getLocationInfo(crd.latitude, crd.longitude); } function errors(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } useEffect(() => { if (navigator.geolocation) { navigator.permissions .query({ name: "geolocation" }) .then(function (result) { console.log(result); if (result.state === "granted") { //If granted then you can directly call your function here navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "prompt") { //If prompt then the user will be asked to give permission navigator.geolocation.getCurrentPosition(success, errors, options); } else if (result.state === "denied") { //If denied then you have to show instructions to enable location } }); } else { console.log("Geolocation is not supported by this browser."); } }, []); return ( <div className="App"> {location ? <>Your location: {location}</> : null} </div> ); } export default App; API または関数がデータを適切に取得できない場合にエラー メッセージを表示する 状態も実装できます。また、必要なエラー処理メソッドも関数に実装します。これにより、デバイスの位置に関する多くの情報を取得できます。次に、デバイスの IP アドレスを取得する方法を見てみましょう。 エラー ユーザーの IP アドレスの取得 クライアント側でユーザーの IP アドレスを取得するには、単純なパブリック IP アドレス API である を使用します。次のコード ブロックに示すように、別の を作成し、IP アドレスをフェッチする関数を作成します。 ipify useEffect const [ipAddress, setIpAddress] = useState(''); useEffect(() => { const fetchIp = async () => { try { const response = await fetch('https://api.ipify.org?format=json'); const data = await response.json(); setIpAddress(data.ip); } catch (error) { console.error(error); } }; fetchIp(); }, []); 上記のコードでは、IP アドレスを格納するために という 1 つの状態を作成しました。 はパブリック API であるため、API キーは必要なく、URL を直接使用できます。 では、 状態で IP アドレスを取得して保存する という 1 つの非同期関数を作成しました。 で 関数を呼び出すことを忘れないでください。 ipAddress ipfy useEffect ipAddress fetchIp useEffect fetchIp これにより、デバイスの IP アドレスを簡単に取得できます。このようなサービスを提供する API は複数あります。サーバー側では、通常、ユーザーが Web ページまたはデータを取得するために送信したリクエストから IP アドレスを取得できます。ただし、一部の ISP は共有 IP アドレスを使用しているため、IP アドレスだけに頼るべきではありません。つまり、複数のユーザーが同じ IP アドレスを持つ可能性があります。さらに、一部のユーザーは VPN やプロキシも使用しています。 ユーザーの位置データを収集して処理するためのベスト プラクティス ユーザーのデータに関しては、どのアプリケーションにおいても常に重要な部分です。開発者としての私たちの仕事は、ユーザー中心でユーザーのデータを保護するアプリケーションを作成することです。デバイスの位置などのデータについては、開発者は次のような多くの問題に直面する可能性があります。 IP または地理位置情報のデータはどの程度正確ですか? ユーザーが位置情報を使用することに同意しない場合はどうすればよいですか? データを安全に処理および保護する方法は? ロケーションベースの機能を実装するのは難しい場合がありますが、ベスト プラクティスに従うことで、よりパーソナライズされた安全なエクスペリエンスをユーザーに提供できます。位置情報に基づくデータを扱う場合は、次の点に注意してください。 IP アドレスを使用する場合は、複数の API を使用して再確認し、場所をクロスチェックする必要があります。位置情報ベースのサービスと機能にフォールバック メカニズムを含める必要があります。位置データは、デバイスの設定、ネットワーク接続などの要因の影響を受ける可能性があるため、データを確認することをお勧めします。 正確さ: 複数の国のさまざまな法律をチェックする必要があるため、これはユーザーのデータを収集する際の主要な懸念事項です。開発者は常にユーザーのプライバシーを尊重する必要があります。ユーザーからデータを収集する際には、明確で簡潔なプライバシー ポリシーが必要です。機密情報を収集するときはいつでもユーザーに伝える必要があります。位置情報に基づく機能がある場合は、データを使用する理由と方法を明確に示す必要があります。また、ユーザーが自分のデータを共有したくない場合に簡単にオプトアウトできるように、オプトアウト オプションを提供する必要があります。 プライバシー: データのセキュリティのために、OAuth や JWT などの認証メカニズムを実装し、不正アクセスから API エンドポイントを保護できます。クライアントとサーバー間の安全な通信を確保するために、HTTPS および SSL 証明書を使用してデータを暗号化する必要があります。バックエンドでは、役割ベースのアクセス制御を実装して、管理者のみなど、選択したユーザーのみがデータにアクセスできるようにすることができます。依存関係を更新する前に、それが公式のソースからのものかどうかを常に確認する必要があります。 セキュリティ: 結論 位置データは、ユーザーのパーソナライズされたエクスペリエンスに関して重要な役割を果たしますが、このデータの処理も重要なタスクです。位置データを取得するために使用できるさまざまな方法がありますが、必要なデータの量によって異なりますが、IP アドレスだけが必要な場合は API を使用でき、さらに地理位置情報データが必要な場合はいずれかを使用できます。 または も同様です。天気アプリなどの小さなアプリケーションを構築している場合は、ブラウザーの地理位置情報 API を使用できるため、API を使用する必要はありません。これらのデータのセキュリティとプライバシーに関しては、適切に作成されたプライバシー ポリシーを提供することにより、ユーザーのプライバシーに関連する潜在的なリスクを回避する必要があります。これでこの記事は終わりです。 ipify opencage Google のリバース ジオコーディング API という私の Web サイトをチェックしてください。 DevDreamning 私のユーチューブチャンネル👇😉 https://youtube.com/codebucks?embedable=true