外部のAPIを利用して郵便番号から住所を検索する
郵便番号から住所を検索する事ができる外部のAPIを利用して、
入力された郵便番号から住所を自動で設定します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
本記事の内容は、記事公開日（2019年4月1日）当時の内容です。
利用するイベント・API
申請入力画面イベント（パーツ値変更イベント）
サンプルフォーム
パーツID | パーツタイプ | 補足 |
fidPostCode | テキスト（一行）パーツ | 郵便番号 |
fidAddress | テキスト（一行）パーツ | 住所 |
fidAddressHira | テキスト（一行）パーツ | ひらがなの住所 |
fidAddressKana | テキスト（一行）パーツ | カタカナの住所 |
fidAddressHalfKana | テキスト（一行）パーツ | カタカナ（半角）の住所 |
カスタマイズコード
カスタマイズコードCopied!
(function() { 'use strict';
/** * 郵便番号の変更イベント */ collaboflow.events.on('request.input.fidPostCode.change', function(eventData) { // 郵便番号を格納 const postCode = eventData.parts['fidPostCode'].value.replace('-', ''); if (postCode.length !== 7) { return; }
const headers = {}; const parseType = 'json';
// 指定された郵便番号で住所を取得する // 郵便番号取得 // https://postcode-jp.com/webapiV2/postcode#getPostcodes const apiKey = '***********ここに取得したAPIキーを指定する**************'; const parameters = '?apiKey=' + apiKey; const url = 'https://apis.postcode-jp.com/api/v2/postcodes/' + postCode + parameters;
return collaboflow.proxy .get(url, headers, parseType) .then(function(response) {
if (response.status !== 200) { throw Error(response); }
const searchResult = response.body; // 取得した住所の値を設定 eventData.parts['fidAddress'].value = searchResult.allAddress; eventData.parts['fidAddressHira'].value = searchResult.allAddressFullHira; eventData.parts['fidAddressKana'].value = searchResult.allAddressFullKana; eventData.parts['fidAddressHalfKana'].value = searchResult.allAddressHalfKana; }) .catch(function(error) { // エラーリソース // https://postcode-jp.com/webapiV2/error console.error(error);
alert('住所の検索に失敗しました。'); return false; }); });})();事前準備
PostcodeJP API にてアカウント登録し、APIキーを取得します。
郵便番号APIについて
本サンプルの郵便番号での住所検索は、 PostcodeJP API を利用しています。
APIキーを取得するには、PostcodeJP APIのアカウント登録が必要です。
利用規約等の詳細については、PostcodeJP APIのサイトにてご確認ください。
動作の確認手順
1. サンプルのカスタマイズコードをjsファイルに保存します。
2. 保存したjsファイルを任意のエディターで表示します。
3. 事前準備にて取得したAPIキーを、 「***********ここに取得したAPIキーを指定する**************」 に指定して保存します。
4. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
5. サンプルフォームに、先で記載されている必要項目を配置します。
6. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
7. 保存したファイルをアップロードします。
8. アプリ設定＞経路設定から新規に経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. 申請画面が表示されます。
11. 任意に郵便番号を指定します。
12. 指定した郵便番号から住所が検索され、設定されます。
