（著者：サイボウズ 竹内 能彦）
はじめに
今回は以前紹介させていただいた「安全に在庫管理を行うテクニック」を kintone アプリに実装します。
理解しやすいように在庫アプリと出庫アプリの2つを利用します。
「出庫アプリからXX個出庫すると在庫アプリの在庫がXX個減る」というカスタマイズを行います。
また、kintone JS SDK を使うことでREST API部分のコードを簡素化しています。
非常に便利ですのでこれからコードを書く人は是非使ってくださいね。
デモ環境
https://dev-demo.cybozu.com/k/276/
※デモ環境についての説明、アカウントとパスワードはこちら
結果
まずは結果から行きましょう！
在庫アプリはこのような状態です。
出庫アプリに出庫数を登録すると・・・
出庫アプリには出庫数が登録され
在庫アプリからは在庫数が減りました！
在庫が足りない場合はこのようなエラーを表示します。
①「在庫数の確認時」と②「在庫数の変更時」のリビジョンが異なる場合（①と②の間に在庫のデータが更新された場合）はこのようなエラーを表示します。
これで安全に在庫管理ができますね。
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 にアクセスし [Clone or download]ボタンをクリックして、 Zip ファイルをダウンロードします。
ダウンロードしたZipファイルを解凍して、dist 以下の kintone-js-sdk.min.js を利用してください。 - 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存、アップロードします。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください
ポイントは以下の3つです！
- bulkRequest（kintoneBulkRequest）を使って、2つのアプリ（在庫、出庫）を同時に操作します。
- bulkRequestによる在庫アプリの更新時にはリビジョンを指定します。
- bulkRequestが成功した場合は「return false」として、レコードの登録自体はキャンセルします。（82行目）
終わりに
リビジョンの使い方わかりましたでしょうか。
サンプルコードはレコードの登録、出庫にしか対応していません。是非レコードの編集や入庫にも対応させてみてください＾-＾
変更履歴
- 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行目に当たる部分です。