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

はじめに

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

連携の完成イメージ

事前準備

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

kintoneアプリの作成

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

フォームの作成

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

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

ここでドロップダウンフィールドに記入する項目は下記になります。

・L.A. Office

・Tokyo Office

レコードの登録

レコードの登録のために、kintoneアプリ側に下記のファイルを読み込んでください。

ファイル名は「Monaca連携商品マスタ」としました。

Monaca連携商品マスタ.csv

Monaca Cloud

Monacaとは

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

Monaca プロジェクト

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

 

reader.html

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

 

setting.html

kintoneアプリにアクセスするための情報を設定する画面です。

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

 

app.js の一部解説

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

readCode()

• window.plugins.barcodeScanner.scan >> バーコードスキャンする関数
• swal >> SweetAlertを使ったダイアログ表示

checkItem()

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

sendRequest()

• loadStorage() >> setting.jsで保存しているローカルデータを取得
• setAuthorization >> setting.jsで保存した認証情報をkintoneにアクセスするために変更
• $http(request).success >> AngularJSのHTTPリクエスト手法
• "query": "itemcode =" + '"'+ icode +'"' >> アイテムコードをクエリーにセット
• "fields": ["$id", "location","itemname", "itemcode", "place"] >> 取得したいフィールドをセット

setting.js の一部解説

kintoneアプリにアクセスするための情報を設定するプログラムです。
解説はこちらをご確認ください。

動作確認

STEP 1 認証情報を設定する

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

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

  

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

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

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

バーコードリーダーが起動したら、下記のサンプルバーコードの中で一つを選んで、読み込みます。

<サンプルバーコード>

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

 

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

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

   

 

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

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

 

いかがでしたでしょうか？

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

 

参考記事

今回の記事以外にも、Monacaを利用して作成した「集荷状況確認アプリ」や、「来場者管理アプリ」とういうモバイルアプリについて紹介した記事がありますので、ぜひこちらの記事も参考にしてみてください。

• kintoneとMonacaを連携してみよう(来場者管理編)
• Monacaを使ってkintoneのモバイルアプリを作ろう