kintone Café 福岡 vol.6 / kintone.Promise を使ったREST API更新処理

kintone Cafė 福岡 vol.6
ハンズオン
ファシリス長嶺雅透
kintone Cafė Fukuoka vol.6

 長嶺雅透ながみねますみ
 個人事業主１０年目
 完全独立系
◦ 営業・開発・運用サポート全部１人で
 バスケ、ゴールキーパー
◦ YouTube 「ゴレイロダイジェスト」で検索
ファシリス

 前ふり
 テンプレートからアプリの作成
 データの流し込み
 kintone.Promiseを使ったカスタマイズ
 JavaScriptファイルのアップロード
 動作確認
 まとめ

ソニックガーデンの倉貫さんがくる
勉強会があるらしい！
行かねば！！

 倉貫さんやっぱすげ～！！
 ところで、kintoneってなんですか？

 Kintone って、簡単で便利そうだね
 PHPで挫折した俺にとって
簡単にWEBアプリが作れるのは、最高だな！

 １アプリ１テーブルのイメージなんだ
 ん？でもできないことも多いな
◦ ルックアップって、参照じゃなく、コピーなんですか！
それじゃ、マスタ参照なんてできないじゃん！
◦ えっ、他のテーブルに書き込みできないの？

 RDBとは違うのだよ RDBとは！

使いものにならん・・・

 JavaScript を使ったカスタマイズで対応できるらしい
 けど、JavaScriptなんて使ったことないし。。。

 ＪａｖａSｃｒｉｐｔＡＰＩってなんやねん
 ＲＥＳＴＡＰＩってなんやねん
 ってか、ＡＩＰと打ち間違うし。。。

 っで、どうすればいいの？
 cybozu.com developer network
◦ 「はじめよう kintone JavaScript API」を写経
 えっ！アップデートで仕様が新しくなるの？
Promiseって何よ？
 まだ、Promiseのサンプルが少ない。。。。

 でも、これって
自分にとって本当に必要不可欠な機能だよな
 他の人もサンプルがあれば嬉しいはず

 そんな訳で
kintone を知って２か月、JavaScriptを使って２か月
の初心者が勇気をもって登壇しています
どうか温かい目で見守ってください

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

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

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

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

 Promiseサポートされたイベントの返り値でPromise
オブジェクトをreturnできる
 リクエスト系 APIでcallbackを省略するとPromiseオ
ブジェクトが返される
といった挙動になります。

うーん…なんだか良く分らない！という人は、
これを使えば下記のメリットがあるということを
覚えておいてください。
 XMLHttpRequestの同期リクエストを使わずに同様
の処理を記述できる
 イベントハンドラにPromiseを使った任意の非同期処
理を記述できる

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

 レコード登録時に、
他のアプリとのデータのやり取りを行うための、
新しい仕組みを作りましたよ
 これぞ、求めていたもの

商品情報（コード、名称、単価など）と在庫量を保持している
出荷情報を入力
ルックアップで
商品情報を取得
REST APIで
在庫量を取得
出荷可能か判定
REST APIで
出荷後の在庫量を
書き込む
保
存
時
標準機能カスタマイズ

 GitHub
https://github.com/masu77/kcfvol06
kintone Café Fukuoka vol06 の略です

 解凍すると、２０数個の ZIPファイルができます
 これらの ZIPファイルは解凍しないでください
 番号の割り振りをします

URL
https://kcfvol06.cybozu.com/
ID
kcfvol06
password
fukuoka06
このアドレスは 9/23まで有効

 と、アプリ画面の確認
 と、アプリIDの確認、メモ

 サンプルの穴埋めをしていきましょう

 イベントハンドラーの登録

 レコード追加画面の保存実行前イベント
app.record.create.submit
 レコード編集画面の保存実行前イベント
app.record.edit.submit
 レコード詳細画面の削除前イベント
app.record.detail.delete.submit
 プロセス管理のアクション実行イベント
app.record.detail.process.proceed
 レコード一覧画面の「保存ボタン」クリック時イベント
app.record.index.edit.submit
 レコード一覧画面のレコード削除前イベント
app.record.index.delete.submit

kintone.events.on([‘app.record.create.submit’],
function(event) {
}

 ブランク２は飛ばして

kintone.api(
REST APIのURL
,GET や PUT・ POST・ DELETE
,パラメーター（検索条件）
).then(
成功時の処理
).catch(
エラー時の処理
);

var appId = 78; // 商品マスタのアプリIDの設定
var params = {
app: appId,
query: '商品コード = "' + record.商品コード.value + '"'
};
D S S D S

kintone.api(
kintone.api.url('/k/v1/records', true),
'GET',
params
).then(function(resp) {

// 在庫数がマイナスになる場合はエラーにして中断
record['出庫量']['error'] = "在庫が足りません。";
event['error'] = "在庫が足りません。";

event['error']
record['出庫量']['error']

var params = {
app: appId,
id: resp.records[0]['$id']['value'],
revision: resp.records[0]['$revision']['value'],
record: {"在庫量": {"value": updateQuantity}}
};

kintone.api(
kintone.api.url('/k/v1/record', true),
'PUT',
params
).then(
).catch( )

 開発時は、Dropboxを使った方法も便利です
ググってください

 まずは、商品マスタの在庫数を確認しましょう
 次に、出庫入力でデータを登録します
 そして、商品マスタで在庫数を確認しましょう
 在庫が足りないパターンの確認もしましょう

 REST APIを使えば、他アプリ（テーブル）との
連携もできるので、ずいぶん使いどころが広がる
 だた、集計して持ってくる
（GROUP BYして、SUMで持ってくる）とかは、
苦手かな？

 エバンジェリストでもない
 kintone の実績があるわけでもない
 JSを触ったこともなかった
 みなさんもどんどんコミュニティに参加しましょう！

ご清聴ありがとうございました

 GitHub
https://github.com/masu77/kcfvol06
https://github.com/masu77/kcfvol06-2
完成版、変更・削除対応版

kintone Café 福岡 vol.6 / kintone.Promise を使ったREST API更新処理

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (7)

kintone Café 福岡 vol.6 / kintone.Promise を使ったREST API更新処理