kintone と Monaca を連携してみよう (陳列場所確認アプリ編)

目次

はじめに

この Tips では、kintone と Monaca を連携して「陳列場所確認アプリ」を作成してみたいと思います。
「陳列場所確認アプリ」は、大型スーパーやドラックストアなどで倉庫にある商品のバーコードをスキャンした際に、その商品の陳列場所を kintone のマスターアプリから取得し、表示してくれるアプリです。

連携の完成イメージ

下準備

kintone アプリの作成

今回はバーコードを読み込んだ後、陳列場所情報を取得するためのマスターアプリを作成します。
その後、レコード(陳列場所情報)を登録します。
次の CSV をアプリに読み込んでください。

フォームの作成

フィールド名 フィールドタイプ フィールドコード
拠点 ドロップダウン location
商品名 文字列 itemname
商品バーコード 文字列 itemcode
陳列場所 文字列 place

フォームはこのようになります。

ドロップダウンフィールド(拠点)の項目には、L.A. OfficeTokyo Office を記入します。

レコードの登録

レコード登録のため、kintone アプリに次の CSV ファイルを読み込んでください。
ファイル名は「Monaca 連携商品マスター」とします。

Monaca連携商品マスタ.csv

Monaca Cloud

Monaca とは

Monaca はアシアル株式会社が提供するモバイル向けアプリの開発環境の呼称です。
HTML5 と JavaScript を用いることで、iOS と Android の両 OS に対応したクロスプラットフォームなアプリ開発ができるクラウドベースの開発プラットフォームです。
また、Monaca では Web ブラウザーを通じて全サービスが提供されます。
そのため、クライアントソフトをインストールしなくても誰でも簡単にアプリを開発できます。

Monaca プロジェクト

monaca-project-kintoneCheckgoods.zip を PC にダウンロードして、 Monaca Dashboard (External link) にインポートします。
プロジェクト名は任意でわかりやすい名前にしましょう。
次の画像は monaca-project-kintoneVisitors.zip をインポートした後の画面です。index.html のプログラムを表示しています。

reader.html

バーコードを読み込んで、kintone アプリにレコード登録する画面です。

setting.html

kintone アプリにアクセスするための情報を設定する画面です。
ここでは以下の情報を設定しています。

  • API トークン認証とログイン認証の対応
  • Basic 認証への対応
  • 入力した認証情報での接続チェック
  • 設定情報の削除

app.js の一部解説

バーコード読み込み、認証情報チェックを行うプログラムです。

readCode()

SweetAlert (External link) を使ってダイアログを表示します。
window.plugins.barcodeScanner.scan はバーコードスキャンする関数です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$scope.readCode = function() {
  if (!checkSettings()) return;

  window.plugins.barcodeScanner.scan(
    this.checkItem,
    (error) => {
      swal('Error', 'Failure to read', 'error');
    }
  );
};
checkItem()

result.text.split(":") では、バーコードでスキャンした文字列を分割しており、アイテムコードと名称が : で区切られています。
sendRequest($scope.icode) では、アイテムコードでデータの有無を確認します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
$scope.checkItem = function(result) {
  if (result.cancelled) {
    return;
  }

  const readValue = result.text.split(':'); // Itemname:Itemcode
  $scope.icode = readValue[0];

  if ($scope.icode) {
    sendRequest($scope.icode);
  } else {
    swal('Error', 'Mistake of reading data' + 'Itemcode:' + $scope.icode, 'error');
  }
};
sendRequest()

loadStorage() では、setting.js で保存しているローカルデータを取得します。
setAuthorization では、kintone にアクセスするため setting.js で保存した認証情報を変更します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
const sendRequest = function(icode) {

  const objStorage = loadStorage();
  const headerparams = setAuthorization(objStorage);

  const request = {
    url: 'https://' + objStorage.subdomain + '.' + objStorage.domain + '/k/v1/records.json',
    method: 'GET',
    headers: headerparams,
    params: {
      app: objStorage.appId,
      query: 'itemcode =' + '"' + icode + '"',
      fields: ['$id', 'location', 'itemname', 'itemcode', 'place'],
      totalCount: true
    }
  };
  // ~~~
};

$http(request).success では、 AngularJS (External link) の HTTP リクエスト手法を使用します。
リクエストパラメーターには、以下のように queryfields を設定できます。

1
2
query: 'itemcode =' + '"' + icode + '"', // アイテムコードをクエリにセット
fields: ['$id', 'location', 'itemname', 'itemcode', 'place'] // 取得したいフィールドをセット

setting.js の一部解説

kintone アプリにアクセスするための情報を設定するプログラムです。
解説は kintone と Monaca を連携してみよう (来場者管理アプリ編) を確認してください。

動作確認

1. 認証情報を設定する

Monaca デバッガーで自身のアカウントにログインし、表示されたプロジェクト一覧で先ほどインポートしたアプリを起動させます。
そして、kintone アプリにアクセスするための認証情報を設定します。メニューの歯車アイコンをクリックしてください。
「Connection Check」リンクをクリックすると接続を確認できます。

  • サブドメイン
  • ドメイン
    初期値は cybozu.com です。
    必要に応じて変更してください。
  • アプリ ID
  • API トークンまたはログイン名/パスワード
  • Basic 認証のログイン名/パスワード(Basic 認証が有効な場合)

2. トップ画面で操作する

「Read Barcode」をクリックします。

3. 商品のバーコードを読み込む

バーコードリーダーが起動したら、次のサンプルバーコードの中からひとつ選択し、読み込みます。

サンプルバーコード

この中には kintone のマスターアプリに登録されていないバーコードもあります。

4. モバイルアプリの表示内容を確認

読み込みが成功したら「Success」とダイアログで表示されます。
マスターアプリに登録されている商品の場合は、「Success」という文言と「商品名」、「商品バーコード」、「拠点」、「陳列場所」が表示されます。
登録されていない商品の場合は、「Error」という文言が表示されます。

5. kintone のマスターアプリを開いて、表示された情報と一致するか確認

モバイルに表示された内容と kintone のマスターアプリに登録されている内容が一致するか確認します。
一致していれば成功です。

おわりに

いかがでしたでしょうか。
今回は Monaca を使って kintone アプリに登録されている内容をモバイルで表示する方法を紹介しました。
陳列場所確認アプリの場合、ご自身の業務状況に合わせていろんな形で応用できると思います。
kintone で作ったマスターアプリをどのように活用するか考えてみるとおもしろいかもしれません。

参考記事

Monaca を利用して「陳列場所確認アプリ」というモバイルアプリを作成する方法を紹介した記事があります。
kintone と Monaca を連携してみよう(来場者管理編) もぜひ参考にしてみてください。