（著者：近本 昌也）
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。
はじめに
ユニテック・ジャパン株式会社のワイヤレスバーコードスキャナ MS910 とkintoneのモバイルアプリでトラッキングを実現するTipsを紹介します。
概要
本Tipsでは「バーコードマスタ」と「バーコード送信アプリ」の2つのアプリを用意します。MS910の製品詳細はこちら
連携イメージ
- 「倉庫A」から「倉庫B」に商品を輸送します。
- kintoneの「バーコード送信アプリ」をモバイルで表示し、現在所在地を「倉庫B」に変更して輸送された商品のバーコードを読み取ります（文字列複数行フィールドに改行区切りで登録）。
- レコードを保存すると「バーコードマスタ」に登録されている商品の現在所在地が更新されます。
事前準備
- MS910の購入及び設定
- バーコード送信アプリの作成
- バーコードマスタの作成
MS910の購入及び設定
クイック接続ガイドを参照しながら、お手持ちのスマートフォン端末とBluetooth接続を行います。接続確認にはメモなどの文字入力可能なアプリを実行してください。
※ ターミネータ（バーコード読み取り時に最後に付加されるコマンドのこと）には「Enter」を設定してください。
バーコード送信アプリ
フォーム設定例
| フィールドタイプ | フィールド名（例） | フィールドコード | 備考 |
| 日付 | 日付 | date | |
| チェックボックス | 送信済み | sentcheck | |
| ユーザー選択 | 送信者 | sentuser | |
| ドロップダウン | 送信する現在所在地 | location | オプション
|
| 文字列(複数行) | 送信するバーコード一覧 | barcode | 改行区切りでバーコードを入力するフィールドになります。 |
| ラベル | - | - | 送信したデータ |
| テーブル | Table | ||
| テーブル(日時) | 送信日時 | sentdate | |
| テーブル(文字列(1行)) | 送信したバーコード | sentbarcode | |
| テーブル(文字列(1行)) | 送信した所在地 | sentlocation |
JavaScriptカスタマイズ
「PC用のJavaScriptファイル」と「スマートフォン用のJavaScriptファイル」にそれぞれ同じファイルをアップします(※ソースコードは下記に記載しています。)
詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリとサンプル用のファイルを順番に指定します。
PC用のJavaScriptファイル及びスマートフォン用のJavaScriptファイル
- jQuery
https://js.cybozu.com/jquery/2.2.4/jquery.min.js (version 2.2.4を利用) - Spin.js
https://js.cybozu.com/spinjs/2.3.2/spin.min.js (version 2.3.2を利用) - Moment.js
https://js.cybozu.com/momentjs/2.14.1/moment-with-locales.min.js (version 2.14.1を利用) - location.js
ソースコードは下記に記載
バーコードマスタ
フォーム設定例
| フィールドタイプ | フィールド名（例） | フィールドコード | 備考 |
| ドロップダウン | 現在所在地 | location |
オプション
|
| 文字列(1行) | バーコード | barcode | |
| 文字列(1行) | 商品名 | itemname | |
| 添付ファイル | 商品画像 | itemimage | |
| ラベル | - | - | 所在地変更履歴 |
| テーブル | Table | ||
| テーブル(日時) | 変更日時 | date | |
| テーブル(ユーザー選択) | 変更者 | user | ログインユーザーを指定 |
| テーブル(文字列(1行)) | 変更後の所在地 | new_location |
JavaScriptカスタマイズ
バーコードマスタでは不要です。
完成イメージ（モバイル画面）
- バーコードマスタ レコード詳細画面更新前
マスタの商品が大阪倉庫になっていることを確認します。 - バーコード送信アプリ レコード追加画面①
「送信する現在所在地」フィールドを変更し、「送信するバーコード一覧」フィールドにフォーカスを当てた状態でMS910でバーコードをスキャンすると、スキャンしたバーコードが改行区切りで入力されます。
対象のバーコードを全て入力した後、保存ボタンをタップします。 - バーコード送信アプリ レコード追加画面②
バーコードマスタのレコードの更新が完了するとアラートが表示されます。 - バーコードマスタ レコード詳細画面
現在所在地が変更され、サブテーブルの変更履歴が更新されていることが確認できます。
JavaScriptソースコード
ソースコードの説明
スピナーの表示(11~61行目)
処理中にSpin.showSpinner()、Spin.hideSpinner()を使い分けることでスピナーの表示/非表示を行います。
バーコードマスタからレコードの取得(63~80行目)
「送信したバーコード一覧」フィールドの値を改行区切りで分け、「バーコードマスタ」の「バーコード」フィールドと一致した全てのレコードを取得します（参考：レコードの取得（GET））。appIdにはマスタのアプリ番号を記載してください。
取得したレコード情報の書き換え(82~125行目)
取得したレコードの情報に現在所在地のデータと変更履歴用のサブテーブルのデータを追加します。unshift()を利用することでサブテーブルの一番上に最新の変更内容を表示することができます。
バーコードマスタのレコード更新(127~150行目)
変更したレコードの情報を基にバーコードマスタのレコードを更新します（参考：レコードの更新（PUT））。
成功時にはアラートで対象アプリの番号とレコード番号を表示します。
バーコード送信アプリのレコード更新用配列の作成(152~185行目)
バーコード送信アプリ内に送信したバーコードを履歴としてサブテーブルに残します。誤送信の場合や送信したかどうかを確認したいときに利用します。
イベント別関数の呼び出し(187~221行目)
モバイルとPCの両方で保存実行前イベントでこれまでの関数を呼び出します。一部処理に待ち合わせが必要なため、kintone.Promiseオブジェクトを使用しました（参考：kintone API で Promise を使ってみよう！）。
その他には文字列複数行に入力されたバーコードをquery用に変換する処理、バーコード送信アプリ内の「送信済み」フィールドにチェックを入れる処理と非活性にする処理を加えています。
注意事項
- 本Tipsは kintone のモバイルアプリ「kintone 1.0.7」、iOS10.0.2 で動作確認を行いました。
- MS910に関する制限や対応端末に関しては製品概要を参照ください。
最後に
いかがだったでしょうか？今回のTipsではkintoneの標準のモバイルアプリとバーコードリーダーを活用し、トラッキングの実現を紹介しました。
kintoneの標準の機能を組み合わせることで安価に在庫管理や棚卸業務を実現できそうです。
本TipsのデモをCybozu Days 2016のブースで先行して展示致しますので是非ご確認ください。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。