Tips

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