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

フォローする

(著者:Cstap 落合 雄一

はじめに

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

レコードの保存実行前に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月版で確認したものになります。

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

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

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