IP 位置情報に基づいて A リンクと button の遷移先を設定する

すべてのケースが「アクセス禁止」を目的としているわけではありません。より軽量な「地域分岐（Geo Routing）」をしたい場面も多いです。同じページでも、国/地域が異なるユーザーがリンクやボタンをクリックしたときに、遷移先 URL を変えたい、という要件です。このような分岐は一般的に：ダウンロード URL の振り分け、地域別の決済入口、異なるカスタマーサポートシステム、異なるサイト（グローバル/ローカル）への入口切り替え、などで使われます。

この記事で扱うのは 1 つだけです：ページ読み込み時にフロントエンドから GET https://my.ipin.io/info をリクエストして訪問者の国コード country を取得し、その country に応じて <a> の href、または <button> のクリック遷移先 URL を地域別の URL に設定します。例えば API の返却は次のようになります：

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

1）ロジックと仕組み（2 段）

1 段目：フロー
ページ読み込み → フロントエンドがすぐに https://my.ipin.io/info をリクエスト → country を取得 → ルールに従って遷移先 URL を選択（例：TW は A の URL 1、US は A の URL 2、その他はデフォルト URL）→ リンク/ボタンの「遷移先」をその URL に更新します。ユーザーがクリックした時点で、はじめて該当の URL に遷移します。

2 段目：最初にデフォルト URL を置いて、後から地域で上書きするのを推奨する理由
フロントエンド環境は不安定になりがちです。ネットワーク、CORS、広告ブロッカー、API タイムアウトなどで country を取得できないケースがあります。より堅牢な方法は：ページ側にまず「使えるデフォルト URL（汎用ランディング）」を入れておき、スクリプトで地域が取得できたときだけ地域専用 URL に上書きすることです。こうしておけば API が失敗してもページは通常どおり遷移でき、「クリックしても反応しない / URL が空」の問題を避けられます。

2）コード実装（超シンプル、A と button を分けて説明）

2.1 A リンク（id を使用）：country に応じて href を設定

想定シーン：ページ内に重要なリンクが 1 つだけあり、地域によって遷移先を変えたい。以下の例は最小ロジックのみ： TW なら TW 用リンク、それ以外はデフォルトリンクです。

<a id="geoLink" href="https://example.com/default">今すぐ移動</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    const a = document.getElementById("geoLink");
    if (a) a.href = target;
  } catch (e) {
    // 失敗したらデフォルト href を維持
  }
})();
</script>

2.2 A リンク（class を使用）：country に応じて href を一括設定

想定シーン：ページ内の複数リンクを地域分岐したい。最も簡単なのは同じ class を付けて一括更新することです。例は引き続き最小：TW は TW 用リンク、その他はデフォルトリンクです。

<a class="geo-link" href="https://example.com/default">ダウンロード入口</a>
<a class="geo-link" href="https://example.com/default">購入入口</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    document.querySelectorAll(".geo-link").forEach(function (el) {
      el.href = target;
    });
  } catch (e) {}
})();
</script>

2.3 Button（id を使用）：クリック後に country に応じて遷移

想定シーン：ボタンはリンクそのものではないので、フロントエンドでクリックイベントをバインドする必要があります。以下はコアだけ：先に country で遷移先 URL を選び、ボタンクリック時にその URL へ遷移します。

<button id="geoBtn" type="button">クリックして移動</button>

<script>
(async function () {
  let target = "https://example.com/default"; // デフォルト URL

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {
    // 失敗したらデフォルト URL を使用
  }

  const btn = document.getElementById("geoBtn");
  if (btn) btn.onclick = function () { window.location.href = target; };
})();
</script>

2.4 Button（class を使用）：クリック遷移を一括バインド

想定シーン：複数のボタンを地域別に遷移させたい。最も簡単なのは共通 class を付けてループでクリックをバインドすることです。注意：ボタンには「デフォルト href」がないので、スクリプト側でデフォルト URL を先に用意しておくと、API 失敗時に「反応しない」を避けられます。

<button class="geo-btn" type="button">ボタン 1</button>
<button class="geo-btn" type="button">ボタン 2</button>

<script>
(async function () {
  let target = "https://example.com/default"; // デフォルト URL

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {}

  document.querySelectorAll(".geo-btn").forEach(function (btn) {
    btn.onclick = function () { window.location.href = target; };
  });
})();
</script>

2.5 複数地域（TW、US…）：マッピング表で「目的 URL を直接設定」（最短で使える）

