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

（著者：落合 雄一）

はじめに

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

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

アプリ

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

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

ソース

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

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

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

CORS(Cross-Origin Resource Sharing)

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

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

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

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

JSONP

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

最後に

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

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