はじめに
住所入力フォームは、ECサイトやサービス登録など多くのウェブサービスで必須の機能です。しかし、ユーザーにとって住所入力は手間がかかり、入力ミスも発生しやすい作業です。また、建物名やマンション名の入力は、ユーザーによって書き方が異なったり、表記揺れも多く、サービス提供者側（受け取る側）での確認も負担となってきます。
本記事では、ZENRIN Maps APIのジオコーディング機能を使って、郵便番号や住所からマンション名まで自動取得する方法について解説します。この機能を実装することで、ユーザーの入力負担を軽減し、データ精度の向上も実現することができ、サービス提供者側（受け取る側）の負担も減らすことができます。
ZENRIN Maps API 2ヶ月無料お試しID
ZENRIN Maps APIを実際に試してみたい方は、2ヶ月無料のお試しIDをご利用いただけます！
📝 お申し込みはこちら
👉 ZENRIN Maps APIの始め方
お試し期間中は、本記事で紹介する機能をはじめ、ZENRIN Maps APIの豊富な機能をご利用いただけます。
ZENRIN Maps APIのジオコーディング機能の特徴
ZENRIN Maps APIは、ゼンリンが提供する地図情報APIです。一般的なジオコーディングAPIと比較して、以下の特徴があります：
- 詳細な住所情報 – 番地レベルまでの正確な住所を取得可能
- 建物情報の取得 – マンション名・ビル名などの建物情報を含む
- 部屋・テナント情報 – 一部の建物では部屋番号やテナント情報まで取得可能
- 高精度な位置情報 – 建物の正確な緯度・経度を取得
特に、容易に建物名や部屋情報を取得できる点は、他のAPIにはない大きな強みです。
利用できるAPI一覧
ZENRIN Maps APIのジオコーディング関連では、主に以下のAPIが利用できます：
1. 郵便番号検索
- search/postcode: 郵便番号から住所を取得
2. 住所正規化
- data-coding/ac_standard: 基本的な住所正規化
- data-coding/ac_premium: 建物情報も含めた高精度な住所正規化
3. 建物検索
- search/building_name: 建物名からの検索
- data-coding/targeting: 住所からの建物検索
4. 建物の詳細情報取得
- search/building_pos: 建物の緯度・経度から、テナント情報や部屋情報を取得
実装例：高機能な住所入力フォーム
実際にZENRIN Maps APIを使った住所入力フォームの実装例を見てみましょう。
1. 基本的な処理の流れ
2. 主要な機能と基本的な実装方法
郵便番号からの住所取得
郵便番号を入力すると、search/postcodeAPIを使用して住所情報を取得するようにします。
// 郵便番号から住所を取得する処理
const getAddressesFromPostCode = async () => {
// apiPath
const apiPath = 'https://test-web.zmaps-api.com/search/postcode';
// params
const apiParams = {
post_code: state.form.post_code, // 入力した郵便番号
sort: 'address_code',
}
// queryString
const queryString = new URLSearchParams(apiParams).toString();
// headers
const header = {
'Content-Type': 'application/x-www-form-urlencoded',
'x-api-key': state.api.key, // APIキーを設定
'Authorization': 'ip',
};
// APIリクエスト
const response = await fetch(`${apiPath}?${queryString}`, {
method: 'GET',
headers: header,
});
// 結果処理
const r = await response.json();
if(r.result.item.length === 1) {
// APIの戻り値から得られた住所をフォームに設定
state.form.address = r.result.item[0].address;
}
};
さらに詳しく
住所からの建物情報取得
住所を入力または選択すると、ac_premiumやtargetingAPIを使用して建物情報を取得するようにします。
ここでは、ac_premiumAPIを使用した場合のコード例を示します。
// 住所から建物情報を取得
const getBuildingsFromAddress = async () => {
// apiPath (ac_premiumの場合)
const apiPath = 'https://test-web.zmaps-api.com/data-coding/ac_premium';
// params
const apiParams = {
word: state.form.address, // 入力した住所
use_multi_addr: true,
use_kana: true,
building_name: null,
};
// queryString
const queryString = new URLSearchParams(apiParams).toString();
// headers
const header = {
'Content-Type': 'application/x-www-form-urlencoded',
'x-api-key': state.api.key, // APIキーを設定
'Authorization': 'ip',
};
// APIリクエスト
const response = await fetch(`${apiPath}?${queryString}`, {
method: 'GET',
headers: header,
});
// 結果処理
const r = await response.json();
// ac_premiumの場合、建物情報を直接取得
if(r.result.item[0].building_info) {
// 建物情報が複数ある場合があるため、配列に格納する。
state.form.building_options =
r.result.item[0].building_info.map(building => ({
name: building.building_name,
address: r.result.item[0].address,
// 位置情報も取得
lat: building.position[1],
lng: building.position[0],
}));
}
};
さらに詳しく
建物名からの住所逆引き
建物名を入力すると、search/building_nameAPIを使用して住所を逆引きするようにします。
// 建物名から住所を逆引き
const getAddressFromBuilding = async () => {
// apiPath (ac_premiumの場合)
const apiPath = 'https://test-web.zmaps-api.com/search/building_name';
// params
const apiParams = {
word: state.form.building, // 入力した建物名
};
// queryString
const queryString = new URLSearchParams(apiParams).toString();
// headers
const header = {
'Content-Type': 'application/x-www-form-urlencoded',
'x-api-key': state.api.key, // APIキーを設定
'Authorization': 'ip',
};
// APIリクエスト
const response = await fetch(`${apiPath}?${queryString}`, {
method: 'GET',
headers: header,
});
// 結果処理
const r = await response.json();
// 結果が単一の場合
if(r.result.item.length === 1) {
// 郵便番号を設定
state.form.post_code = r.result.item[0].post_code;
// 住所を設定
state.form.address = r.result.item[0].address;
}
// 結果が複数の場合
else if(r.result.item.length > 1) {
// 複数の候補がある場合、候補の配列を作成
state.form.building_options = r.result.item.map(item => ({
name: item.building_name,
address: item.address,
post_code: item.post_code,
}));
}
};
建物の部屋・テナント情報取得
建物を選択すると、search/building_posAPIを使用して部屋・テナント情報を取得するようにします。
// 建物の部屋・テナント情報を取得
const getRooms = async (lat, lng) => {
// apiPath
const apiPath = 'https://test-web.zmaps-api.com/search/building_pos';
// params
const apiParams = {
position: [lng, lat],
building_shape: false,
sort_attribute: ['floor_sort'],
};
// queryString
const queryString = new URLSearchParams(apiParams).toString();
// headers
const header = {
'Content-Type': 'application/x-www-form-urlencoded',
'x-api-key': state.api.key, // APIキーを設定
'Authorization': 'ip',
};
// APIリクエスト
const response = await fetch(`${apiPath}?${queryString}`, {
method: 'GET',
headers: header,
});
// 結果処理
const r = await response.json();
if(r.result && r.result.item.length === 1) {
// 部屋・テナント情報を表示
state.form.room_options = r.result.item[0].attribute
.filter(item => item.tenant_room_name || item.name)
.map(item => {
// 階数や部屋名またはテナント名が戻り値に存在するため適宜組み合わせて名称を作成する
let room_name = '';
if(item.tenant_floor) {
room_name = `${item.tenant_floor} : `;
}
if(item.tenant_room_name && item.name) {
room_name += `${item.tenant_room_name} : ${item.name}`;
} else if(item.tenant_room_name) {
room_name += item.tenant_room_name;
} else if(item.name) {
room_name += item.name;
}
return { name: room_name };
});
}
};
ユーザー体験の向上ポイント
ZENRIN Maps APIを使った住所入力フォームは、以下のような形でユーザー体験を向上させます：
1. 郵便番号からマンション名まで自動補完
郵便番号を入力するだけで、住所だけでなくマンション名に至るまで、サジェストからの自動入力に繋げることができるため、ユーザーの入力負担が大幅に軽減されます。
2. マンション名からの逆引き
マンション名を知っている場合は、マンション名を入力するだけで住所や郵便番号を自動入力できます。住所を正確に覚えていなくても、建物名から情報を特定できます。
3. 候補のサジェスト表示
複数の候補がある場合は、リストでサジェストを表示して選択できるため、入力ミスを減らせます。
4. 住所の正規化
入力された住所が自動的に正規化されるため、表記揺れや不完全な住所でも正確な情報に変換されます。
5. 階数・部屋番号の入力支援
マンションやビルによっては、階数や部屋番号の候補も表示されるため、より詳細な情報まで正確に入力できます。
導入のメリット
1. ユーザーにとってのメリット
- サジェストや自動入力により入力の手間が大幅に削減される
- 住所の入力ミスが減少する
- 正確な住所情報を簡単に入力できる
2. サービス提供者にとってのメリット
- 住所データの精度向上
- 不正確な住所による配送トラブルの減少
- ユーザー離脱率の低下
- 顧客体験の向上
まとめ
ZENRIN Maps APIのジオコーディング機能を活用することで、単なる住所入力フォームから、マンション名や部屋番号まで補完できる高機能な住所入力システムを実現できます。ユーザーの入力負担を軽減し、より正確な住所情報を取得できることは、多くのサービスにとって大きなメリットとなるでしょう。
特にECサイトや不動産サービス、配送サービスなど、正確な住所情報が重要なサービスでは、この機能の導入を検討する価値があります。
ZENRIN Maps API 2ヶ月無料お試しIDのご案内
本記事でご紹介したZENRIN Maps APIの機能を実際にお試しいただけます！
📝 お申し込みはこちら
👉 ZENRIN Maps APIの始め方
お試し期間中は、ZENRIN Maps APIの豊富な機能をご利用いただけるので、本格導入前の検証にぜひご活用ください。
関連記事
※本記事で使用しているAPIキーやURLはサンプルです。実際の導入時には、公式サイトから取得した正式なAPIキーを使用してください。
Views: 0
