このカスタマイズで利用している kintone JS SDK は現在推奨されていません。今後は kintone JavaScript Client (@kintone/rest-api-client) を利用するように書き換えてください。
（著者：サイボウズ 竹内 能彦）
はじめに
今回は以前紹介させていただいた「安全に在庫管理を行うテクニック」を kintone アプリに実装します。
理解しやすいように在庫アプリと出庫アプリの2つを利用します。
「出庫アプリからXX個出庫すると在庫アプリの在庫がXX個減る」というカスタマイズを行います。
また、kintone JS SDK を使うことでREST API部分のコードを簡素化しています。
非常に便利ですのでこれからコードを書く人は是非使ってくださいね。
デモ環境
デモ環境で実際に動作を確認できます。
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/276/
ログイン情報はcybozu developer network デモ環境で確認してください。
結果
まずは結果から行きましょう！
在庫アプリはこのような状態です。
出庫アプリに出庫数を登録すると・・・
出庫アプリには出庫数が登録され
在庫アプリからは在庫数が減りました！
在庫が足りない場合はこのようなエラーを表示します。
①「在庫数の確認時」と②「在庫数の変更時」のリビジョンが異なる場合（①と②の間に在庫のデータが更新された場合）はこのようなエラーを表示します。
これで安全に在庫管理ができますね。
kintone 設定
「在庫」アプリの作成
| フィールド名 | フィールドタイプ | フィールドコード | 備考 |
| 商品コード | 文字列（1行） | itemCode |
必須項目にする 値の重複を禁止する |
| 商品名 | 文字列（1行） | itemName |
必須項目にする |
| 在庫数 | 数値 | stockNum |
必須項目にする |
「出庫」アプリの作成
| フィールド名 | フィールドタイプ | フィールドコード | 備考 |
| 出庫先 | 文字列（1行） | destination | |
| 商品コード | ルックアップ | itemCode |
必須項目にする 関連付けるアプリ：在庫アプリ コピー元のフィールド：商品コード ほかのフィールドのコピー：「商品名」に「在庫アプリの商品名」 |
| 商品名 | 文字列（1行） | itemName | |
| 出庫数 | 数値 | pickNum |
必須項目にする |
「出庫」アプリのJS/CSS設定
「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のJavaScriptファイル」に以下のURL/ファイルを設定します。
- kintone-js-sdk.min.js
GitHub にアクセスして、zip ファイルをダウンロードします。
※ 0.4.2 より前のバージョンを利用してください。
ダウンロードしたZipファイルを解凍して、dist 以下の kintone-js-sdk.min.js を利用してください。 - 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存、アップロードします。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください
ポイントは以下の3つです！
- bulkRequest（kintoneBulkRequest）を使って、2つのアプリ（在庫、出庫）を同時に操作します。
- bulkRequestによる在庫アプリの更新時にはリビジョンを指定します。
- bulkRequestが成功した場合は「return false」として、レコードの登録自体はキャンセルします。（60行目）
終わりに
リビジョンの使い方わかりましたでしょうか。
サンプルコードはレコードの登録、出庫にしか対応していません。是非レコードの編集や入庫にも対応させてみてください＾-＾
変更履歴
- 2019/06/10
- 利用ライブラリを kintone Utility Library for JavaScript から kintone JS SDK に変更
このTipsは、2019年5月版 kintoneで確認したものになります。
はじめまして、和田といいます。
出庫画面で在庫更新すると更新後の在庫数になりますが、他の項目でルックアップしたのが消えてしまいます。
解決策はないでしょうか。
和田さん
回答が遅くなり申し訳ありません。
出庫アプリに本記事で設定したフィールド以外に
追加でルックアップフィールドを設定している、ということでしょうか。
であれば、サンプルコードの52行目から69行目で出庫アプリに登録するデータを指定しており、
ここにルックアップフィールドのデータを指定する必要があります。
処理の流れとしては以下のようになります。
・7行目から10行目を例にルックアップフィールドのデータを取得する
・52行目から69行目で出庫アプリに登録するデータを指定する
また、ルックアップフィールドにはAPIでデータ登録することから
参照先のフィールドに重複禁止が設定されている必要があります。
竹内様
サポートありがとうございます。
日付や複数のルックアップ、入力項目が多くあり、最初は動作せず、JSかフォーム設定か、何を間違えたのかがわからず完成に手間取りました。
無事、複数のクリアされていた項目が表示し更新されるようになりました。
■追加での質問です。
残更新の行をテーブルにして、複数明細行にしたいのですが無理でしょうか。
和田様
動作したのですね！良かったです。
残更新が具体的に理解できていないのですが
1操作で複数製品を出庫処理したいということでしょうか。
可能か不可能かでいうと可能ですが、かなり大幅な変更が必要になります。
大きく2つの変更が必要です。
１．アプリのテーブル対応
アプリにテーブルを用意
２．ロジックの見直し
下記を複数（テーブル）対応する必要があります。
・在庫の取得
・在庫の不足チェック
・在庫数の更新/出庫情報の登録
（テーブルへのデータ登録は https://developer.cybozu.io/hc/ja/articles/202166160 のリクエストボディの構造を参照）
早速のサポートありがとうございます。
トライしてみます。
初めまして、西川と申します。
伺いたいことがあります。
本アプリを流用してkintoneを作成しているのですが、出庫アプリに本記事で設定したフィールド以外のものを追加したところ、
値が入らない状態になってしまいました。
ここでの過去のやり取りに
・7行目から10行目を例にルックアップフィールドのデータを取得する
・52行目から69行目で出庫アプリに登録するデータを指定する
とあったのでいろいろと試みたのですが、うまくいきません。
(値を入れることに成功しましたが、今度は在庫が入庫アプリには反映されなくなってしまいました。)
どこに何を入れればいいか、ご教示いただけないでしょうか？
お手数お掛け致しますが、お願い致します。
～追記～
上記の内容は何とか解決できました。
加えてですが、添付ファイルをフィールドで加えたい場合は、どうすればよろしいでしょうか？
添付ファイルだけうまく出庫アプリに反映されない状況です。
申しわけございませんが、ご教示お願い致します。
西川 正一 様
お世話になっております。cybozu developer network事務局です。
記事記載のコードに変更を加える際にご不明点がございましたら、
コミュニティ（kintoneのカスタマイズフォーラム）への投稿をご案内しています。
なお、出庫アプリと在庫アプリで、添付ファイルをどのように操作し反映させたいのか、追記の上ご投稿いただくと、
より具体的な回答が得られやすいかと思います。（コミュニティは有志による回答となります。）
申し訳ございませんが、どうぞよろしくお願いいたします。
御世話になっております。鵜沼と申します。
JSなども理解していない初心者なのですが、今回の内容にトライしております。
在庫アプリ、出庫アプリを作成し、PC用のJavaScriptファイルに kintone-js-sdk.min.jsと任意のJSファイルをアップロードしました。
在庫アプリに在庫例を入力し、出庫アプリに出庫例を入力して保存を押すと、「商品を取得できません」とエラーになります。
何を間違えているのか見当がつかずご連絡を致しました。
お忙しいところに大変恐縮でございますが、ご回答の程、宜しくお願い致します。
サンプルコードはそのままコピーし利用しており、アプリのフィールド名・フィールドコードもコピペをして作成をしております。
鵜沼 巧 様
お世話になっております。cybozu developer network事務局です。
当方にて、動作確認致しましたが、正常に動作することが確認できました。
再度、記事をお読み頂き、設定が間違っていないかご確認ください。
また、カスタマイズについて不明点がございましたら、コミュニティをご活用頂きますようお願い致します。
どうぞよろしくお願いいたします。
お世話になっております。
在庫アプリと出庫アプリを作成し、kintone-js-sdk.min.js、sample.jsを利用して、自分の環境で動作させることができたのですが、
在庫アプリと出庫アプリをゲストスペース内に作成したところ、動作しなくなってしまいました。
sample.jsのどの部分を修正すれば良いのでしょうか。
山口 大介 様
お世話になっております。cybozu developer network事務局です。
JS SDKをゲストスペースに対して利用する場合、Connection で guestSpaceID を指定する必要があります。
https://kintone.github.io/kintone-js-sdk/latest/reference/connection/
※ Sample code の "Define connection without auth" をご確認ください。
本記事の sample.js では13行目に当たる部分です。
cybozu developer network事務局様
御世話になっております。田中と申します。
上記の鵜沼さんと同じような「商品を取得できません」とエラーになります。
返信に『当方にて、動作確認致しましたが、正常に動作することが確認できました。』とありますが、
逆に何が悪いのか検討つかないでしょうか？設定も全く同じようにやっています。
同じような設定ミスをするから、同じエラーが出るかと思います。
何かヒントがあればよろしくお願い致します。
田中 誠 様
お世話になっております。cybozu developer network事務局です。
こちら動作確認を行ったところ、kintone JS SDKの最新バージョン「v0.7.1」では、
コメントいただいた通り「商品を取得できません」とエラーになること確認いたしました。
kintone JS SDKのバージョンアップにより、引数の指定の仕方が記事作成時と変わっているため、正常に動作しなくなっております。
お手数おかけしますが、最新バージョンに合わせてコードを記載していただくようお願いいたします。
記事修正については検討しております。
また、鵜沼様にコメントいただいた時点での最新バージョン「v0.4.0」では、正常に動作することが確認できましたので、
鵜沼様と、今回の田中様のエラーの原因は異なるものだと考えられます。
ご不便おかけいたしますが、よろしくお願いいたします。
cybozu developer network事務局様
素人です。
本サイトの通り、実装したのですが「出庫に失敗しました。」とエラーが出ます。
なお、//実行 以降をコメントアウトすると出庫登録は正常終了しますが、在庫アプリの引き当ては変化なしです。
kintone JS SDKのバージョン「v0.7.4」で下記の実装内容ですが解決策を教えて欲しいです。
var kintoneBulkRequest = new kintoneJSSDK.BulkRequest({con});
var responseBulkRequest = kintoneBulkRequest
.updateRecordByID({itemAppId, recordId, stock, recordRevision}) // レコード更新（在庫アプリ）
.addRecord({warehouseAppId, warehouse}) // レコード追加（出庫アプリ）
.execute();
//debug
window.alert('debug12');
// 実行
return responseBulkRequest
.then(function(postRes) {
//debug
window.alert('debug13');
// bulkRequestで登録した詳細ページに移動
location.href = '/k/' + warehouseAppId + '/show#record=' + postRes.results[1].id;
// 登録画面のレコードは保存しない
return false;
})
.catch(function(error) {
console.log(error);
event.error = '出庫に失敗しました。';
return event;
});
})
.catch(function(error) {
console.log(error);
event.error = '商品を取得できませんでした。';
return event;
});
岡原徹様
お世話になっております。cybozu developer network事務局です。
恐れ入りますが、こちらのコメント欄は記事に対するフィードバックとなっております。
v0.5.0 以降より、書き換えてくださっている通り、メソッドに指定する引数の型がシングルオブジェクトになっています。
記事でのサンプルコードは、v0.5.0 より前のコードになっています。
記事に対するフィードバックとは異なるため（発展内容のため）、お手数おかけいたしますが、コミュニティの方へご質問いただけますと幸いです。
また記事コメントよりもコミュニティのほうが多くの人がご覧になっているため、回答が得られやすいかと存じます。
初心者です。
このページと同様のことがしたくてサンプルを実装しましたが
レコードの登録ボタンを押しても無反応です。
解決方法を教えて下さい。
岸 靖彦 様
お世話になっております。cybozu developer network事務局です。
コミュニティでも同様の質問をされていますがその後いかがでしょうか。
記事と同じシナリオで不具合が出た場合、お手数ですが、
コミュニティ投稿時の「良い質問をするためのガイド」を参照し、
より詳細な情報をご教示いただけますと、回答が得られやすいかと存じます。
よろしくお願いいたします。
このサンプルのやり方で新規登録はできますが、更新時に「このサイトを離れてもよろしいですか？」の確認ダイアログが表示されてしまいます。
この確認ダイアログを消すことはできませんか？恐らく入力フォームの値を変更しているためbeforeunloadイベントによって出ていると思うのですが、登録している関数の参照が不明のため、removeEventListenerなどで削除できません。
ここで紹介されるbulkRequestを利用したレコード更新では、ほとんどの方が同じ問題が起きると思うのですが、回避策をお教えください。
水野洋介様
お世話になっております。cybozu developer network 運営局です。
恐れ入りますが、こちらのコメント欄は記事に対するフィードバック欄となっております。
記事で紹介している内容の挙動を変更したいなど、発展した内容はコミュニティをご活用ください。
よろしくお願いいたします。