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

• kintone環境
  開発者ライセンスをおすすめします。
  取得方法は kintone 開発者ライセンス（開発環境）を参照してください。
• Monaca Cloud
  すぐにお試しできます。
• Monacaデバッガー
  テストを効率化できるモバイルアプリです。

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

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

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

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

Monaca連携商品マスタ.csv

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

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

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

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

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

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

readCode()

SweetAlert を使ってダイアログを表示します。
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 のHTTPリクエスト手法を使用します。
リクエストパラメーターには、以下のようにqueryやfieldsを設定できます。

1
2

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

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

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

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

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

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

サンプルバーコード

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

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

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

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

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