GoogleフォームとAppSheetでイベント管理システム作ってみた
GoogleフォームとAppSheetでイベント管理システムを作ってみました。
イベント管理システム？
イベント管理、特に有料イベントの場合は決済が伴うのでPassMarketを使えば、決済回収のみならず、告知も出来たり、リスト化や、当日の出席管理も出来るのでとても便利です。ただ、どうしてもPassMarket上のイベント感が出てしまいます。激安なので、仕方有りませんが。
無料でクローズなイベント（会員内など）の場合、PassMarket のようにオープンなプラットフォームは合わない感じがします。やりすぎ感ありますし、ブランディング的にも。
簡単なイベントの場合、Webフォームにメールアドレス、参加者名等を登録してもらって参加者リストを作っておいて入り口でチェック、というのが普通かと思います。代表的な無料WebフォームツールのGoogleフォームを使うことも多いですね。これだと参加登録と参加者リストは出来るけど、PassMarket のような参加証の発行や参加者チェックのような機能はありません。一度 PassMarket のようなシステムを使うと、何とも不合理に感じてしまうのは、面倒くさがりの私だけでは無いでしょう。
入場のチェックはQRコードで
PassMarket でもそうですが、最近よくある入場チェックは、個人用のQRコードを事前に送付しておいて、それを提示して入場するというものです。QRコードを作成するのはいろんなアプリやサイトで出来るのですが、読んだ値を記録する場合、こんな専用のQRコードリーダーを使うか、スマホのアプリで読むことも出来るのだけど、専用リーダーは普通持っていないし、アプリもCSV等でリストを書き出す機能が無い場合が多いです。少し悩んだ後、以前触ったことがあるAppSheetを思い出しました。AppSheetのアプリにはQRコード読み取り機能もあります。
AppSheetについては過去にこんな記事も書いたけど、スプレッドシートで構造化されたデータがあれば簡単にアプリを作ることが出来ます。
基本的には以下のような流れになると思います。
.png)
GoogleフォームとSpreadsheetは標準機能だけで問題ありません。
QRコードは以下のGoogleのAPIを使えば簡単に出来ます。
https://chart.apis.google.com/chart?chs=200x200&cht=qr&chl=QRコードに埋め込む文字列
まとめて作成して、それぞれのメールに送る場合は、Google App Script（GAS）を使って Spreadsheetのリストをもとに繰り返し処理をします。
以上のように参加者を自動承認しない場合は、一旦リストを貯めてからまとめて処理をするわけですが、自動承認で良い場合は、フォームの登録をトリガー（引き金）にしてGASを使ってQRコード作成、メール送信までを自動化出来ます。以前書いた記事にフォームをトリガーにして会員カードをメール送信するGASの例があります。
今回試験的に作成したフォームは以下のようなフォームです。
Appsheetの入場チェックアプリ
AppsheetはSpreadsheet等のデータ構造から、AIがほぼ自動的にアプリを組んでいってくれます。既にデータとしてあるのはフォームからの登録者リストのみです。登録者リストだけでQRコードを読んで検証出来るか、というとそれ程簡単ではないので、QRコードを読んでログを残すようにテーブル（シート）を作成します。タイムスタンプとQRコードで読んだ文字列の2つのカラムがあれば十分です。
.png "QRコード登録用の追加シート")
ユニークIDの追加
さて、QRコードに何を読ませるか、ですが、キーになるもの、ユニーク（一意、固有）なものである必要があります。登録者が入力したメールアドレス等では、重複登録がある可能性があります。やはり運営側でユニークキーを振ってやる必要があります。
それほど気を使わない会ならスプレッドシートに連番を振っても良いと思いますが、QRコードは簡単に作成出来ますので、想定しやすい連番はセキュリティ上問題があります。
以下の簡単なスクリプトをフォームの送信トリガーに設定すれば、書き出されるスプレッドシートの最終カラムにID（回答固有のID）が追記されます。このIDはフォームの回答を再編集するときにも使われるIDです。先の上のスプレッドシートのキャプチャでは既に登録されています。
function sbmAddFID() {
let form = FormApp.getActiveForm();
let ss = SpreadsheetApp.openById(form.getDestinationId()).getSheets()[0];//最初のシート指定
let res = form.getResponses().pop();//最後取得
let rid = res.getId();//レスポンスIDを取得
ss.getRange(ss.getLastRow(),ss.getLastColumn()).setValue(rid); //最終行に記録
}
AppSheetの作成
AppSheetの画面でQuick Start --Make a new App をクリックし、Start with your own dataをクリックし、回答のスプレッドシートを選択してください。アプリ名とカテゴリを入力する画面がありますので適当に。
先程のスプレッドシートを読み込んだところの画面が以下です。まだ最初のテーブルしか登録されていません。
テーブルの設定
まずは、もう一つのデータ登録用のテーブルも追加します。矢印のところにAdd Table "QRコード" とありますので、クリックします。取り込まれ、テーブルが２つになります。
「フォームの回答」の方は通常はアプリでは編集や削除はしないでしょうから、Read-Onlyをにすると、追加のアイコンが消えます。View Columns をクリックすると、カラムの詳細設定が出来ます。KEYとLABELがタイムスタンプになっていましたが、KEYをRID、LABELをお名前に設定しました。RIDは初期登録時に何故かLongTextになっており登録出来なかったので、Textに変更しています。登録リスト表示としてタイムスタンプ等は不要なので、SHOWのチェックを外します。
「QRコード」はRead-Onlyというわけではないのでそのままスルーし、カラムのページにうつります。標準でKEYとLABELがRIDになっていましたのでそのままにし、横スクロールしてRIDのSCAN（スキャン）のところにチェックを入れます。ここにチェックを入れることで、フォームのインターフェイスでQRコードを読むことが出来るようになります。
リレーション設定
Spreadsheetはデータベースではないので、テーブル間のリレーションを設定する事は出来ないのですが、AppSheetの機能としてリレーション設定することが出来ます。
先程のQRコードのカラム設定のところで、TYPEがText型になっていますが、ここでRefを選択すると参照設定の画面が出てきます。Source table で「フォームの回答」を選択すればOKです。右上のSAVEボタンを押すと、「フォームの回答」のカラムに「Related QRコードs」というカラムが増えています。
UX（インターフェイス）設定
いまのところ、モバイルインターフェイスのメニューには「フォームの回答」しかありませんし、表示されている内容もぱっとしません。こちらを調整していきます。
左のメニューのUXをクリックすると、オススメのビューが「Add Histogram View
for QRコード」のように並んでいます。まずはここをクリックします。
データがないからか、なぜかChart（グラフ）が設定されますが、とりあえず無難なtableを選択します。初期状態だとデータがないので何も表示されません。
New Viewというのはイケてないので、View nameを「QR登録」とします。ついでに、「フォームの回答」のほうのView nameを「登録リスト」に変更し、こちらもView typeをtableに変更します。下のようなかなりそれらしい画面になってきました。「Related QRコードs」がわかりにくいので、Data のカラムの名前をQRに変更します。
AppSheetのインストールとテスト
ほぼ説明は要らないと思いますが、Google PlayやApp StoreからAppSheetをインストールしてください。Googleアカウントでログインすれば、今作成したアプリが出てきます。
QR登録の＋アイコンをクリックし、RIDの左側にあるQRコードマークをクリックするとカメラが立ち上がります。QRコードを読んでSAVEで完了です。下はQRコードを重複読み込みしたときのiPhoneの画面です。QRコードのKEYをRIDにしているので、重複した場合はエラーが出て登録できません。
事前登録リストに1がついている人はQR読み込んだ人、0はまだの人、ということで出欠のチェックが出来ます。
コメント
コメントを投稿