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

kintone.Promise を使ったREST API 更新処理

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

kintone Cafė Fukuoka vol.6

長嶺　雅透　　ながみね　ますみ個人事業主　１０年目完全独立系

◦ 営業・開発・運用サポート　全部１人でバスケ、ゴールキーパー

◦ YouTube 「ゴレイロ　ダイジェスト」で検索


自己紹介

ファシリス

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


アジェンダ


前ふり ( ちょっと長いかも．．． )

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


kintone Café 福岡　 vol.5


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


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


よくよく見てみると

１アプリ　１テーブルのイメージなんだん？　でも　できないことも多いな

◦ ルックアップって、参照じゃなく、コピーなんですか！それじゃ、マスタ参照なんてできないじゃん！◦ えっ、他のテーブルに書き込みできないの？


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


使いものにならん・・・


JavaScript を使ったカスタマイズで対応できるらしい

けど、 JavaScript なんて使ったことないし。。。


カスタマイズで対応できる

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


その時点の私

っで、どうすればいいの？ cybozu.com developer network

◦ 「はじめよう kintone JavaScript API 」を写経えっ！　アップデートで仕様が新しくなるの？

Promise って何よ？まだ、 Promise のサンプルが少ない。。。。


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


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



kintone での同期リクエスト

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


いままでの問題点

cybozu.com developer network 　より

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

(FireFox では、将来的に廃止予定。 )

kintone Cafė Fukuoka vol.6cybozu.com developer network 　より

その 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 ファイルは解凍しないでください

番号の割り振りをします


ファイルを解凍

URLhttps://kcfvol06.cybozu.com/

ID kcfvol06

password fukuoka06


kintone にログイン

kintone Café Fukuoka vol06 の略ですこのアドレスは　 9/23 まで有効


テンプレートの展開

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


サンプルデータの読み込み

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


JS の中身の解説

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


ブランク１

レコード追加画面の保存実行前イベント 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) {

}


ブランク１

ブランク２は飛ばして


ブランク３


REST API リクエストを送信する

kintone.api( REST API の URL,GET や PUT ・ POST ・ DELETE, パラメーター　（検索条件）

).then(成功時の処理

).catch(エラー時の処理

);


Promise を使った時の文法

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 を使った方法も便利ですググってください


JS のアップロード

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


動作確認

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


まとめ

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


最後に

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


GitHub

https://github.com/masu77/kcfvol06

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


ファイルのダウンロード

kintone Café Fukuoka vol06 の略です

Software

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