一番シンプルなルール：まずデフォルト URL を用意し、国コードごとのマッピング表 map で上書きします。マッピングがあればそれを使い、なければデフォルトを使います。ポイントは：target を計算したら、すぐに A の href か button のクリック処理に反映することです。

2.5.1 A リンク（id）：href を直接設定

<a id="geoLink" href="https://example.com/default">今すぐ移動</a>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = map[info.country] || defaultUrl;

    document.getElementById("geoLink").href = target; // ✅ ポイント：target を href に書き込む
  } catch (e) {
    // 失敗したらデフォルト href のまま
  }
})();
</script>

2.5.2 button（id）：クリック時に target へ遷移

<button id="geoBtn" type="button">クリックして移動</button>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };
  let target = defaultUrl;

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    target = map[info.country] || defaultUrl;
  } catch (e) {}

  document.getElementById("geoBtn").onclick = function () {
    window.location.href = target; // ✅ ポイント：クリック時に target で遷移
  };
})();
</script>

3）WordPress / Joomla / Magento / Shopify などでの実装（フロントエンド方式 + コード）

この「地域で A リンク/ボタン遷移先を変える」実装は、本質的にはスクリプトをサイト全体の Head もしくはレイアウトファイルに入れて、できるだけ早く実行させることです。サーバー側のロジックを触る必要はありません。ページ読み込み時にスクリプトが走りさえすれば、ユーザーがクリックする前に遷移先を用意できます。

3.1 WordPress

「ヘッダー/フッターにスクリプト挿入」系プラグインで、Header にスクリプトを貼る（全ページ適用）
またはテーマの header.php で </head> の直前に挿入

3.2 Joomla! / Joomla

現在のテンプレートの index.php で <head> を探し、</head> の直前に貼る
またはテンプレートの「head カスタムコード」機能を利用（テンプレートにより異なる）

3.3 Magento

テーマのグローバル head（theme/layout の head 領域）にスクリプトを追加
サイト全体で出力できるようにしておくと、地域マッピングルールを一元管理しやすい

3.4 Shopify

Online Store → Themes → Edit code
theme.liquid を見つけ、</head> の直前にスクリプトを貼る（全ページ適用）

3.5 共通ルール

全体の <head> かレイアウトファイルを編集できるシステムなら、同じ方法で「IP 地域に応じてリンク/ボタンの目的地を設定」できる
外部 API が落ちても使えるよう、デフォルト URL は残しておくのがおすすめ

4）まとめ

> ページ読み込み時に https://my.ipin.io/info をリクエストして country を取得し、country に応じて target URL を選択して、A リンクの href またはボタンのクリック遷移先を更新することで、「IP 地域ごとに異なる目的地へ分岐する」フロントエンド方案を実現する。

実務で最重要なのは 2 点です。1 つ目は、スクリプトを head のなるべく前に置いて、遷移先の準備を早く済ませること。2 つ目は、API 失敗時にリンク無効やボタン無反応にならないよう、必ずデフォルト URL を用意しておくことです。地域マッピングルールさえ適切に管理できれば、ダウンロード入口、決済入口、サポート入口などのシーンで安定して運用できます。

5）よくある質問

Q1：ボタンをクリックしても遷移しないのはなぜ？

よくある原因は、スクリプトが実行されていない、または API リクエストが失敗していることです。まずデフォルト URL を用意し（サンプルはそうしています）、開発時は一時的に console.log(info) で country が取得できているか確認するとよいです。

Q2：A リンクに最初からデフォルト href を入れるのを推奨するのはなぜ？

地域判定に失敗しても、ユーザーがデフォルトリンクで遷移できるからです。そうしないと「API 失敗 → リンクが更新されない → 行き先がない」という状態になります。

Q3：ボタンを新しいウィンドウで開ける？

可能です。window.location.href = target を window.open(target, "_blank") に置き換えてください。クリックイベント内で発火させれば、通常はブラウザにブロックされにくいです。

Q4：TW、US、JP など複数地域を対応したい場合は？

マップ（対応表）が最も簡単で保守しやすいです：{ TW: "...", US: "..." }。一致があればその URL を使い、なければデフォルト URL を使います。

Q5：CORS は影響する？

影響します。CORS によりブラウザが https://my.ipin.io/info の JSON を読み取れない場合、country を取得できず、最終的にはデフォルト URL しか使えません。本番前にコンソールでリクエストが成功するか確認するのがおすすめです。