はじめに
レコードの保存実行前にkintoneから外部APIを実行したい!と思うことがあるかと思います。
しかし、外部APIを実行する
kintone.proxy()は非同期処理のため、コールバック処理でレコードを編集しても反映されません。
本Tipsでは、郵便番号から住所への変換を jQuery.ajax を使った同期処理で実現する方法を紹介します。
アプリ
アプリは、郵便番号(zipcode
)と住所(address
)のシンプルなアプリを使って説明します。
フィールド名 | フィールドタイプ | フィールドコード |
---|---|---|
郵便番号 | 文字列(1行) | zipcode |
住所 | 文字列(1行) | address |
ソース
以下は、保存時に郵便番号(zipcode
)から「
郵便番号-住所検索API
」を利用して住所を取得し、住所(address
)に保存するJavaScriptです。
|
|
このサンプルはjQueryの読み込みが別途必要です。
async: false
の設定が同期処理を行う設定になります。
郵便番号を入力して保存すると、都道府県が以下のように設定されました。
CORS(Cross-Origin Resource Sharing)
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」からのみに制限できます。
|
|
なお、
郵便番号-住所検索API
はcybozuのサービスではありません。
利用に関してのお問い合わせ等は提供者にお問い合わせください。
またAPIの仕様は変更されることがあります。
JSONP
クロスドメインでAjax通信を実現する方法には、JSONPに対応したAPIを利用する方法もあります。
しかし、JSONPはサーバー側の実装によっては重大なXSS脆弱性を抱える可能性があります。
そのためJSONPを利用する場合は、信頼できるサイトのJSONPのみを利用するようにしてください。
最後に
今回、外部APIの同期処理について説明しました。
外部APIを利用する場合は、本当に信頼できるAPIなのかしっかり調査したうえで利用してください。
このTipsは、2014年12月版kintoneで動作を確認しています。