【郵便番号→住所】フォームブリッジでのカスタマイズについて

[Legacy_Account640 (Kota Tatsumi（Legacy Account）)]

お世話になります。

フォームブリッジにて、郵便番号【項目一つ】から都道府県・市区郡・町名番地の三つの項目に自動入力したいと考えております。

jsファイルを用いたコードの作成と、フォームブリッジで定義されている(jsファイルで必要な)項目IDを確認する方法を、ご教示いただける方がいらっしゃいますと幸いです。

※Javascriptの知識は、まったくありません。。

 

何卒宜しくお願いいたします。

[Legacy_Account2111 (y-kishi（Legacy Account）)]

Kota Tatsumiさん

 

フォームブリッジで、郵便番号から住所を自動入力する方法ですが、

私は以下のような方法で実装しております。

(jQueryプラグイン「jquery.jpostal.js」を使用しています)

 

■前提(フォームブリッジの設定)

・郵便番号入力フォーム (文字列フォーム、フォールドコードは郵便番号)

・住所入力フォーム1 (文字列フォーム、フォールドコードは住所1)

・住所入力フォーム2 (文字列フォーム、フォールドコードは住所2)

・住所入力フォーム3 (文字列フォーム、フォールドコードは住所3)

 

■フォームブリッジに適用しているjs

・https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

・https://jpostal-1006.appspot.com/jquery.jpostal.js

・フォームブリッジ_住所自動入力.js

 

■「フォームブリッジ_住所自動入力.js」のコード内容

====================================================

