MESH ボタンで来場者の人数を集計しよう

目次

はじめに

さまざまなイベントで製品を紹介する際、Cybozu ブースにはたくさんのお客様がお立ち寄りくださいます。
そんな中、次のことが気になります。

  • いったいどのくらいの人がブースに立ち寄ってくれているのだろう?
  • 1 時間に何人?スタッフの対応が忙しいのはいつごろ?

ブースに立ち寄ってくれた方の数をただカウントするだけではわかりません。
せっかくだから、データを残したい!分析したい!
そこで、MESH のボタンタグで数をカウントし、kintone へデータ登録することで、簡単に集計やデータ分析ができるようなしくみを作ってみました。

MESH の詳細は MESH (External link) を確認してください。

概要

MESH ボタンを押したら、kintone のアプリにレコードを登録します。

  • ボタンを 1 回押す:カウントを +1 する。
  • ボタンを長押しする:カウントを -1 する。

カウントのマイナスもできるので、間違って押したときも安心!
アプリのレコードには、人数カウント用のフィールドのほかにイベント名、日付、時刻フィールドを用意しておきます。
これで、「どのイベント」で「いつ」に「何人」きたのかがわかりますね。

注意事項

  • MESH の近くにスマホがないと動作しません。

このカスタマイズの運用イメージ

MESH ボタンを押して、ブースに立ち寄ってくれた方の人数をカウント。
そして kintone に蓄積されたデータを利用して、簡単にさまざまな集計が可能になりました!

集計例

これらのサンプルは架空のデータです。

イベントの日ごとの来場者推移

イベントごとの来場者数

イベントの来場者割合

来場者数の集計表

kintone の設定

kintone アプリの作成

次のフィールドをフォームに設置します。

フィールド名 フィールドタイプ フィールドコード 初期値
イベント名 文字列(1 行) EventName
来場日 日付 CountDate レコード登録時の日付を初期値にする
来場時間 時刻 CountTime レコード登録時の時刻を初期値にする
人数カウント 数値 Count

APIトークンの生成

レコード追加権限のある API トークンを生成します。

アプリ ID と API トークンは MESH の設定で利用するのでメモしましょう。
アプリ ID は URL から確認できます。
投稿したいアプリを開きます。
その URL が https://sample.cybozu.com/k/674/ の場合、「674」がアプリ ID になります。

MESH の設定

SDK のアカウント登録

MESH SDK (External link) からアカウントを登録します。

SDK にインポート

SDK にログインし、「Create New Tag」をクリックします。
「Import」をクリックします。

次の countUp.json を貼り付けて、「Load JSON」をクリックします。

