【ITニュース解説】🌍 3 Ways to Detect a User’s Country on Your Website

Webサイトでユーザーの国を特定する方法はいくつかあり、ユーザーエクスペリエンスの向上、GDPRなどの法令遵守、マーケティング効果の向上に役立つ。この記事では、軽量でプライバシーに配慮した3つの方法を比較検討する。

1つ目の方法は、CDNヘッダーを利用する方法だ。CDN（コンテンツデリバリーネットワーク）を利用している場合、HTTPヘッダーに国コードが含まれている場合がある。例えば、CloudflareではCF-IPCountry、AWS CloudFrontではCloudFront-Viewer-Country、FastlyではFastly-Geo-Country-Codeといったヘッダーを利用できる。CDNはユーザーのIPアドレスをエッジで検出し、ISO国コードをリクエストヘッダーに挿入する。バックエンドはこのヘッダーを読み取り、応答を調整できる（ローカライズされたコンテンツの表示やリダイレクトなど）。この方法の利点は、高速でプライバシーに配慮されており、多くのCDNプランで無料であることだ。ただし、CDNを利用する必要があり、サーバーサイドレンダリングに最適で、精度はCDNのIPデータベースに依存する。エッジでのパーソナライズ、geoルーティング、国固有のリダイレクトに適している。

2つ目の方法は、IP Geolocation APIを利用する方法だ。これは、CDNの有無にかかわらず、サーバーまたはクライアントで簡単に統合できる。IP Geolocation APIは、リクエスターのパブリックIPアドレスを検索し、国、ISOコード、タイムゾーンなどのメタデータを返す。Geoapifyなどのサービスを利用できる。Geoapify IP Geolocation APIへのリクエスト例は以下の通りだ。 GET https://api.geoapify.com/v1/ipinfo?apiKey=YOUR_API_KEY 応答例は以下の通りだ。

Copy
1{
2  "ip": "93.109.164.24",
3  "city": {
4    "name": "Nicosia",
5    "names": { "en": "Nicosia" }
6  },
7  "continent": {
8    "code": "EU",
9    "name": "Europe",
10    "names": { "en": "Europe", "fr": "Europe", "ru": "Европа" }
11  },
12  "country": {
13    "iso_code": "CY",
14    "name": "Cyprus",
15    "name_native": "Κύπρος",
16    "capital": "Nicosia",
17    "currency": "EUR",
18    "flag": "🇨🇾",
19    "languages": [
20      { "iso_code": "el", "name": "Greek", "name_native": "Ελληνικά" },
21      { "iso_code": "tr", "name": "Turkish", "name_native": "Türkçe" }
22    ]
23  },
24  "location": { "latitude": 35.17284, "longitude": 33.35397 }
25}

Node.jsでのサーバーサイドでの使用例は以下の通りだ。

Copy
1import fetch from "node-fetch";
2
3export async function detectCountry(req, res) {
4  const apiKey = process.env.GEOAPIFY_KEY;
5  const url = `https://api.geoapify.com/v1/ipinfo?apiKey=${apiKey}`;
6
7  const r = await fetch(url);
8  const data = await r.json();
9
10  const country = data?.country?.name || "Unknown";
11  const flag = data?.country?.flag || "";
12  res.json({ country, flag, ip: data?.ip });
13}

ブラウザでのクライアントサイドでの使用例は以下の通りだ。APIキーを公開しないように、サーバーサイドでリクエストをプロキシすることを推奨する。

Copy
1fetch(`https://api.geoapify.com/v1/ipinfo?apiKey=${apiKey}`)
2  .then(r => r.json())
3  .then(data => {
4    document.documentElement.setAttribute("Country code: ", data.country.iso_code);
5    // toggle UI, load translations, etc.
6  });

この方法の利点は、あらゆるアーキテクチャで動作し、国以外の豊富なメタデータを提供し、プライバシーに配慮していることだ。ただし、ネットワーク呼び出しが追加され、高いボリュームでは有料プランが必要になる場合がある。結果をIPごとにキャッシュすることで、レイテンシとコストを削減できる。APIが失敗した場合に備えて、安全なロケールにフォールバックするロジックを実装し、GDPRに配慮して、不要な限り生のIPアドレスを保存しないようにする。

3つ目の方法は、ブラウザのGeolocation APIとReverse Geocoding APIを利用する方法だ。Geolocation APIは正確な座標を提供するが、国を取得するにはReverse Geocoding APIが必要になる。まず、Geolocation APIを使用して座標を取得する。

Copy
1navigator.geolocation.getCurrentPosition(
2  (pos) => {
3    const { latitude, longitude } = pos.coords;
4    console.log(latitude, longitude);
5  },
6  (err) => {
7    console.error("User denied or unavailable:", err);
8  }
9);

このAPIを使用すると、ブラウザはユーザーに位置情報の許可を求める。次に、Geoapify Reverse Geocoding APIを使用して座標を逆ジオコーディングする。 GET https://api.geoapify.com/v1/geocode/reverse?lat=35.17284&lon=33.35397&apiKey=YOUR_API_KEY この方法の利点は、非常に正確であり、正確な位置を必要とするアプリに適していることだ。ただし、ユーザーの許可が必要であり、多くのユーザーが拒否する可能性があり、追加のReverse Geocoding API呼び出しが必要になる。地図アプリケーション、ロケーションベースのサービス、チェックイン、配達に適している。

これらの3つの方法を比較すると、CDNヘッダーは高速なサーバーサイドのパーソナライズに適しており、IP Geolocation APIは汎用的な使用に適しており、ブラウザのGeolocation APIは地図アプリケーションに適している。最適な方法は、アプリケーションの速度、プライバシー、精度のニーズによって異なる。