kintoneとMonacaを連携してみよう (来場者管理アプリ編)

Index

• はじめに
• 完成イメージ
• 事前準備
• kintoneアプリの作成
• Monaca Cloud
• 動作確認
• 参考記事

はじめに

このTipsでは、kintone&Monaca連携で「来場者管理アプリ」を作成してみたいと思います。
「来場者管理アプリ」は、例えば、イベント開催時に来場者が持ってるQRコードを読み込むだけで、kintoneのアプリにレコードを登録してくれます。
さらにkintoneで来場者数の集計を手元のモバイルに表示してくれるモバイルアプリです。

連携の完成イメージ

事前準備

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

kintoneアプリの作成

今回はレコードを登録して、集計を取るだけなので、フォームにはフィールドを一つも置かずにアプリを作成します。
また、集計を取るために、大項目を「作成者」に設定したグラフを一つ作ります。

あとで、サブドメイン名、アプリID、ログイン名とパスワード（アプリのAPIトークン可）の設定があります。

Monaca Cloud

Monacaとは

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

Monaca プロジェクト

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

reader.html

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

counter.html

kintoneアプリからレコード件数を取得して来場者数を表示する画面です。

 

setting.html

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

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

app.js の一部解説

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

readCode()

• correctText >> QRコードに埋め込まれている文字列
• window.plugins.barcodeScanner.scan >> バーコードスキャンする関数
• swal >> SweetAlertを使ったダイアログ表示
• sendRequest >> 後述するレコード登録の関数

sendRequest()

• loadStorage() >> setting.jsで保存しているローカルデータを取得
• setAuthorization >> setting.jsで保存した認証情報をkintoneにアクセスするために変更
• $http(request).success >> AngularJSのHTTPリクエスト手法

setting.js の一部解説

kintoneアプリにアクセスするための情報を設定するプログラムです。

setAuthorization()

認証情報をkintoneにアクセスするために改変しています。認証方式は共通仕様を参考にしてください。

• _.isEmpty >> Underscore.jsにある便利な関数。オブジェクトが空なら真、そうでなければ偽を返す関数。

loadStorage()

• localStorage >> Web Storageの機能の一つで、クッキーのようにブラウザでデータを文字列やオブジェクトで保存できる仕組み
• localStorage.getItem("key") >> データ取得
• localStorage.setItem("key", "Loginname") >> データ保存

動作確認

STEP 1 認証情報を設定する

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

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

  

STEP 2 トップ画面に移動させる

STEP 3 QRコードを読み込む

その後、「Read QRCode」をクリックし、下記のサンプルQRコードを読み込みます。

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

読み込みが成功したら、「Success」とダイアログで表示されます。

STEP 5 集計する

メニューにある「Counter」とういうタブをクリックすると、読み込みが成功した回数分の数字が表示されます。
※サンプルを改良し、クエリーによる絞り込みができます。

STEP 6  PCのブラウザでkintoneアプリにデータが登録されているのかを確認してみる

kintoneのアプリを開いて、レコードが登録されているかを確認します。また、事前に作成したグラフを表示して集計結果を確認します。

※下の画像は一覧の設定で「作成日時」を追加した一覧画面です。
（フォームに何もおかなくても、一覧で作成日時を置くことができます。）

いかがでしたでしょうか。
今回は来場者数の集計を取るだけでしたが、このアプリを応用して来場者の情報なども収集したら、出欠確認や、集計された情報を活かして次のイベントにつなげることができると思います。ご興味のある方はぜひ試してみてください。

参考記事

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

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