郵便番号→住所について

フォローする

(著者:Cstap 落合 雄一

はじめに

こんにちは。落合@cstapです。

郵便番号から住所に変換する機能を様々なサイトで見かけますね。本Tipsでは、これをkintoneでも実現する方法をkintone.proxyを使った非同期処理と、jQuery.ajaxを使った同期処理の2通り解説いたします。

アプリ

郵便番号(zipcode)と住所(address)のシンプルなアプリを使って説明します。

フィールド名 フィールドタイプ フィールドコード
郵便番号 文字列(一行) zipcode
住所 文字列(一行) address

ソース

以下は、郵便番号の変更時と保存時に、郵便番号(zipcode)から「郵便番号-住所検索API」を利用して住所を取得し、住所 (address)に保存するJavaScriptです。

サンプルコードの他に、jQueryとjQuery UIのライブラリを読み込ませる必要があります。cybozuが提供するCDNを利用しましょう。

kintone.proxyで非同期処理

フィールド値変更時イベントではkintone.proxyを使い、外部のAPIを非同期通信で実行しています。

jQuery.ajaxで同期処理

保存前イベントで非同期処理を行った場合、非同期処理の結果はレコードの保存に反映されないため、外部APIを実行するkintone.proxyで郵便番号から住所に変換しても反映されません。そのため、jQuery.ajaxを使った同期処理により郵便番号から住所に変換しています。

外部APIの同期処理についてより詳しく知りたい方は、「外部APIの同期処理について」を参考にしてください。

最後に

非同期処理と同期処理の2通りの方法で、郵便番号から住所に変換するTipsをご紹介しました。フロントエンドの開発では、基本的に非同期処理で行うべきですが、保存前イベントのように同期処理の方が好ましい場合もあります。用途に応じて使い分けてください(^^)

このTipsは、2014年4月版で確認したものになります。

kintone.proxyの通信でエラーが発生した場合、通信先のssl証明書が無効になってる可能性があります。その場合、kintone.proxy のurl パラメータは https ではなく http を設定し、通信を行ってください。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
N.abe

プログラミング初心者です。
変換処理について、御教授お願いします。
上記例では該当住所が無い場合にalert出力していますが、どちらに表示されますでしょうか?例に沿って入れてみたのですが、メッセージが表示されず、保存ボタンがクリックできない状況になります。
御教授よろしくお願いいたします。

Avatar
落合 雄一

N.abeさん

仰るとおりです。
エラーハンドリングが甘いですね。。。

以下のJavaScriptを試してもらえますでしょうか?
エラー発生時にalertするようにしました。
(ただsubmitのキャンセルはできないので、保存処理は実行されてしまいますが・・・)

/**
 * 郵便番号:zipcode(文字列フィールド)
 * 住所:address(文字列フィールド)
 *
 * 参考:http://zipaddress.net/
 */
(function() {
  "use strict";

  document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>');

  // 郵便番号変更時のイベント
  kintone.events.on(['app.record.create.change.zipcode', 'app.record.edit.change.zipcode'], function(event) {
    var zipcode = event.record.zipcode.value;

    // kintone.proxyで非同期処理
    kintone.proxy(
      'https://api.zipaddress.net/?zipcode=' + zipcode,
      'GET',
      {},
      {},
      function(body) {
        var response = JSON.parse(body);
        var record = kintone.app.record.get();
        if (response.code == 200) {
          record.record.address.value = response.data.fullAddress;
          kintone.app.record.set(record);
        } else if (response.message) {
          alert(response.message);
        } else {
          alert('郵便番号から住所の検索に失敗しました');
        }
      },
      function(body) {
        alert('郵便番号から住所の検索に失敗しました');
      }
    );

    return event;
  });

  // submit実行時のイベント
  kintone.events.on(['app.record.edit.submit', 'app.record.create.submit'], function(event) {
    var record = event.record;
    var zipcode = record.zipcode.value;

    // jQuery ajaxで同期処理
    $.ajax({
      url: 'https://api.zipaddress.net/?zipcode=' + zipcode,
      dataType: 'json',
      async: false,
      success: function(response) {
        if (response.code == 200) {
          record.address.value = response.data.fullAddress;
        } else if (response.message) {
          alert(response.message);
        } else {
          alert('郵便番号から住所の検索に失敗しました');
        }
      },
      error: function(response) {
        alert('郵便番号から住所の検索に失敗しました');
      }
    });

    return event;
  });
})();
Avatar
N.abe

問題なく動作するようになりました。
ありがとうございます。

ログインしてコメントを残してください。
Powered by Zendesk