Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,655 views

Published on

「kintone.Promise を使ったREST API更新処理」のハンズオンで使った資料です @ kintone Café 福岡 vol.6

Published in: Software
  • Be the first to comment

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

  1. 1. kintone Cafė 福岡 vol.6 ハンズオン ファシリス 長嶺雅透 kintone Cafė Fukuoka vol.6
  2. 2.  長嶺 雅透 ながみね ますみ  個人事業主 10年目  完全独立系 ◦ 営業・開発・運用サポート 全部1人で  バスケ、ゴールキーパー ◦ YouTube 「ゴレイロ ダイジェスト」で検索 kintone Cafė Fukuoka vol.6 ファシリス
  3. 3.  前ふり  テンプレートからアプリの作成  データの流し込み  kintone.Promiseを使ったカスタマイズ  JavaScriptファイルのアップロード  動作確認  まとめ kintone Cafė Fukuoka vol.6
  4. 4. kintone Cafė Fukuoka vol.6
  5. 5. ソニックガーデンの 倉貫さんがくる 勉強会があるらしい! 行かねば!! kintone Cafė Fukuoka vol.6
  6. 6. kintone Cafė Fukuoka vol.6
  7. 7.  倉貫さん やっぱ すげ~!!  ところで、kintoneって なんですか? kintone Cafė Fukuoka vol.6
  8. 8.  Kintone って、簡単で便利そうだね  PHPで挫折した俺にとって 簡単にWEBアプリが作れるのは、最高だな! kintone Cafė Fukuoka vol.6
  9. 9.  1アプリ 1テーブルのイメージなんだ  ん? でも できないことも多いな ◦ ルックアップって、参照じゃなく、コピーなんですか! それじゃ、マスタ参照なんてできないじゃん! ◦ えっ、他のテーブルに書き込みできないの? kintone Cafė Fukuoka vol.6
  10. 10.  RDBとは違うのだよ RDBとは! kintone Cafė Fukuoka vol.6
  11. 11. 使いものにならん・・・ kintone Cafė Fukuoka vol.6
  12. 12.  JavaScript を使ったカスタマイズで対応できるらしい  けど、JavaScriptなんて使ったことないし。。。 kintone Cafė Fukuoka vol.6
  13. 13.  JavaScript API ってなんやねん  REST API ってなんやねん  ってか、AIPと打ち間違うし。。。 kintone Cafė Fukuoka vol.6
  14. 14.  っで、どうすればいいの?  cybozu.com developer network ◦ 「はじめよう kintone JavaScript API」を写経  えっ! アップデートで仕様が新しくなるの? Promiseって何よ?  まだ、Promiseのサンプルが少ない。。。。 kintone Cafė Fukuoka vol.6
  15. 15.  でも、これって 自分にとって 本当に必要不可欠な機能だよな  他の人も サンプルがあれば嬉しいはず kintone Cafė Fukuoka vol.6
  16. 16.  そんな訳で kintone を知って2か月、JavaScriptを使って2か月 の初心者が 勇気をもって登壇しています どうか 温かい目で見守ってください kintone Cafė Fukuoka vol.6
  17. 17. kintone Cafė Fukuoka vol.6
  18. 18. その1: 同期リクエストを標準APIで送信できない  これまで他アプリのデータを取得したあとに何か処理 をするといった場合などに、XMLHttpRequestを使っ た同期リクエストを泣く泣く利用するシーンが出てきて いたかと思います。なぜならば、kintoneのリクエスト 系の標準APIは全て非同期のリクエストとなっている からです。 kintone Cafė Fukuoka vol.6 cybozu.com developer network より
  19. 19. この同期リクエスト、下記のようなデメリットがあります。  JavaScriptで同期リクエストを実行すると、実行中に 画面がかたまり、他の操作ができなくなる。  ブラウザで、非推奨の主旨の警告がでる。 (FireFoxでは、将来的に廃止予定。) kintone Cafė Fukuoka vol.6 cybozu.com developer network より
  20. 20. その2: submit等のイベントハンドラで リクエスト系kintone APIが使えない問題  リクエスト系のkintone API例えば、kintone.apiや kintone.proxyは基本的に非同期リクエストです。つ まり、レコード登録ボタンを押したときにkintone.api やkintone.proxyの実行結果を待たずに保存が実 行されていました。 kintone Cafė Fukuoka vol.6 cybozu.com developer network より
  21. 21.  そこで、2015年7月のアップデートで上記の問題を 解決する術として、 kintone APIのPromiseのサポートが実装されました。 kintone Cafė Fukuoka vol.6 cybozu.com developer network より
  22. 22.  Promiseサポートされたイベントの返り値でPromise オブジェクトをreturnできる  リクエスト系 APIでcallbackを省略するとPromiseオ ブジェクトが返される といった挙動になります。 kintone Cafė Fukuoka vol.6 cybozu.com developer network より
  23. 23. うーん…なんだか良く分らない!という人は、 これを使えば下記のメリットがあるということを 覚えておいてください。  XMLHttpRequestの同期リクエストを使わずに同様 の処理を記述できる  イベントハンドラにPromiseを使った任意の非同期処 理を記述できる kintone Cafė Fukuoka vol.6 cybozu.com developer network より
  24. 24. つまり、冒頭で挙げた同期リクエストにおけるデメリットを 回避した記述ができるようになったのです。 また、イベントハンドラに任意の非同期処理を挟めること で、レコード登録時に他のアプリの欲しい情報を一緒に 登録したりといったことが可能になります。 kintone Cafė Fukuoka vol.6 cybozu.com developer network より
  25. 25.  レコード登録時に、 他のアプリとのデータのやり取りを行うための、 新しい仕組みを作りましたよ  これぞ、求めていたもの kintone Cafė Fukuoka vol.6
  26. 26. kintone Cafė Fukuoka vol.6
  27. 27. kintone Cafė Fukuoka vol.6
  28. 28. kintone Cafė Fukuoka vol.6 商品情報(コード、名称、単価など) と 在庫量を 保持している 出荷情報を入力 ルックアップで 商品情報を取得 REST APIで 在庫量を取得 出荷可能か判定 REST APIで 出荷後の在庫量を 書き込む 保 存 時 標準機能 カスタマイズ
  29. 29.  GitHub https://github.com/masu77/kcfvol06 kintone Cafė Fukuoka vol.6 kintone Café Fukuoka vol06 の略です
  30. 30. kintone Cafė Fukuoka vol.6
  31. 31.  解凍すると、20数個の ZIPファイルができます  これらの ZIPファイルは解凍しないでください  番号の割り振りをします kintone Cafė Fukuoka vol.6
  32. 32. URL https://kcfvol06.cybozu.com/ ID kcfvol06 password fukuoka06 kintone Cafė Fukuoka vol.6 kintone Café Fukuoka vol06 の略です このアドレスは 9/23まで有効
  33. 33. kintone Cafė Fukuoka vol.6
  34. 34.  と、アプリ画面の確認  と、アプリIDの確認、メモ kintone Cafė Fukuoka vol.6
  35. 35.  サンプルの 穴埋めをしていきましょう kintone Cafė Fukuoka vol.6
  36. 36.  イベントハンドラーの登録 kintone Cafė Fukuoka vol.6
  37. 37.  レコード追加画面の保存実行前イベント 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
  38. 38. kintone.events.on([‘app.record.create.submit’], function(event) { } kintone Cafė Fukuoka vol.6
  39. 39.  ブランク2は 飛ばして kintone Cafė Fukuoka vol.6
  40. 40. kintone Cafė Fukuoka vol.6
  41. 41. kintone.api( REST APIのURL ,GET や PUT・ POST・ DELETE ,パラメーター (検索条件) ).then( 成功時の処理 ).catch( エラー時の処理 ); kintone Cafė Fukuoka vol.6
  42. 42. var appId = 78; // 商品マスタのアプリIDの設定 var params = { app: appId, query: '商品コード = "' + record.商品コード.value + '"' }; kintone Cafė Fukuoka vol.6 D S S D S
  43. 43. kintone.api( kintone.api.url('/k/v1/records', true), 'GET', params ).then(function(resp) { kintone Cafė Fukuoka vol.6
  44. 44. // 在庫数がマイナスになる場合はエラーにして中断 record['出庫量']['error'] = "在庫が足りません。"; event['error'] = "在庫が足りません。"; kintone Cafė Fukuoka vol.6
  45. 45. kintone Cafė Fukuoka vol.6 event['error'] record['出庫量']['error']
  46. 46. var params = { app: appId, id: resp.records[0]['$id']['value'], revision: resp.records[0]['$revision']['value'], record: {"在庫量": {"value": updateQuantity}} }; kintone Cafė Fukuoka vol.6
  47. 47. kintone.api( kintone.api.url('/k/v1/record', true), 'PUT', params ).then( ).catch( ) kintone Cafė Fukuoka vol.6
  48. 48.  開発時は、Dropboxを使った方法も便利です ググってください kintone Cafė Fukuoka vol.6
  49. 49.  まずは、商品マスタの在庫数を確認しましょう  次に、出庫入力で データを登録します  そして、商品マスタで在庫数を確認しましょう  在庫が足りないパターンの確認もしましょう kintone Cafė Fukuoka vol.6
  50. 50.  REST APIを使えば、他アプリ(テーブル)との 連携もできるので、ずいぶん 使いどころが広がる  だた、集計して持ってくる (GROUP BYして、SUMで持ってくる)とかは、 苦手かな? kintone Cafė Fukuoka vol.6
  51. 51.  エバンジェリストでもない  kintone の実績があるわけでもない  JSを触ったこともなかった  みなさんも どんどん コミュニティに参加しましょう! kintone Cafė Fukuoka vol.6
  52. 52. ご清聴 ありがとうございました kintone Cafė Fukuoka vol.6
  53. 53.  GitHub https://github.com/masu77/kcfvol06 https://github.com/masu77/kcfvol06-2 完成版、 変更・削除対応版 kintone Cafė Fukuoka vol.6 kintone Café Fukuoka vol06 の略です

×