カテゴリー内の他の記事

バーコードスキャナを使って kintone でトレースを実現する

フォローする

(著者:近本 昌也)

はじめに

ユニテック・ジャパン株式会社のワイヤレスバーコードスキャナ MS910 とkintoneのモバイルアプリでトラッキングを実現するTipsを紹介します。

概要

本Tipsでは「バーコードマスタ」と「バーコード送信アプリ」の2つのアプリを用意します。MS910の製品詳細はこちら

連携イメージ

  1. 「倉庫A」から「倉庫B」に商品を輸送します。
  2. kintoneの「バーコード送信アプリ」をモバイルで表示し、現在所在地を「倉庫B」に変更して輸送された商品のバーコードを読み取ります(文字列複数行フィールドに改行区切りで登録)。
  3. レコードを保存すると「バーコードマスタ」に登録されている商品の現在所在地が更新されます。

 

事前準備

  • 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カスタマイズ

バーコードマスタでは不要です。

完成イメージ(モバイル画面)

  1. バーコードマスタ レコード詳細画面更新前
    マスタの商品が大阪倉庫になっていることを確認します。
  2. バーコード送信アプリ レコード追加画面①
    「送信する現在所在地」フィールドを変更し、「送信するバーコード一覧」フィールドにフォーカスを当てた状態でMS910でバーコードをスキャンすると、スキャンしたバーコードが改行区切りで入力されます。
    対象のバーコードを全て入力した後、保存ボタンをタップします。
  3. バーコード送信アプリ レコード追加画面②
    バーコードマスタのレコードの更新が完了するとアラートが表示されます。
  4. バーコードマスタ レコード詳細画面
    現在所在地が変更され、サブテーブルの変更履歴が更新されていることが確認できます。

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のブースで先行して展示致しますので是非ご確認ください。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk