(著者:落合 雄一)
はじめに
レコードの保存実行前に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月版で確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。