【簡単すぎる】kintoneで郵便番号から住所検索！

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

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

ということで…

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のレコードで、
郵便番号を入力した時、
郵便番号で住所を検索し、
住所フィールドに表示する。
という流れです。