郵便番号から住所を検索する事ができる外部のAPIを利用して、
入力された郵便番号から住所を自動で設定します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
利用するイベント・API
サンプルフォーム
パーツID | パーツタイプ | 補足 |
---|---|---|
fidPostCode | テキスト(一行)パーツ | 郵便番号 |
fidAddress | テキスト(一行)パーツ | 住所 |
fidAddressHira | テキスト(一行)パーツ | ひらがなの住所 |
fidAddressKana | テキスト(一行)パーツ | カタカナの住所 |
fidAddressHalfKana | テキスト(一行)パーツ | カタカナ(半角)の住所 |
カスタマイズコード
(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のサイトにてご確認ください。
動作の確認手順
- サンプルのカスタマイズコードをjsファイルに保存します。
- 保存したjsファイルを任意のエディターで表示します。
- 事前準備にて取得したAPIキーを、
「***********ここに取得したAPIキーを指定する**************」
に指定して保存します。 - アプリ設定>フォーム設定から新規に通常フォームを作成します。
- サンプルフォームに、先で記載されている必要項目を配置します。
- サンプルフォームを再度表示し、カスタマイズのタブを表示します。
- 保存したファイルをアップロードします。
- アプリ設定>経路設定から新規に経路を作成します。
- 新規文書から作成した経路名をクリックします。
- 申請画面が表示されます。
- 任意に郵便番号を指定します。
- 指定した郵便番号から住所が検索され、設定されます。
コメント
0件のコメント
記事コメントは受け付けていません。