countUp.json
 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{
  "formatVersion": "1.0",
  "tagData": {
    "name": "来場者カウント",
    "icon": "data:image/jpeg;base64,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",
    "description": "kintoneの来場者カウントアプリにレコードを登録する",
    "functions": [
      {
        "id": "function_0",
        "name": "postToApp",
        "connector": {
          "inputs": [
            {
              "label": "Plus"
            },
            {
              "label": "Minus"
            }
          ],
          "outputs": []
        },
        "properties": [
          {
            "name": "ドメイン名",
            "referenceName": "domain",
            "type": "string",
            "defaultValue": "{subdomain}.cybozu.com"
          },
          {
            "name": "アプリケーションID",
            "referenceName": "appId",
            "type": "number",
            "defaultValue": "0"
          },
          {
            "name": "APIトークン",
            "referenceName": "apiToken",
            "type": "string",
            "defaultValue": "your api token"
          },
          {
            "name": "イベント名",
            "referenceName": "EventName",
            "type": "string",
            "defaultValue": "your event name"
          }
        ],
        "extension": {
          "initialize": "",
          "receive": "runtimeValues.receive = index;\nreturn {\n\tresultType : \"continue\",\n\truntimeValues : runtimeValues\n};",
          "execute": "/*\n * MESH sample program\n * Copyright (c) 2017 Cybozu\n *\n * Licensed under the MIT License\n*/\nvar url = \"https://\" + properties.domain + \"/k/v1/record.json\";\nvar appId = properties.appId;\nvar apiToken = properties.apiToken;\nvar eventName = properties.EventName;\nvar receiveValue = runtimeValues.receive;\n\n// どのInput Connectorから受け取ったか\nif (receiveValue == 0 ) {\n\tvar cntValue = 1;\n} else {\n\tvar cntValue = -1;\n}\n\n// レコードに設定する値\nvar data = {\n\t\"app\": appId,\n\t\"record\": {\n\t\t\"EventName\": {\n\t\t\t\"value\": eventName\n\t\t},\n\t\t\"Count\": {\n\t\t\t\"value\": cntValue\n\t\t}\n\t}\n};\n\najax ({\n    url : url,\n    data : JSON.stringify(data),\n\ttype : \"POST\",\n    contentType : \"application/json\",\n    dataType : \"json\",\n    timeout : 5000,\n\theaders: {\n\t\t\"X-Cybozu-API-Token\": apiToken\n\t},\n\tsuccess : function ( contents ) {\n        log(\"success\");\n    },\n    error : function ( request, errorMessage ) {\n        log(\"error\");\n\t\tlog(request.responseText);\n\t\tlog(errorMessage);\n    }\n});\n\nreturn {\n    resultType : \"pause\"\n};",
          "result": ""
        }
      }
    ]
  }
}

インポート後、kintone の設定でメモした内容を参考に以下の Property の Default Value を書き換えます。

  • ドメイン名
  • アプリケーション ID
  • API トークン

Property の Default Value 値は、レシピにタグを登録する際、初期値として設定されるものです。
Property の値は、MESH モバイルアプリのレシピ上でも変更できます。
本 Tips の場合、イベント名はイベントの都度変更する必要があるため、レシピ上で変更します。
この設定は、後述の アプリケーションの設定 で行います。

アプリケーションの設定

モバイルに MESH アプリをインストールして新しいレシピを作成し、MESH のタグと接続します。

SDK にログインします。

右下のカスタムの追加をタップし、先ほどインポートしたカスタムタグを追加します。

MESH のボタンタグ 2 つと追加したカスタムタグをドラッグ&ドロップで配置し、以下のとおりコネクタで接続します。

レシピ上に配置したカスタムタグをタップして、イベント名を変更します。
イベント名は、kintone に登録されるレコードの「イベント名」フィールドに設定する値です。

ここでは、 SDK でタグを作成したとき の Default Value が初期設定として表示されています。
頻繁に設定を変える必要のある項目は、この画面で変更してください。
変更の少ない項目(ドメイン名や API トークン等)は、タグ作成時に Default Value で設定しておくと便利です。

レシピ上に配置したボタンタグをタップして、ボタンの押し方をそれぞれ設定します。
ボタンタグは、3 つの押し方を検知できます。

  • 1 回押されたとき
  • 長押しされたとき
  • 2 連続で押されたとき

今回は、以下のとおり設定します。

  • コネクタ 1 つめ(Plus)に接続するボタン:1 回押されたとき
  • コネクタ 2 つめ(Minus)に接続するボタン:長押しされたとき

ボタンの押し方による処理の分岐について

今回はボタンのアクションによって処理を変える必要があるため、Input Connector を 2 つ用意しました。

どの入力コネクタを利用した処理なのかは、Receive メソッド内で参照可能です。
Receive メソッドで参照した値を、メソッド間で共有できる変数(runtimeValues)に格納して利用しています。

詳細は MESH SDK Reference Manual (External link) を参考にしてください。

おわりに

ぽちぽちとボタンを押していくだけで、来場者の人数データを登録できました。
kintone ならグラフ機能が充実しているので、データの確認や集計も簡単ですね♪
ぜひいろいろなグラフや表を作成して、データを活用してみてください!

information

この Tips は、2017 年 11 月版 kintone で動作を確認しています。