外部 API の同期処理について

著者名: 落合 雄一 (External link)

目次

はじめに

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

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

アプリ

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

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

ソース

以下は、保存時に郵便番号(zipcode)から「 郵便番号-住所検索API (External link) 」を利用して住所を取得し、住所(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)

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

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

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

JSONP

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

最後に

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

information

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