レコードの保存実行前にkintoneから外部APIを実行したい！と思うことがあるかと思います。
しかし、外部APIを実行する kintone.proxy()は非同期処理のため、コールバック処理でレコードを編集しても反映されません。

本Tipsでは、郵便番号から住所への変換を jQuery.ajax を使った同期処理で実現する方法を紹介します。

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
 * 外部 API の同期処理
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(function() {
  'use strict';

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

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

    return event;
  });
})();

このサンプルはjQueryの読み込みが別途必要です。

async: falseの設定が同期処理を行う設定になります。
郵便番号を入力して保存すると、都道府県が以下のように設定されました。

CORSとは、Cross-Origin Resource Sharingの略で、Ajax通信をクロスドメインで実現するための仕様です。
以下がCORSのイメージです。

主要な最新のブラウザーはすべて対応していますので、しっかり押さえておきましょう。

「 郵便番号-住所検索API 」は、APIのレスポンスヘッダーにAccess-Control-Allow-Origin: *（誰でもOK）が設定されているため、kintoneから利用できます。
Access-Control-Allow-Originが設定されていないAPIは、クロスドメインアクセスができません。
ご自身でAPIを用意する場合は、次をレスポンスヘッダーに設定することで、アクセスを「https://{subdomain}.cybozu.com」からのみに制限できます。

1

Access-Control-Allow-Origin: https://{subdomain}.cybozu.com

なお、 郵便番号-住所検索API はcybozuのサービスではありません。
利用に関してのお問い合わせ等は提供者にお問い合わせください。
またAPIの仕様は変更されることがあります。

クロスドメインでAjax通信を実現する方法には、JSONPに対応したAPIを利用する方法もあります。
しかし、JSONPはサーバー側の実装によっては重大なXSS脆弱性を抱える可能性があります。
そのためJSONPを利用する場合は、信頼できるサイトのJSONPのみを利用するようにしてください。

今回、外部APIの同期処理について説明しました。
外部APIを利用する場合は、本当に信頼できるAPIなのかしっかり調査したうえで利用してください。

このTipsは、2014年12月版kintoneで動作を確認しています。