問い合わせフォームなどでユーザーに住所を入力してもらうときには、郵便番号から他のフィールドに自動入力させることでユーザビリティが向上します。
zipcloudのAPIは無料で使えるので、試してみてはどうでしょうか？
免責事項などをよく読んで、ご利用ください。
単に自動入力をさせるだけなら、PHPだけでも良いのですがページの一番上ではなく問い合わせフォームをページ下部に配置する場合などは、フォーム送信した時にページ上部に戻ってしまいます。
それですとユーザビリティが良くないので非同期通信を行いスクロールせずに読み直すようにします。
目次
JavaScript
JavaScript関数 fetchAddress: この関数は、フォームが送信されたときに呼び出されます。
郵便番号を取得して、非同期リクエスト（AJAXリクエスト）を行います。
fetchを使用して、PHPスクリプト(address_fetch.php)に郵便番号を送信します。
レスポンスが返されたら、そのデータを使って住所のフィールドを更新します。
エラーがある場合はコンソールにエラーを表示します。
最後にreturn false;を使用して、フォームのデフォルトの送信動作（ページの再読み込み）を防ぎます。
function fetchAddress() {
const zipcode = document.getElementById('zipcode').value;
if (zipcode.length === 7) {
fetch(`address_fetch.php?zipcode=${zipcode}`)
.then(response => response.json())
.then(data => {
if (data.status === "OK") {
document.getElementById('prefecture').value = data.prefecture;
document.getElementById('city').value = data.city;
document.getElementById('restAddress').value = data.restAddress;
} else {
alert(data.message);
}
})
.catch(error => {
console.error('Error:', error);
});
}
return false; // フォームのデフォルトの送信を防止
}
HTML
<form onsubmit="return fetchAddress();">
<label for="zipcode">郵便番号:</label>
<input type="text" id="zipcode" name="zipcode" required>
<input type="submit" value="検索">
<label for="prefecture">都道府県:</label>
<input type="text" id="prefecture" name="prefecture" readonly>
<label for="city">市区町村:</label>
<input type="text" id="city" name="city" readonly>
<label for="restAddress">町域名:</label>
<input type="text" id="restAddress" name="restAddress" readonly>
</form>
PHP
郵便番号の取得: $_GET[‘zipcode’]を使用して、AJAXリクエストから郵便番号を取得します。
APIリクエスト: file_get_contentsを使用して、指定されたAPIに郵便番号をパラメータとして送信し、レスポンスを取得します。
レスポンスの処理:
APIからのレスポンスをJSON形式でデコードします。
レスポンスが成功かつ結果が含まれている場合、住所情報を抽出し、JSON形式でクライアントに送り返します。
エラーが発生した場合、エラーメッセージを含むJSONを送り返します。
JSON形式のレスポンス: header(‘Content-Type: application/json’);を使用して、レスポンスがJSON形式であることを指定します。
この方法により、フォームの送信時にページの再読み込みを防ぎ、現在のスクロール位置を維持しながら住所情報を取得し表示できます。また、非同期処理によりユーザビリティが向上します。
if (isset($_GET['zipcode'])) {
$zipcode = $_GET['zipcode'];
$apiUrl = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" . urlencode($zipcode);
$response = file_get_contents($apiUrl);
$result = json_decode($response, true);
header('Content-Type: application/json');
if ($result["status"] == 200 && !empty($result["results"])) {
$addressData = $result["results"][0];
echo json_encode([
"status" => "OK",
"prefecture" => $addressData["address1"],
"city" => $addressData["address2"],
"restAddress" => $addressData["address3"]
]);
} else {
echo json_encode([
"status" => "ERROR",
"message" => "住所が見つかりませんでした。"
]);
}
}
サンプル
[myphp file=’/tools/zipcode/zip-auto’]