ブログ

2020/03/30
【プリザンター】 第37回)郵便番号から住所を検索して自動入力させるスクリプト

郵便番号から住所の変換

こんにちは、CCS田中です。

郵便番号から住所を自動で入力させる方法は、Webの世界では一般的になってきています。
プリザンターでは標準機能では、この機能を持ち合わせていないため外部のサイトをスクリプトで呼び出して自動入力させる方法をとることで実現が可能です。
郵便番号データ配信サービスの「zip cloud」を使うことでAPIでやりとりできるため、プリザンターのスクリプトで呼び出して使うことができます。

ちなみに、日本語変換のIMEを使っていて郵便番号検索を有効にしていると、7桁の数値(ハイフン付き)を入力すると住所に変換されることはご存知でしょうか?
この機能でも郵便番号から住所を確認することができますが、都道府県名、市区名、町域名などに分けては表示されないので、今回はこの部分も考慮したものを作成していきたいと思います。

方法については次に説明します。

郵便番号を入力して住所を自動入力するスクリプト

それではスクリプトを作成します。
以下の手順で設定を行ってください。

前提条件として、記録テーブルに項目として以下を作成しておいてください。サイズはノーマルでOKです。

・郵便番号(説明A)
・都道府県名(説明B)
・市区名(説明C)
・町域名(説明D)

1.対象のテーブルを開きます。
2.上記メニューから、[管理]→[テーブルの管理]をクリックします。
3.[スクリプト]タブをクリックします。
4.[新規作成]ボタンをクリックします。
5.タイトルに「住所検索」等を入力します。
6.以下のスクリプトをスクリプト欄に入力します。
7.出力先の「全て」のチェックを外し、「新規作成」、「編集」にのみチェックを入れます。
8.[変更]ボタンをクリックします。
9.[スクリプト]タブに戻り、[更新]ボタンをクリックします。

ここまでで、設定は完了です。
対象テーブルを開き、新規作成をクリックし、郵便番号を入力した後に「住所検索」ボタンをクリックしてみてください。
住所が自動で入力されることが確認できます。存在しない郵便番号の場合はポップアップでエラーが表示されます。

記載するスクリプト


$p.events.on_editor_load = function() {
$('#Results_DescriptionA').parent().css("display","flex")
$('#Results_DescriptionA').after($( '<button style=" float:right;white-space:nowrap;" onclick="$p.ex.execPostSearch();">住所検索</button > ').button({ icon: '' }));
}
$p.ex.execPostSearch = function() {
//JSONPを利用する
$.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?', {
zipcode: $('#Results_DescriptionA').val() // 入力した郵便番号
})
// 結果取得後の処理
.done(function(data) {
if (data.results) {
//結果セット
var result = data.results[0];
$p.set($('#Results_DescriptionB'), result.address1);
$p.set($('#Results_DescriptionC'), result.address2);
$p.set($('#Results_DescriptionD'), result.address3);
} else {
// 中身が空の場合は、エラーメッセージ出力
alert('該当する住所が存在しません。');
}
});
}


まとめ

さて、いかがでしたか?

今回はボタンの配置とスクリプトで外部のサイトを呼び出して、その戻り値を使って自動入力させる方法を郵便番号と住所の例で説明しました。他にAPIが使えるところがあれば、同じように作って様々なことが実現できると思います。

導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。

☆☆ブログ内容への質問や追加説明をご希望の方は
【問い合わせフォーム】 こちら からお気軽にお問い合わせください☆☆

PAGE TOP