見出し画像

Kintoneで郵便番号⇒住所変換

やりたいこと

Kintoneアプリに郵便番号から住所に変換する機能を実装します。
顧客情報アプリ等で住所入力の作業負荷を削減できるので、割と需要があるカスタマイズ機能です。
逆に未実装だと「郵便番号で変換できないんですか?」と聞かれることが多い機能ですw

郵便番号-住所検索APIの利用

無料の郵便番号-住所検索APIを利用しています。
外部APIへのリクエスト処理のためにCybouz CDNのjQueryを使用します。

Kintoneアプリのフォームに「郵便番号」「都道府県」「市区名」「町村名」のフィールドを設置し「郵便番号」をキーにして郵便番号-住所検索APIを呼出し、戻り値を「都道府県」「市区名」「町村名」にセットする処理を行っています。

デモ画面

郵便番号の住所変換

郵便番号から住所に変換するJavascriptコード

/* 郵便番号から住所に変換する */
(function() {
    "use strict";

    // フィールドコード名の初期設定
    const fieldCodes = {
        zipcode: '郵便番号',
        pref: '都道府県',
        city: '市区名',
        town: '町村名'
    };

    kintone.events.on([
        'app.record.create.change.' + fieldCodes.zipcode,
        'app.record.edit.change.' + fieldCodes.zipcode,
    ], function(event) {
        // レコード追加または編集画面でzipcode(フィールド値)が変更された時
        const record = event.record;
        const zipcode = record[fieldCodes.zipcode].value;

        $.ajax({
          //非同期通信
          url: 'https://api.zipaddress.net/?zipcode=' + zipcode,
          dataType: 'json',
          async: false,
          success: function(response) {
                if (response && response.data) {
                    record[fieldCodes.pref].value = response.data.pref;
                    record[fieldCodes.city].value = response.data.city;
                    record[fieldCodes.town].value = response.data.town;
                } else {
                    console.error('Invalid response format:', response);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Failed to fetch address:', textStatus, errorThrown);
                alert('郵便番号から住所の検索に失敗しました。エラー: ' + textStatus);
            }
        });

        return event;
    });
})();

使い方は、フィールドコード名の初期設定の所に、Kintonフォームのフィールドコード名をセットして上書きするだけです。
もちろんCybouz CDNのjQueryのURLもセットする必要があります。

データを一括登録する場合は、エクセルの郵便番号変換ウィザードで郵便番号から住所に変換出来ますので、そちらの方が効率が良いかもしれません。

最後までお読みいただきありがとうございました。

よろしければサポートお願いします! いただいたサポートは、note記事制作の活動費に使わせていただきます!