(function() {
“use strict”;

//フォームのDOMを作成した後のイベント
fb.events.form.mounted = [function (state) {

//郵便番号を入力するinputフォームにidを追加
$(‘input’).eq(0).attr(‘id’, ‘zip_input’);

//住所を自動入力するinputフォームにidを追加
$(‘input’).eq(1).attr(‘id’, ‘address_input1’);
$(‘input’).eq(2).attr(‘id’, ‘address_input2’);
$(‘input’).eq(3).attr(‘id’, ‘address_input3’);

$(function() {
$(‘#zip_input’).jpostal({
postcode : [
‘#zip_input’
],
address : {
‘#address_input1’ : ‘%3’,
‘#address_input2’ : ‘%4’,
‘#address_input3’ : ‘%5’
}
});

//郵便番号のinputフォームが変更された時のイベント
$(‘#zip_input’).on(‘change’, function() {

//住所フィールドに値を入力
state.record.住所1.value = $(‘#address_input1’).val();
state.record.住所2.value = $(‘#address_input2’).val();
state.record.住所3.value = $(‘#address_input3’).val();

});

});

return state;

}];

})();

====================================================

 

「$(‘input’).eq(0).attr(‘id’, ‘zip_input’);」のeq(0)の部分は表示されているinputフォームを上から順に数えて(０から数えます)

idを付与しています。

 

上記設定で、郵便番号を「530-0001」と入力した際には

住所1フォームに「大阪府」

住所2フォームに「大阪市北区」

住所3フォームに「梅田」

と自動入力されます。

(※ハイフンの有無はどちらでも反応します)

 

フォームブリッジで他にフォームを追加した場合に、上記のeq(0)に部分がずれた場合は都度修正が必要ですが、

もし参考になれば幸いです。

[Legacy_Account1730 (nagayama（Legacy Account）)]

y-kishi様

 

お世話になります。nagayamaと申します。

横から失礼します。

 

こちらの住所自動入力、とても参考になります。

今困っていまして、郵便番号・住所のセットが2つ存在するフォームで、こちらの自動入力を実装したいと思っています。

1セットの場合は、上記のとおりで実装出来ましたが、2セットだと、うまくいきませんでした。

切り分けとして、まずは2セット目だけに自動入力を実装しようとしたところ、これもダメでした。

(デバッグツールでエラーも表示されず、自動入力がされない状況です)

フィールドコードなどは何度も見直したのですが、2セットの場合は、根本的にどこか修正が必要でしょうか。

もしかしたら私の単純な間違いかもしれませんが、アドバイスいただけると助かります。

(eq()の部分の数字は、ドロップダウンやラジオボタンも、カウントでしょうか？)

[Legacy_Account2111 (y-kishi（Legacy Account）)]

nagayama様 こんにちは。

 

eqのカウントの仕方ですが、ラジオボタンやチェックボックスは項目1つ1つをカウントするようです。

ドロップダウンはリストがいくつあっても1カウントでした。

※下図参照

郵便番号の入力フォームを2つにする際は、コードも2つ用意すれば問題なく入力できました。

上記の画像のフォームに適用したコードは以下のようになりました。

===========================================================================================

//============================================
//
// 郵便番号から住所を入力
//
//============================================
(function() {
“use strict”;

//フォームのDOMを作成した後のイベント
fb.events.form.mounted = [function (state) {

//########################
// 郵便番号入力①
//########################

//郵便番号①を入力するinputフォームにidを追加
$(‘input’).eq(6).attr(‘id’, ‘zip_input’);

//住所を自動入力するinputフォームにidを追加
$(‘input’).eq(7).attr(‘id’, ‘address_input1’);
$(‘input’).eq(8).attr(‘id’, ‘address_input2’);
$(‘input’).eq(9).attr(‘id’, ‘address_input3’);

$(function() {
$(‘#zip_input’).jpostal({
postcode : [
‘#zip_input’
],
address : {
‘#address_input1’ : ‘%3’,
‘#address_input2’ : ‘%4’,
‘#address_input3’ : ‘%5’
}
});

//郵便番号のinputフォームが変更された時のイベント
$(‘#zip_input’).on(‘change’, function() {

//住所フィールドに値を入力
state.record.住所1.value = $(‘#address_input1’).val();
state.record.住所2.value = $(‘#address_input2’).val();
state.record.住所3.value = $(‘#address_input3’).val();

});

});

//########################
// 郵便番号入力②
//########################

//郵便番号②を入力するinputフォームにidを追加
$(‘input’).eq(10).attr(‘id’, ‘zip_inputB’);

//住所を自動入力するinputフォームにidを追加
$(‘input’).eq(11).attr(‘id’, ‘address_input1B’);
$(‘input’).eq(12).attr(‘id’, ‘address_input2B’);
$(‘input’).eq(13).attr(‘id’, ‘address_input3B’);

$(function() {
$(‘#zip_inputB’).jpostal({
postcode : [
‘#zip_inputB’
],
address : {
‘#address_input1B’ : ‘%3’,
‘#address_input2B’ : ‘%4’,
‘#address_input3B’ : ‘%5’
}
});

//郵便番号のinputフォームが変更された時のイベント
$(‘#zip_inputB’).on(‘change’, function() {

//住所フィールドに値を入力
state.record.住所1B.value = $(‘#address_input1B’).val();
state.record.住所2B.value = $(‘#address_input2B’).val();
state.record.住所3B.value = $(‘#address_input3B’).val();

});

});

return state;

}];

})();

===========================================================================================

 

私はチェックボタンやラジオボタンを設置していなかったのですが、

チェックボックスやラジオボタンのeqのカウントの仕方がこのようになるのであればメンテナンスが少し面倒ですね・・・

 

参考になれば幸いです。

[Legacy_Account1730 (nagayama（Legacy Account）)]

y-kishi様

 

出来ました！

ご丁寧に分かりやすく解説いただき、ありがとうございました。

ラジオボタンやチェックボックスは、選択肢ごとにカウントするんですね。

とても助かりました。

[Legacy_Account2111 (y-kishi（Legacy Account）)]

nagayama様

 

無事に実装できたそうでよかったです。

 

この内容では、チェックボックスの項目数が変わったらeqの数値を変更しないといけないので、

やはりメンテナンス面で気になりますが、

あまり変更のないフォームであればこれでも充分ですね。

 

こちらも勉強になりました。ありがとうございます。

[Legacy_Account667 (yasuba（Legacy Account）)]

フォームブリッジで同様のことがしたく、こちらを参考にしながらやってみましたが、郵便番号を入れても住所欄に何も表示されません。

 

やってみたこと

・フォームブリッジの最上部に４つのインプットボックスを配置（郵便番号、住所1、住所2、住所3）

カスタマイズのJavaScriptに

・https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js →URL指定

・https://jpostal-1006.appspot.com/jquery.jpostal.js →URL指定

・フォームブリッジ_住所自動入力.js→上記のコードをコピー貼り付けして作成し、参照

eq（）内のインデックス番号はフォームの一番上に配置したので、0～3になっていると思われます。

 

他に作業モレがあれば教えていただけますでしょうか？

 

[Legacy_Account2111 (y-kishi（Legacy Account）)]

yasuba 様

 

問い合わせしたところ、フォームブリッジのアップデートにより

DOMが変更になりjquery.jpostal.jsが動作しなくなった可能性があるとのことでした。

 

また、以下のナレッジを提示いただきましたので共有いたします。

==============================================

■郵便番号を入力するだけで、住所の入力を自動化出来ます
https://kintoneapp.com/blog/postal_code/

==============================================

 

上記はgooglemapAPIを使用しているとのことで

個人的にgooglemapAPIは規約が面倒なイメージなので、別方法を模索しようと思います。

[Legacy_Account667 (yasuba（Legacy Account）)]

y-kishi 様

 

ご連絡ありがとうございます。

ご提示いただいたサイトを試したのですが、町村名が表示できないのと郵便番号・住所が２つある場合に対応できなかったので。。

ちなみにここで最後にコメントしているのは私です･･･＾＾；

 

で、やりたいことをエンジニアにお願いして作ってもらいました。

許可もらったので公開します！（もちろんコードの責任は負いませんので）

 

適用js

https://code.jquery.com/jquery-2.1.0.min.js

と

jsコード

---

// 郵便番号から住所を自動入力する
(function() {
“use strict”;

// フィールド設定
var settings = [
{postcode: “郵便番号A”, address: “住所A”},
{postcode: “郵便番号B”, address: “住所B”},
];

//フォームのDOMを作成した後のイベント
fb.events.form.mounted = [function (state) {

// 配列全てにイベント設定を行う
settings.forEach(function(value, index) {
var elePostcode = $(‘[data-vv-name="’ + value.postcode + ‘"]’).find(‘input’);
var eleAddress = $(‘[data-vv-name="’ + value.address + ‘"]’).find(‘input’);

// 郵便番号フィールドのフォーカスが外れた時のイベント
elePostcode.on(‘input’, function() {
var zipInput = elePostcode.val();

// 書式チェック
// 7桁数値のハイフンありなしOK
if (!zipInput.match(/^[0-9]{3}-?[0-9]{4}$/)) {
return;
}
var code1 = zipInput.replace(/^([0-9]{3}).*/, “$1”);
var code2 = zipInput.replace(/.*([0-9]{4})$/, “$1”);

// 郵便番号APIから検索
var endpoint = ‘https://madefor.github.io/postal-code-api/api/v1’;
var url = endpoint + ‘/’ + code1 +‘/’ + code2 + ‘.json’;
$.ajax({
url: url,
type: ‘GET’,
dataType: ‘json’
})
.done((data) => {
var prefecture = data.data[0].ja.prefecture;
var address1 = data.data[0].ja.address1;
var address2 = data.data[0].ja.address2;

var output = prefecture + address1 + address2;
eleAddress.val(output);
})
.fail((data) => {
console.log(data);
})
.always((data) => {
});
});
});
}];
})();

---

[Legacy_Account2111 (y-kishi（Legacy Account）)]

yasuba様

 

とても参考になるコードをありがとうございます。

私の方でも、郵便番号-住所検索API(http://zipaddress.net/)を使用して住所自動入力のコードを修正しました。%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E4%BD%8F%E6%89%80%E8%87%AA%E5%8B%95%E5%85%A5%E5%8A%9B%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E4%BF%AE%E6%AD%A3%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82)

 

以下に共有いたします。

jqueryは「https://code.jquery.com/jquery-2.1.0.min.js」を使用しています。

===================================================================

//============================================
// 郵便番号から住所を入力
//============================================
(function() {
“use strict”;

//=====================================
//郵便番号の値を変更した際のイベント①
//=====================================
fb.events.fields.郵便番号.changed = [function (state) {

//郵便番号Aの値を取得
var zip = state.record.郵便番号.value;

//URL設定(http://zipaddress.net/のAPIを使用)
var url = ‘https://api.zipaddress.net/?zipcode=’ + zip;

$.ajax({
url: url,
type: ‘GET’,
dataType: ‘json’
})
.done((data) => {
//住所フィールドに値を入力
//====================================================
//pref: 都道府県の文字列
//city: 市区町村の文字列
//town: 町域名の文字列
//address: 市区町村の文字列（cityとtownを結合したもの）
//fullAddress: 都道府県+市区町村+町域名の結合文字列
//====================================================
state.record.住所1.value = data.data.pref;
state.record.住所2.value = data.data.city;
state.record.住所3.value = data.data.town;
})
.fail((data) => {
// console.log(data);
})
.always((data) => {
});

return state;

}];

//=====================================
//郵便番号の値を変更した際のイベント②
//=====================================
fb.events.fields.郵便番号B.changed = [function (state) {

//郵便番号Aの値を取得
var zip = state.record.郵便番号B.value;

//URL設定(http://zipaddress.net/のAPIを使用)
var url = ‘https://api.zipaddress.net/?zipcode=’ + zip;

$.ajax({
url: url,
type: ‘GET’,
dataType: ‘json’
})
.done((data) => {
//住所フィールドに値を入力
//====================================================
//pref: 都道府県の文字列
//city: 市区町村の文字列
//town: 町域名の文字列
//address: 市区町村の文字列（cityとtownを結合したもの）
//fullAddress: 都道府県+市区町村+町域名の結合文字列
//====================================================
state.record.住所1B.value = data.data.pref;
state.record.住所2B.value = data.data.city;
state.record.住所3B.value = data.data.town;
})
.fail((data) => {
// console.log(data);
})
.always((data) => {
});

return state;

}];

})();

===================================================================

フォームにidを付与する必要がなくなったので、メンテナンスも楽になりました。