kintone café 福岡 vol.6 / kintone.promise を使ったrest api更新処理
Post on 09-Jan-2017
2.900 Views
Preview:
TRANSCRIPT
kintone.Promise を使ったREST API 更新処理
kintone Cafė 福岡 vol.6ハンズオンファシリス 長嶺雅透
kintone Cafė Fukuoka vol.6
長嶺 雅透 ながみね ますみ 個人事業主 １０年目 完全独立系
◦ 営業・開発・運用サポート 全部１人で バスケ、ゴールキーパー
◦ YouTube 「ゴレイロ ダイジェスト」で検索
kintone Cafė Fukuoka vol.6
自己紹介
ファシリス
前ふり テンプレートからアプリの作成 データの流し込み kintone.Promise を使ったカスタマイズ JavaScript ファイルのアップロード 動作確認 まとめ
kintone Cafė Fukuoka vol.6
アジェンダ
kintone Cafė Fukuoka vol.6
前ふり ( ちょっと長いかも．．． )
ソニックガーデンの 倉貫さんがくる勉強会があるらしい！行かねば！！
kintone Cafė Fukuoka vol.6
kintone Café 福岡 vol.5
kintone Cafė Fukuoka vol.6
倉貫さん やっぱ すげ～！！ ところで、 kintone って なんですか？
kintone Cafė Fukuoka vol.6
Kintone って、簡単で便利そうだね PHP で挫折した俺にとって簡単に WEB アプリが作れるのは、最高だな！
kintone Cafė Fukuoka vol.6
よくよく見てみると
１アプリ １テーブルのイメージなんだ ん？ でも できないことも多いな
◦ ルックアップって、参照じゃなく、コピーなんですか！それじゃ、マスタ参照なんてできないじゃん！◦ えっ、他のテーブルに書き込みできないの？
kintone Cafė Fukuoka vol.6
RDB とは違うのだよ RDB とは！
kintone Cafė Fukuoka vol.6
使いものにならん・・・
kintone Cafė Fukuoka vol.6
JavaScript を使ったカスタマイズで対応できるらしい
けど、 JavaScript なんて使ったことないし。。。
kintone Cafė Fukuoka vol.6
カスタマイズで対応できる
Ｊａｖａ S ｃｒｉｐｔ ＡＰＩ ってなんやねん ＲＥＳＴ ＡＰＩ ってなんやねん ってか、ＡＩＰと打ち間違うし。。。
kintone Cafė Fukuoka vol.6
その時点の私
っで、どうすればいいの？ cybozu.com developer network
◦ 「はじめよう kintone JavaScript API 」を写経 えっ！ アップデートで仕様が新しくなるの？
Promise って何よ？ まだ、 Promise のサンプルが少ない。。。。
kintone Cafė Fukuoka vol.6
でも、これって 自分にとって 本当に必要不可欠な機能だよな 他の人も サンプルがあれば嬉しいはず
kintone Cafė Fukuoka vol.6
そんな訳で kintone を知って２か月、 JavaScript を使って２か月の初心者が 勇気をもって登壇していますどうか 温かい目で見守ってください
kintone Cafė Fukuoka vol.6
kintone Cafė Fukuoka vol.6
kintone での同期リクエスト
その 1:同期リクエストを標準 API で送信できない これまで他アプリのデータを取得したあとに何か処理をするといった場合などに、 XMLHttpRequest を使った同期リクエストを泣く泣く利用するシーンが出てきていたかと思います。なぜならば、 kintone のリクエスト系の標準 API は全て非同期のリクエストとなっているからです。
kintone Cafė Fukuoka vol.6
いままでの問題点
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 の実行結果を待たずに保存が実行されていました。
kintone Cafė Fukuoka vol.6
いままでの問題点
cybozu.com developer network より
そこで、 2015 年 7 月のアップデートで上記の問題を解決する術として、kintone API の Promise のサポートが実装されました。
kintone Cafė Fukuoka vol.6cybozu.com developer network より
Promise サポートされたイベントの返り値でPromise オブジェクトを return できる
リクエスト系 API で callback を省略するとPromise オブジェクトが返される
といった挙動になります。
kintone Cafė Fukuoka vol.6
これから
cybozu.com developer network より
うーん…なんだか良く分らない！という人は、これを使えば下記のメリットがあるということを覚えておいてください。 XMLHttpRequest の同期リクエストを使わずに同様の処理を記述できる イベントハンドラに Promise を使った任意の非同期処理を記述できる
kintone Cafė Fukuoka vol.6cybozu.com developer network より
つまり、冒頭で挙げた同期リクエストにおけるデメリットを回避した記述ができるようになったのです。また、イベントハンドラに任意の非同期処理を挟めることで、レコード登録時に他のアプリの欲しい情報を一緒に登録したりといったことが可能になります。
kintone Cafė Fukuoka vol.6cybozu.com developer network より
レコード登録時に、他のアプリとのデータのやり取りを行うための、新しい仕組みを作りましたよ これぞ、求めていたもの
kintone Cafė Fukuoka vol.6
要するに
kintone Cafė Fukuoka vol.6
ハンズオン
kintone Cafė Fukuoka vol.6
構成の概要
kintone Cafė Fukuoka vol.6
商品情報（コード、名称、単価など） と 在庫量を 保持している
出荷情報を入力
ルックアップで商品情報を取得 REST API で在庫量を取得出荷可能か判定
REST API で出荷後の在庫量を書き込む保存時標準機能 カスタマイズ
GitHub
https://github.com/masu77/kcfvol06
kintone Cafė Fukuoka vol.6
ファイルのダウンロード
kintone Café Fukuoka vol06 の略です
kintone Cafė Fukuoka vol.6
解凍すると、２０数個の ZIP ファイルができます これらの ZIP ファイルは解凍しないでください
番号の割り振りをします
kintone Cafė Fukuoka vol.6
ファイルを解凍
URLhttps://kcfvol06.cybozu.com/
ID kcfvol06
password fukuoka06
kintone Cafė Fukuoka vol.6
kintone にログイン
kintone Café Fukuoka vol06 の略ですこのアドレスは 9/23 まで有効
kintone Cafė Fukuoka vol.6
テンプレートの展開
と、アプリ画面の確認 と、アプリ ID の確認、メモ
kintone Cafė Fukuoka vol.6
サンプルデータの読み込み
サンプルの 穴埋めをしていきましょう
kintone Cafė Fukuoka vol.6
JS の中身の解説
イベントハンドラーの登録
kintone Cafė Fukuoka vol.6
ブランク１
レコード追加画面の保存実行前イベント 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 Cafė Fukuoka vol.6
レコード一覧イベント
kintone.events.on([‘app.record.create.submit’], function(event) {
}
kintone Cafė Fukuoka vol.6
ブランク１
ブランク２は 飛ばして
kintone Cafė Fukuoka vol.6
ブランク３
kintone Cafė Fukuoka vol.6
REST API リクエストを送信する
kintone.api( REST API の URL,GET や PUT ・ POST ・ DELETE, パラメーター （検索条件）
).then(成功時の処理
).catch(エラー時の処理
);
kintone Cafė Fukuoka vol.6
Promise を使った時の文法
var appId = 78; // 商品マスタのアプリ ID の設定var params = { app: appId, query: '商品コード = "' + record.商品コード .value
+ '"' };
kintone Cafė Fukuoka vol.6
ブランク２
D S S D S
kintone.api( kintone.api.url('/k/v1/records', true),
'GET', params ).then(function(resp) {
kintone Cafė Fukuoka vol.6
ブランク３
// 在庫数がマイナスになる場合はエラーにして中断record[' 出庫量 ']['error'] = "在庫が足りません。 ";event['error'] = "在庫が足りません。 ";
kintone Cafė Fukuoka vol.6
ブランク４
kintone Cafė Fukuoka vol.6
event['error']
record[' 出庫量 ']['error']
var params = {app: appId,id: resp.records[0]['$id']['value'],revision: resp.records[0]['$revision']
['value'],record: {"在庫量 ": {"value":
updateQuantity}} };
kintone Cafė Fukuoka vol.6
ブランク５
kintone.api( kintone.api.url('/k/v1/record', true), 'PUT', params ).then(
).catch( )
kintone Cafė Fukuoka vol.6
ブランク６
開発時は、 Dropbox を使った方法も便利ですググってください
kintone Cafė Fukuoka vol.6
JS のアップロード
まずは、商品マスタの在庫数を確認しましょう次に、出庫入力で データを登録します そして、商品マスタで在庫数を確認しましょう在庫が足りないパターンの確認もしましょう
kintone Cafė Fukuoka vol.6
動作確認
REST API を使えば、他アプリ（テーブル）との連携もできるので、ずいぶん 使いどころが広がる だた、集計して持ってくる（ GROUP BY して、 SUM で持ってくる）とかは、苦手かな？
kintone Cafė Fukuoka vol.6
まとめ
エバンジェリストでもない kintone の実績があるわけでもない JS を触ったこともなかった みなさんも どんどん コミュニティに参加しましょう！
kintone Cafė Fukuoka vol.6
最後に
ご清聴 ありがとうございました
kintone Cafė Fukuoka vol.6
GitHub
https://github.com/masu77/kcfvol06
https://github.com/masu77/kcfvol06-2完成版、 変更・削除対応版
kintone Cafė Fukuoka vol.6
ファイルのダウンロード
kintone Café Fukuoka vol06 の略です
top related