WixフォームとVeloを使って、郵便番号を入力すると自動で住所が挿入されるフォームを作成します。
住所の取得には郵便番号検索APIを使用します。
https://zipcloud.ibsnet.co.jp/doc/api
最終的なコードはこちら
$w.onReady(function () {
$w('#input1').onInput(async () => {
// 7桁以上入力されたら実行
if ($w('#input1').value.length >= 7) {
const fetchedData = await getAddress();
// 都道府県
$w('#input2').value = fetchedData[0].address1
// 市区町村
$w('#input3').value = fetchedData[0].address2
// 住所1
$w('#input4').value = fetchedData[0].address3
}
});
});
export async function getAddress() {
const api = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
// 入力されたハイフンを削除して変数に格納
let inputPostalCode = $w('#input1').value.replace("-", "");
let url = api + inputPostalCode;
const response = await fetch(url);
if (response.ok) {
const json = await response.json();
return json.results;
} else {
return Promise.reject("Fetch did not succeed");
}
}
（始める前に開発モードを有効にしておきます）
STEP1 | Wixフォームを準備
Wixフォームを設置します。
4つのテキストタイプの入力項目を設定して、項目タイトルと適当なIDを設定します。
- 項目タイトル: 郵便番号 ID: input1
- 項目タイトル: 都道府県 ID: input2
- 項目タイトル: 市区町村 ID: input3
- 項目タイトル: 住所1 ID: input4
郵便番号はハイフンを入れても8桁なので、8桁までしか入力できないようにしておきます。
郵便番号検索APIの仕組み
郵便番号「7830060」で検索する場合は
https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060
のURLをたたきます。
実際にブラウザでたたくとJson形式で住所情報が表示されます。
STEP2 | 郵便番号検索APIにアクセスする
郵便番号の入力値を受け取り、zipcode=の後ろに追加してあげれば住所情報を受け取れそうです。
"https://zipcloud.ibsnet.co.jp/api/search?zipcode={ユーザーが入力した郵便番号}"
export async function getAddress() {
const api = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
// 入力されたハイフンを削除して変数に格納
let inputPostalCode = $w('#input1').value.replace("-", "");
let url = api + inputPostalCode;
const response = await fetch(url);
if (response.ok) {
const json = await response.json();
return json.results;
} else {
return Promise.reject("Fetch did not succeed");
}
}
ここでは郵便番号検索APIにアクセスするための関数 getAddress を定義しています。
まず、APIのURLを定数 api に格納します。次に、入力された郵便番号を取得し、ハイフンを削除して変数 inputPostalCode に格納します。そして、APIのURLと inputPostalCode を結合して、住所検索用のURL url を作成します。
次に、fetch 関数を使用して、作成したURLにアクセスし、レスポンスを取得します。response.ok が true の場合、レスポンスは正常に受信されたことを示します。その場合、レスポンスからJSONデータを取得し、結果を返します。
response.ok が false の場合、 Promise.reject() を使用して Fetch did not succeed というエラーメッセージを返します。
上記のコードがわからなくても
$w.onReady(function () {
});
の外にコードをコピペで大丈夫です。
#input1 は必要に応じて入力項目のIDと一致させてください。
STEP3 | 住所データを受取り表示させる
input1 要素に入力された郵便番号が7桁以上の場合に、郵便番号検索APIにアクセスして、郵便番号に対応する住所情報を取得し、取得した住所情報をそれぞれ input2、input3、input4 要素に表示します。
$w('#input1').onInput(async () => {
// 7桁以上入力されたら実行
if ($w('#input1').value.length >= 7) {
const fetchedData = await getAddress();
// 都道府県
$w('#input2').value = fetchedData[0].address1
// 市区町村
$w('#input3').value = fetchedData[0].address2
// 住所1
$w('#input4').value = fetchedData[0].address3
// console.log(fetchedData);
}
});
$w.onReady(function () {
});
の中に上記コードをコピペしてください。
#input1 input2 #input3 #input4 は必要に応じて入力項目のIDと一致させてください。
まとめ
入力項目のIDさえ合わせていただければ、ほぼコピペで実装できます。