お世話になっております。郵便番号から住所変換処理について、うまく動作しないので
ご教示いただけると幸いです。
準備としてフォームを作成しました。
フィールド名=「郵便番号」、フィールドタイプ=「文字列(一行)」、フィールドコード=「zipcode」
フィールド名=「住所1」、フィールドタイプ=「文字列(一行)」、フィールドコード=「address1」
フィールド名=「住所2」、フィールドタイプ=「文字列(一行)」、フィールドコード=「address2」
フィールド名=「住所3」、フィールドタイプ=「文字列(一行)」、フィールドコード=「address3」
また、フォーム内にスペースを作成し、要素ID=「Yubin_space_field」と設定しました。
レコード追加・編集画面の表示時に、郵便番号を入力した後、スペースフィールドに作成した
「変換」ボタンをクリックすることで、対応する住所データをフォーム内にセットしようとしています。
jQueryライブラリ「jquery.min.js」を先に読み込ませています。
以下のようなJavaScriptを作成し、郵便番号を入力して変換ボタンをクリックすると、
「(1)郵便番号=undefined」
「(2)郵便番号から住所の検索に失敗」
「(3)undefined」
「(4)undefined」
がメッセージ表示されて、フォームの郵便番号がうまく認識されず、思ったとおりに動作しません。
何かお気づきの点がありましたら、ご指摘をよろしくお願いいたします。
//
// 外部APIの同期処理を利用して「郵便番号→住所」変換
//
(function () {
“use strict”;
// レコード追加・編集時のイベント
var events1 = [‘app.record.create.show’,‘app.record.edit.show’];
kintone.events.on(events1, function (event) {
// 特定のスペースフィールドにボタンを設置
// ボタン
var mySpaceFieldButton = document.createElement('button');
mySpaceFieldButton.id = 'Yubin_space_field';
mySpaceFieldButton.innerHTML = '変換';
// ボタンクリック時の処理
mySpaceFieldButton.onclick = function () {
var rec = event.record;
window.alert('郵便番号=' + rec['zipcode']['value']); //→実行すると「郵便番号=undefined」が返ってくる！
$.ajax({
url: 'https://api.zipaddress.net/?zipcode=' + rec['zipcode']['value'],
dataType: 'json',
async: false,
success: function(response) {
if (response.code == 200) { //200-->成功時
rec['address1']['value'] = response.data.pref;
rec['address2']['value'] = response.data.address;
rec['address3']['value'] = response.data.fullAddress;
} else if (response.message) {
window.alert(response.message);
} else {
window.alert('郵便番号から住所の検索に失敗しました');
}
},
error: function(response) { // エラー処理
window.alert('(2)郵便番号から住所の検索に失敗');
window.alert('(3)' + response.code); //→実行すると「(3)undefined」 が返ってくる！
window.alert('(4)' + response.message); //→実行すると「(4)undefined」 が返ってくる！
}
});
}
//ボタンを設置
kintone.app.record.getSpaceElement('Yubin_space_field').appendChild(mySpaceFieldButton);
});
})();
teraさん
cstapの落合です。
var rec = event.record; の部分を修正すると良いと思います。
レコード情報取得API を使うと良いでしょう。
以上、参考になりますでしょうか？
落合さん、ご指摘ありがとうございます。
var rec = event.record; を
var rec = kintone.app.record.get(); に変更しました。
この結果、テストすると、
window.alert(‘郵便番号=’ + rec[‘zipcode’][‘value’]); の行で、
「プロパティ ‘value’ の値を取得できません: オブジェクトは Null または未定義です」のエラーが発生してしまいました。
ご案内いただいた「レコードの値を取得する」サイトページの末尾注意事項に
kintone.events.on のインベントハンドラ内で kintone.app.record.get および kintone.mobile.app.record.get を実行することはできません。 上記のイベントハンドラ内ではレコードデータの取得は引数のeventオブジェクトを、レコードデータの更新はeventオブジェクトのreturnを使用してください。
と記載されていましたが、本件はこの状況に合致するのでしょうか。
teraさん
onclickイベントですので、kintone.event のイベント外になります。
var rec = kintone.app.record.get().record;
にするとどうでしょう？
落合さん、お世話になっております。
var rec = kintone.app.record.get(); を
var rec = kintone.app.record.get().record; に変更しました。
この結果、数字７桁の郵便番号を入力して、テストすると、
「郵便番号=」の数字７桁がメッセージ表示されました。
その後、
「(2)郵便番号から住所の検索に失敗」
「(3)undefined」
「(4)undefined」
が順にメッセージ表示されました。
一歩前進しました。なので「呼び出しを行う先のURL」の指定方法が悪いのでしょうか。
初心者にはなかなかに難しいと認識していますが、もう少しお付き合いいただけると助かります。
teraさん
今回の機能だと同期処理にする必要はないので、$.ajax の部分を kintone.proxy で実装するほうが良いでしょう。
以下のように変更してみてはどうでしょうか？
// kintone.proxyで非同期処理
kintone.proxy(
'https://api.zipaddress.net/?zipcode=' + rec['zipcode']['value'],
'GET',
{},
{},
function(body) {
var response = JSON.parse(body);
console.log(response);
var record = kintone.app.record.get();
if (response.code == 200) {
record.record.address1.value = response.data.pref;
record.record.address2.value = response.data.address;
record.record.address3.value = response.data.fullAddress;
kintone.app.record.set(record);
} else if (response.message) {
alert(response.message);
} else {
alert('郵便番号から住所の検索に失敗しました');
}
},
function(body) {
window.alert('(2)郵便番号から住所の検索に失敗');
window.alert('(3)' + response.code); //→実行すると「(3)undefined」 が返ってくる！
window.alert('(4)' + response.message); //→実行すると「(4)undefined」 が返ってくる！
}
);
};
落合さん、ご指摘ありがとうございます。
今回の機能だと同期処理にする必要はないとのことで、案内いただいた分を
適用して、無事動作することができました。
ありがとうございました。^^
同期処理と非同期処理の適用判断についてはまた勉強したいと思います。
最終的には以下のようになりました。
//
// 「郵便番号→住所」変換
//
(function () {
“use strict”;
// レコード追加・編集時のイベント
var events1 = [‘app.record.create.show’,‘app.record.edit.show’];
kintone.events.on(events1, function (event) {
// 特定のスペースフィールドにボタンを設置
// ボタン
var mySpaceFieldButton = document.createElement('button');
mySpaceFieldButton.id = 'Yubin_space_field';
mySpaceFieldButton.innerHTML = '変換';
// ボタンクリック時の処理
mySpaceFieldButton.onclick = function () {
var rec = kintone.app.record.get().record;
// kintone.proxyで非同期処理
kintone.proxy(
'https://api.zipaddress.net/?zipcode=' + rec['zipcode']['value'],
'GET',
{},
{},
function(body) {
var response = JSON.parse(body);
var record = kintone.app.record.get();
if (response.code == 200) { //200-->成功
record.record.address1.value = response.data.pref; //都道府県名をセット
record.record.address2.value = response.data.address; //市区町村名をセット
//都道府県+市区町村名の場合は｢response.data.fullAddress｣
kintone.app.record.set(record);
} else if (response.message) {
window.alert(response.code + ':' + response.message + '対応する住所が見つかりません');
} else {
window.alert('検索失敗');
}
},
function(body) { // エラー処理
window.alert(response.code + ':' + response.message + '住所検索に失敗');
}
);
};
//ボタンを設置
kintone.app.record.getSpaceElement('Yubin_space_field').appendChild(mySpaceFieldButton);
});
})();
teraさん
解決できたようで良かったです！
また何かありましたらご質問下さい！