HOWTO · JavaScript
JavaScript でクライアントの IP アドレスを取得する
ブラウザの JavaScript が ipify、ipinfo、または Abstract を使って、サービスが観測したパブリック IP アドレスを取得する方法を学びます。
このページの内容
ブラウザの JavaScript は、デバイスのパブリック IP アドレスを直接読み取ることはできません。IP 検索サービスにリクエストを送信でき、そのサービスはそのリクエストについて観測したパブリックアドレスを報告します。これは、ローカルネットワークで使用されるプライベートアドレスとは異なります。このリクエストは訪問者の IP アドレスをサードパーティのプロバイダーとも共有するため、アプリケーションに適したデータの取り扱いを行うサービスを選んでください。
以下の例では、モダンブラウザで利用できる fetch を使用します。対象は 3 つのプロバイダーです。IP のみの応答には ipify、IP と位置情報のフィールドには ipinfo、地理位置データには Abstract を使います。アプリケーションが必要とするフィールド、プロバイダーが認証情報を必要とするかどうか、認証情報をどのように保護するかに基づいて選択してください。これらのリクエストは訪問者のブラウザから実行されるため、プロバイダーは訪問者のパブリック IP を確認します。プロバイダーの可用性、応答フィールド、アクセスルールは変更される場合があります。デプロイ前にプロバイダーの最新のドキュメントを確認してください。
ipify でパブリック IP アドレスを取得する
ipify は、https://api.ipify.org?format=json に JSON エンドポイントを提供します。応答には ip プロパティが含まれます。この例ではその値を読み取り、表示します。ipify API リポジトリ にはプロジェクトのソースが含まれています。
// Use a representative response so the parsing path is deterministic.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({ ip: '203.0.113.42' }),
});
(async () => {
try {
const response = await fetch('https://api.ipify.org?format=json');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log(data.ip);
} catch (error) {
console.log('Could not retrieve the public IP:', error.message);
}
})();
203.0.113.42
リクエストは JSON を解析する前に HTTP ステータスを確認し、次に ip フィールドを読み取ります。失敗した場合は、ブラウザのネットワークパネルで接続、サービス、またはコンテンツセキュリティポリシーに関する詳細を確認してください。この方法は ipify が観測したアドレスを返します。デバイスのプライベート LAN アドレスは明らかになりません。IP のみの応答で十分で、追加の位置フィールドが不要な場合に使用してください。
ipinfo で IP と位置情報を取得する
ipinfo は ip フィールドを返し、city、region、country、loc などの位置関連フィールドを提供する場合があります。この例では、代表的な応答を使用してそれらのフィールドの読み取り方法を示します。ローカルの fetch 代替により、デモンストレーションはネットワークアクセスに依存しません。実際のリクエストでは、以下に示す JSON エンドポイントを使用してください。利用可能なフィールドとアクセスはリクエストとプロバイダーの現在の要件によって異なる場合があるため、固定されたクォータ数値に頼るのではなく、認証情報とプランの制限についてはプロバイダーのドキュメントを確認してください。
// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({
ip: '203.0.113.42',
city: 'Austin',
region: 'Texas',
country: 'US',
loc: '30.2672,-97.7431',
}),
});
(async () => {
try {
const response = await fetch('https://ipinfo.io/json');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log('IP:', data.ip);
console.log('Location:', data.city, data.region, data.country);
} catch (error) {
console.log('Could not retrieve IP information:', error.message);
}
})();
IP: 203.0.113.42
Location: Austin Texas US
観測されたアドレスだけが必要な場合は、ip フィールドを使用してください。追加のフィールドは広域の地域表示をサポートできますが、位置データは概算であり、プロバイダーのデータに依存します。デバイスの正確な位置を特定するものではありません。リクエストが失敗した場合は、ネットワーク応答と、エンドポイントの現在のアクセス要件があなたの使用に適用されるかどうかを確認してください。
Abstract で IP と地理位置データを取得する
Abstract は IP 地理位置エンドポイントを提供します。そのリクエストでは API キーを使用するため、プロバイダーを通じてキーを作成し、以下のプレースホルダーを置き換えてください。URL API はキーをクエリパラメータとしてエンコードします。この例では代表的な応答を使用し、その IP と位置フィールドを出力します。ローカルの fetch 代替により、解析例は決定的になります。実際のリクエストでは、インターフェース用のフィールドを選択する前に、アカウントアクセス、クォータ、応答スキーマについてプロバイダーの最新のドキュメントを確認してください。ブラウザの JavaScript に埋め込まれたキーは訪問者に見えます。キーを非公開にする必要がある場合は、サーバー側プロキシを使用してください。
// Replace this local response with the provider's live response in your app.
globalThis.fetch = async () => ({
ok: true,
json: async () => ({
ip_address: '203.0.113.42',
city: 'Austin',
region: 'Texas',
country: 'United States',
latitude: 30.2672,
longitude: -97.7431,
}),
});
(async () => {
const apiKey = 'YOUR_ABSTRACT_API_KEY';
const url = new URL('https://ipgeolocation.abstractapi.com/v1/');
url.searchParams.set('api_key', apiKey);
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();
console.log('IP:', data.ip_address);
console.log('Location:', data.city, data.region, data.country);
console.log('Coordinates:', data.latitude, data.longitude);
} catch (error) {
console.log('Could not retrieve geolocation data:', error.message);
}
})();
IP: 203.0.113.42
Location: Austin Texas United States
Coordinates: 30.2672 -97.7431
この例では、返されたオブジェクトから IP と位置フィールドを読み取ります。ローカルサンプルは解析のみを示すもので、実際のサービス応答を検証するものではありません。API キーが欠けている、拒否された、または制限されている場合、エラー応答につながる可能性があります。ネットワークやサービスの障害によっても結果が得られない場合があります。アプリケーションでこれらのケースを処理し、特定のフィールドを表示するために例を適応させる際には、応答とプロバイダーのドキュメントを確認してください。現在の応答とアクセス条件がアプリケーションに必要な位置データに合う場合に Abstract を選択してください。