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

目次

はじめに

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

連携の完成イメージ

下準備

kintone アプリの作成

今回はレコードを登録して集計を取るだけなので、フォームにはフィールドを置かずにアプリを作成します。
また、集計を取るために大項目を「作成者」に設定したグラフをひとつ作ります。
あとで、サブドメイン名、アプリ ID、ログイン名とパスワード(アプリの API トークン可)を設定します。

Monaca Cloud

Monaca とは

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

Monaca プロジェクト

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

reader.html

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

counter.html

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

setting.html

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

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

app.js の一部解説

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

readCode()

SweetAlert (External link) を使ってダイアログを表示します。
correctText では、QR コードに埋め込まれている文字列を定義します。
window.plugins.barcodeScanner.scan はバーコードをスキャンするための関数です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
$scope.readCode = function() {

  if (!checkSettings()) return;

  const correctText = '51386702637'; // QR コードに埋め込まれている文字列
  window.plugins.barcodeScanner.scan( // バーコードスキャンする関数
    (success) => {
      if (success.text !== correctText) {
        swal('Error', 'Failure to read', 'error');
        return;
      }
      sendRequest(); // 後述するレコード登録の関数
    },
    (error) => {
      swal('Error', 'Failure to read', 'error');
    }
  );
};
sendRequest()

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const sendRequest = function() {

  const objStorage = loadStorage(); // setting.js で保存しているローカルデータを取得
  const headerparams = setAuthorization(objStorage); // setting.js で保存した認証情報を kintone へアクセスするために変更

  const request = {
    url: 'https://' + objStorage.subdomain + '.' + objStorage.domain + '/k/v1/record.json',
    method: 'POST',
    headers: headerparams,
    data: {
      app: objStorage.appId
    }
  };

  $http(request)
    .success((data) => {
      if (data.totalCount !== 0) {
        swal('Success', 'Registration success', 'success');
      } else {
        swal('Error', 'Registration failure', 'error');
      }
    })
    .error((data) => {
      swal('Error', JSON.stringify(data), 'error');
    });
};

setting.js の一部解説

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

setAuthorization()

認証情報を kintone へアクセスするために改変しています。
Underscore.js (External link) にある _.isEmpty という関数を使用しています。
認証方式は 認証 を参考にしてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const setAuthorization = function($scope, type) {
  const obj = {};

  // Basic Authorization
  if (($scope.basicloginName && $scope.basicloginPass)) {
    obj.Authorization = 'Basic ' + base64encode($scope.basicloginName + ':' + $scope.basicloginPass);
  }

  // APIToken or Login Authorization
  if ($scope.apiToken) {
    obj['X-Cybozu-API-Token'] = $scope.apiToken;
  } else if (($scope.loginName && $scope.loginPass)) {
    obj['X-Cybozu-Authorization'] = base64encode($scope.loginName + ':' + $scope.loginPass);
  } else {
    return {};
  }

  if (type === 'json' || _.isEmpty(type)) { // オブジェクトが空なら真、そうでなければ偽を返す関数
    obj['Content-Type'] = 'application/json';
  }
  return obj;
};
loadStorage()

localStorage は Web Storage の機能のひとつで、クッキーのようにブラウザーでデータを文字列やオブジェクトで保存できるしくみです。
localStorage.getItem('key') でデータを取得し、localStorage.setItem('key', 'Loginname') でデータを保存します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const loadStorage = function() {
  const obj = {
    subdomain: _.isEmpty(localStorage.getItem('SubDomain')) ? '' : localStorage.getItem('SubDomain'),
    domain: _.isEmpty(localStorage.getItem('Domain')) ? 'cybozu.com' : localStorage.getItem('Domain'),
    appId: _.isEmpty(localStorage.getItem('AppId')) ? '' : localStorage.getItem('AppId'),
    apiToken: _.isEmpty(localStorage.getItem('APIToken')) ? '' : localStorage.getItem('APIToken'),
    loginName: _.isEmpty(localStorage.getItem('LoginName')) ? '' : localStorage.getItem('LoginName'),
    loginPass: _.isEmpty(localStorage.getItem('Password')) ? '' : localStorage.getItem('Password'),
    basicloginName: _.isEmpty(localStorage.getItem('BasicLoginName')) ? '' : localStorage.getItem('BasicLoginName'),
    basicloginPass: _.isEmpty(localStorage.getItem('BasicPassword')) ? '' : localStorage.getItem('BasicPassword')
  };
  return obj;
};

動作確認

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 を連携してみよう(陳列場所確認アプリ編) もぜひ参考にしてみてください。