kintone と Monaca を連携してみよう (来場者管理アプリ編)
はじめに
この Tips では、kintone & Monaca 連携で「来場者管理アプリ」を作成してみたいと思います。
「来場者管理アプリ」はイベント開催時に来場者が持っている QR コードを読み込むだけで、kintone アプリにレコードを登録できます。
さらに kintone で来場者数を集計し、手元のモバイルに表示してくれるモバイルアプリです。
連携の完成イメージ
下準備
- kintone 環境
開発者ライセンスをおすすめします。
取得方法は kintone 開発者ライセンス(開発環境) を参照ください。 -
Monaca Cloud
すぐにお試しできます。 -
Monacaデバッガー
テストを効率化できるモバイルアプリです。
kintone アプリの作成
今回はレコードを登録して集計を取るだけなので、フォームにはフィールドを置かずにアプリを作成します。
また、集計を取るために大項目を「作成者」に設定したグラフをひとつ作ります。
あとで、サブドメイン名、アプリ ID、ログイン名とパスワード(アプリの API トークン可)を設定します。
Monaca Cloud
Monaca とは
Monaca はアシアル株式会社が提供するモバイル向けアプリの開発環境の呼称です。
HTML5 と JavaScript を用いることで、iOS と Android の両 OS に対応したクロスプラットフォームなアプリ開発ができるクラウドベースの開発プラットフォームです。
また、Monaca では Web ブラウザーを通じて全サービスが提供されます。
そのため、クライアントソフトをインストールしなくても誰でも簡単にアプリを開発できます。
Monaca プロジェクト
monaca-project-kintoneVisitors.zip
を PC にダウンロードして、
Monaca Dashboard
にインポートします。
プロジェクト名は任意でわかりやすい名前にしましょう。
次の画像は monaca-project-kintoneVisitors.zip をインポートした後の画面です。
index.html のプログラムを表示しています。
reader.html
QR コードを読み込んで、kintone アプリにレコード登録する画面です。
counter.html
kintone アプリからレコード件数を取得して来場者数を表示する画面です。
setting.html
kintone アプリにアクセスするための情報を設定する画面です。
ここでは以下の情報を設定しています。
- API トークン認証とログイン認証の対応
- Basic 認証への対応
- 入力した認証情報での接続チェック
- 設定情報の削除
app.js の一部解説
QR コード読み込み、集計、認証情報チェックを行うプログラムです。
readCode()
SweetAlert
を使ってダイアログを表示します。
correctText
では、QR コードに埋め込まれている文字列を定義します。
window.plugins.barcodeScanner.scan
はバーコードをスキャンするための関数です。
|
|
sendRequest()
loadStorage()
では、setting.js で保存しているローカルデータを取得します。
setAuthorization(objStorage)
では、kintone へアクセスするために setting.js で保存した認証情報を変更します。
$http(request).success
では、
AngularJS
の HTTP リクエスト手法を使用しています。
|
|
setting.js の一部解説
kintone アプリにアクセスするための情報を設定するプログラムです。
setAuthorization()
認証情報を kintone へアクセスするために改変しています。
Underscore.js
にある _.isEmpty
という関数を使用しています。
認証方式は
認証 を参考にしてください。
|
|
loadStorage()
localStorage
は Web Storage の機能のひとつで、クッキーのようにブラウザーでデータを文字列やオブジェクトで保存できるしくみです。
localStorage.getItem('key')
でデータを取得し、localStorage.setItem('key', 'Loginname')
でデータを保存します。
|
|
動作確認
1. 認証情報を設定する
Monaca デバッガーで自身のアカウントにログインし、表示されたプロジェクト一覧で先ほどインポートしたアプリを起動させます。
kintone アプリにアクセスするための認証情報を設定します。
メニューの「Settings」とういうタブをクリックしてください。
「Connection Check」リンクをクリックすると接続を確認できます。
- サブドメイン
- ドメイン
初期値はcybozu.com
です。
必要に応じて変更してください。 - アプリ ID
- API トークンまたはログイン名/パスワード
- Basic 認証のログイン名/パスワード(Basic 認証が有効な場合)
2. トップ画面に移動する
3. QR コードを読み込む
その後、「Read QRCode」をクリックし、次のサンプル QR コードを読み込みます。
4. モバイルアプリの表示内容を確認する
読み込みが成功したら、「Success」とダイアログで表示されます。
5. 集計する
メニューにある「Counter」というタブをクリックすると、読み込みに成功した回数分の数字が表示されます。
サンプルを改良することで、クエリによる絞り込みができます。
6. PC のブラウザーで kintone アプリにデータが登録されているのかを確認してみる
kintone のアプリを開いて、レコードが登録されているかを確認します。
また、事前に作成したグラフを表示して集計結果を確認します。
下の画像は一覧の設定で「作成日時」を追加した一覧画面です。
フォームに何もおかなくても、一覧で作成日時を置くことができます。
おわりに
いかがでしたでしょうか。
今回は来場者数の集計を取るだけでしたが、このアプリを応用すると来場者の情報収集や出欠確認ができます。
集計された情報を活かして次のイベントへつなげられるようになるので、ご興味のある方はぜひ試してみてください。
参考記事
Monaca を利用して「陳列場所確認アプリ」というモバイルアプリを作成する方法を紹介した記事があります。
kintone と Monaca を連携してみよう(陳列場所確認アプリ編) もぜひ参考にしてみてください。