カテゴリー内の他の記事

kintone API で Promise を使ってみよう!

フォローする

(著者:サイボウズ 北川 恭平

今回は、2015年7月のアップデートより実装された、kintone API におけるPromiseサポートについて紹介します。

kintone APIのPromiseサポートが実装された背景

なぜ、今回この機能が実装されたかというと、理由としては下記2つの問題をどうにかしたい!という想いから生まれました。

理由その1:同期リクエストを標準APIで送信できない問題

これまで他アプリのデータを取得したあとに何か処理をするといった場合などに、XMLHttpRequestを使った同期リクエストを泣く泣く利用するシーンが出てきていたかと思います。なぜならば、kintoneのリクエスト系の標準APIは全て非同期のリクエストとなっているからです。

この同期リクエストですが、下記のようなデメリットがあります。

  • JavaScriptで同期リクエストを実行すると、実行中に画面がかたまり他の操作ができなくなる。
  • ブラウザで、非推奨の主旨の警告がでる。(FireFoxでは、将来的に廃止予定。参考。)

非推奨だけれど、使わなければいけないというジレンマに悩んでいる方も多いのではないでしょうか…

理由その2:submit等のイベントハンドラでリクエスト系kintone APIが使えない問題

リクエスト系のkintone API例えば、kintone.apiやkintone.proxyは基本的に非同期リクエストです。つまり、レコード登録ボタンを押したときにkintone.apiやkintone.proxyの実行結果を待たずに保存が実行されていました。

そこで,2015年7月のアップデートで上記の問題を解決する術として、kintone APIのPromiseのサポートが実装されました。

(Promiseについての概念は、この辺のサイトが参考になるかと思います。)

kintone JavaScript API の変更点まとめ

2015年7月のアップデートでは以下のkintone JavaScript APIのイベントハンドラ及び、リクエスト系のAPIでPromiseサポートが実装されました。

Promiseサポートされたイベント

  • app.record.create.submit
  • app.record.edit.submit
  • app.record.index.edit.submit
  • app.record.index.delete.submit
  • app.record.detail.process.proceed
  • app.record.detail.delete.submit
  • app.record.create.submit.success (※2016年8月のアップデートで追加)
  • app.record.edit.submit.success (※2016年8月のアップデートで追加)
  • mobile.app.record.create.submit (※2016年12月のアップデートで追加)
  • mobile.app.record.edit.submit (※2016年12月のアップデートで追加)

Promiseサポートされたリクエスト系 API

  • kintone.api
  • kintone.proxy
  • kintone.plugin.app.proxy

それでは、具体的にこれまでとどう変わったかというと…

  • Promiseサポートされたイベントの返り値でPromiseオブジェクトをreturnできる
  • リクエスト系 APIでcallbackを省略するとPromiseオブジェクトが返される

といった挙動になります。
うーん…なんだか良く分らない!という人は、これを使えば下記のメリットがあるということを覚えておいてください。

  • XMLHttpRequestの同期リクエストを使わずに同様の処理を記述できる
  • イベントハンドラにPromiseを使った任意の非同期処理を記述できる

つまり、冒頭で挙げた同期リクエストにおけるデメリットを回避した記述ができるようになったのです。また、イベントハンドラに任意の非同期処理を挟めることで、レコード登録時に他のアプリの欲しい情報を一緒に登録したりといったことが可能になります。

サンプルを書き換えてみる

今回は例として、自動採番して、レコード登録するのsample.jsをAPIドキュメントに従って、書き換えてみたいと思います。

sample.js(kintone.Promise対応版)

ポイントとしては…

  • 「PromiseがサポートされたイベントハンドラでPromiseオブジェクトをreturnできる」という変更点に対応した点
  • イベントハンドラでreturnしたPromiseオブジェクトの解決を待つので、kintone.apiによる非同期処理が実行できるようになった点
  • 同期リクエストを書く必要がなくなった点

です。

この記事を執筆している現在(2015年7月)では、通常PromiseオブジェクトはIEでは取り扱えません。しかし、なんとkintone.PromiseはIEでも取り扱えるように実装されているのでブラウザの種類を気にすることなく利用することができます!

また、このサンプルは、kintone.apiのコールバック関数を省略すると、Promiseオブジェクトを返すという仕様に基づくと以下のように書き直すことができます。

sample.js(kintone.api コールバック関数省略版)

ポイントとしては、

  • 「リクエスト系 APIでcallbackを省略するとPromiseオブジェクトが返される」という変更点に対応した点
  •  kintone.apiやkintone.proxyを使うときに毎回 "new kintone.Promise()" と書いてPromiseオブジェクトを作る必要がない点

です。

 ※サンプルの挙動自体は、元サンプルと変わらないのでキャプチャは割愛します。

最後に

kintone.Promiseの実装された背景、使い方をすこしでも掴んでいただけたでしょうか?ちょっと複雑な所はありますが、使うとkintoneカスタマイズがより捗りますのでぜひご活用いただければと思います!

関連Tips

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

デモ環境

(見積書) https://dev-demo.cybozu.com/k/80/

(商品リスト) https://dev-demo.cybozu.com/k/79/

※デモ環境についての説明はこちら

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

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

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