住所取得プラグイン
概要
郵便番号から住所を取得し、特定のフィールドにセットします。
活用例
顧客情報での顧客住所入力などで使用できます。
注意事項
- このサイトに掲載しているサンプルプログラムは、参考用としてご提供しています。動作保証はしておりませんので、ご注意ください。
なお、これらのプログラムを使用したことによるトラブルや損害については、責任を負いかねますので、あらかじめご了承ください。
サポート窓口へお問い合わせいただいても、対応はできかねますのでご了承ください。 - JavaScriptプラグインは、プロフェッショナルコースで使用できます。
制限事項
- レコード作成・レコード編集画面のみ動作します。
- 対象フィールドにはテキストタイプのみ選択可能です。
プラグインの機能
-
設定画面
テキストフィールドから、郵便番号・住所を入力するフィールドを選択します。
-
プラグイン
指定した郵便番号フィールドに住所検索ボタンを配置します。
住所検索ボタンを押下すると、取得した住所情報を住所フィールドに入力します。
開発手順
STEP1：設定画面
プラグインを追加したアプリのフィールド一覧を取得し、設定の選択肢として表示します。
フィールド一覧 の取得には、REST API を使用します。
プラグイン設定用にフィールド一覧を取得します。(config.js)
// プラグイン設定情報する (アプリIDの取得用)
const config = atPocket.plugin.app.getConfig();
// フィールド一覧取得API実行する
atPocket.api('apps/'+ config.appId +'/fields', 'GET', {}, function(result) {
// 成功時に実行する処理を記載
// セレクトボックスの選択肢にフィールド一覧をセットします
・・・
}, function(result) {
// エラー時に実行する処理を記載
・・・
});
プラグイン設定表示用のHTMLを記載します。(config.html)
<div class="config_form">
<div class="config_row">
<div class="config_caption">
郵便番号
</div>
<div class="config_input">
<select id="zip_field" name="zip_field">
</select>
</div>
</div>
<div class="config_row">
<div class="config_caption">
住所
</div>
<div class="config_input">
<select id="address_field" name="address_field">
</select>
</div>
</div>
</div>
STEP2：プラグイン本体
対象フィールドに住所取得用のボタンを配置します。ボタン押下時にAPIを実行し、住所情報を取得します。
レコード作成・レコード編集画面表示時に、住所検索ボタンを配置します。(plugin.js)
// プラグイン設定を取得する
const config = atPocket.plugin.app.getConfig();
// レコード作成画面/編集画面表示時に実行する
atPocket.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
// 郵便番号フィールド要素を取得
const zipField = atPocket.app.record.getFieldElement(config.zip_field);
// 住所検索用ボタンを追加
const zipButton = document.createElement('div');
zipButton.id = 'zipButton';
zipButton.textContent = "住所検索";
zipButton.addEventListener('click', function(){
getAddress();
});
zipField.append(zipButton);
});
外部APIを実行して、レコードの値にセットします。(plugin.js)
// 住所検索
function getAddress() {
// レコードの値を取得
const records = atPocket.app.record.get();
// 郵便番号の値を取得
const zipCode = records[config.zip_field].value;
・・・
// 外部APIリクエスト送信
atPocket.proxy('https://api.zipaddress.net?zipcode=' + zipCode, 'GET', {}, null, function(result) {
// 取得結果がある場合
if(result.data) {
// 住所情報セット
records[config.address_field].value = result.data.fullAddress;
// レコードに値をセット
atPocket.app.record.set(records);
} else {
alert("住所がみつかりません。郵便番号が正しいか確認してください。");
}
}, function(result) {
console.log(result);
});
}