【簡単すぎる】郵便番号で住所検索!

「 郵便番号から住所を自動で検索されるようにしたい! 」

「 都道府県と市区町村を分けて表示したい…。 」

ということで…

kintoneで郵便番号検索やってみました!

準備

kintoneのカスタマイズを行う際に、何度も設定を開いてアップロードするのは大変ですよね?

そんなkintoneのカスタマイズに便利なものを見つけました!

それは…

Visual Studio Code Live Server Extension

です!

Visual Studio Code Live Server Extensionを使えば、コードを修正しながら、画面を更新するだけでカスタマイズが反映されているかどうか即時に確認することができます!

今回はこの「Visual Studio Code Live Server Extension」を使ってカスタマイズしてみました!
※使わなくても問題ありません。

動作環境

PC
 エディション :Windows 10 Pro
 バージョン  :1803
 システムの種類:64ビット オペレーティング システム、x64 ベース プロセッサ

jQuery
 jQuery3.4.1

Visual Studio Code Live Server Extension
 Version 5.6.1

~郵便番号検索アプリ作成~

フォーム作成

では、まずkintoneでフォームを作成していきます!

詳細:フィールド名  :郵便番号
   フィールド種別 : 文字列(1行)
   フィールドコード:zipcode

   フィールド名  : 住所
   フィールド種別 : 文字列(1行)
   フィールドコード: fullAddress

カスタマイズ

フォーム作成が完了したら、カスタマイズしていきます!

まず、1行目にjQueryを読み込んでください。

jQueryを読みこみましたら、

以下の、今回使用しているソースを2行目に読み込んでください。


(function() {
    "use strict";
  
  
   kintone.events.on('app.record.create.change.zipcode', function(event) {
     //レコード追加画面または再利用画面でpostal_code(フィールド値)が変更された時
      var record = event.record;
      var zipcode = record.zipcode.value;
  
      $.ajax({
          //非同期通信
        url: 'https://api.zipaddress.net/?zipcode=' + zipcode,
        dataType: 'json',
        async: false,
        success: function(response) {
          record.fullAddress.value = response.data.fullAddress;
          //fullAddress:住所
        },
        error: function(response) {
          alert('郵便番号から住所の検索に失敗しました');
        }
      });
  
      return event;
    });
  })();

今回はコチラの住所検索APIを使用させていただいております。

ソースコードを文章で説明すると、

kintoneのレコードで、
郵便番号を入力した時、
郵便番号で住所を検索し、
住所フィールドに表示する。
という流れです。

赤線がkintoneのフィールドコード、青線が住所データの形です。

青線部分を変更することで、
より運用に適した形で表現できます。

都道府県         :pref 
市区町村         :city
地域           :town
市区町村&地域      :address 
都道府県&市区町村&地域  :fullAddress  ←今回使用したもの

動作確認

では、動作確認してみます!

郵便番号のフィールドに郵便番号を入力してみましょう!

・・・

検索されました!

まとめ

今回は今までの記事と違い、プログラミング経験の少ない方には
少し難易度が高いかと思います。(私も苦戦しています(笑))

しかしうまく使いこなすことができれば、社内運用の大幅効率アップが図れるかと思います!
(住所変更届の作成など、入力ミスや入力時間の削減など…。)

record.pref.value = response.data.pref;
//pref:都道府県
record.city.value = response.data.city;
//city:市区町村

少し手を加えると都道府県と市区町村を簡単に分けて表示することができます。


プログラミングが苦手な方も初心者の方も一緒にkintoneカスタマイズ頑張っていきましょう!

今回の記事についての質問や疑問、ほかにも「この機能を使ってみたい!」
「こんな機能を実装できる?」などご質問などございましたら、ぜひお気軽にご相談ください!

前回の記事はコチラ‼              記事の一覧