![見出し画像](https://assets.st-note.com/production/uploads/images/124798924/rectangle_large_type_2_1536541e2c1915222c9e2a793934ad41.png?width=1200)
Googleフォームでイベント管理
はじめに
今回はQRコードを利用したイベントの管理をしたいと思います。
仕組み
プロセスは大きく2つ
1.申し込みの管理
2.イベント当日の出席管理
に分かれます。
【申し込みの管理】
①フォームから申し込み
②定員を更新
③QRコードを生成
④返信用本文を抽出&返信
【イベント当日の出席管理】
⑤QRコードスキャン
⑥出席記録
![](https://assets.st-note.com/production/uploads/images/124750328/picture_pc_e9062f366cc3b8a0b66283cf2ab3d5ea.png?width=1200)
それでは早速作っていきます。
手順①フォーム作成
質問項目の設定
氏名
参加日時(ラジオボタン、チェックボックスのいずれでも可)
※参加日時の定員の記載方法は全角の()で囲い、残'人数'名としてください。それ以外は自由に作成してもらって大丈夫です。
↓赤枠のIDを控えておいてください。
![](https://assets.st-note.com/production/uploads/images/124797243/picture_pc_1d0ac1f955d5fd9eb3a02c7c8ec1dd77.png?width=1200)
メールアドレスの収集
設定タブ > デフォルト > デフォルトでメールアドレスを収集する
![](https://assets.st-note.com/production/uploads/images/124507592/picture_pc_2f512cceb257befa52917cc055110ef7.png?width=1200)
スプレッドシートと連携
回答 > スプレッドシートへリンク
![](https://assets.st-note.com/production/uploads/images/124507531/picture_pc_db79b862ecf3671a85daf2955787fec2.png?width=1200)
手順②スプレッドシートの用意
フォームの回答1シート
これは特に何も触らず、そのままで大丈夫です。
定員シート
ここに開催日ごとの定員情報を格納します。
【カラム構成】
A列:日程
B列:定員
C列:出席確認
※C列は自動算出されるので、空白で問題ありません。
![](https://assets.st-note.com/production/uploads/images/124637078/picture_pc_6ee94b7662960a8ea0544ff0d4b9ec01.png?width=1200)
オプションシート
メール送信やその他諸々の設定を行います。
【カラム構成】
A1:送信元アドレス
A2:表示名
A3:件名
A4:CC
A5:BCC
A6:返信先アドレス
A7:フォームのID※1
A8:定員を変更したい質問の番号※2
A9:日程回答集計列※3
A10:QRコード保存用フォルダID
A11:返信用本文ID
※1.手順①で控えたフォームのIDを格納してください。
※2.フォームでの日程選択質問の番号です。メールアドレス収集の分は質問にカウントしません。今回の場合だと2になります。
※3.フォームの回答1シートでの日程選択の回答が集計される列です。今回の場合は4になります。
![](https://assets.st-note.com/production/uploads/images/124796942/picture_pc_0d17d81aaf4237d84a08eca263ba10a0.png?width=1200)
出席確認シート
【カラム構成】
A列:スキャン
B列:参加者氏名
C列:開催日
![](https://assets.st-note.com/production/uploads/images/124775071/picture_pc_6944afc681c01da76f70b7d8e9fae36b.png?width=1200)
返信用本文の用意
メール冒頭によくある「○○様」の部分はプログラムで定義してありますので、ここではそれ以降の文章を記述してください。
尚、申し込み内容の確認に必要な情報は回答により変動するので、その部分は"${day}$"としてプログラムから置換します。
赤枠のIDをスプレッドシートのオプションのB11にコピペしてください。
![](https://assets.st-note.com/production/uploads/images/124775166/picture_pc_a622186d0ccb0782f9c84eb4a8b5d76f.png?width=1200)
QRコード保存用フォルダ作成
マイドライブ > 新規フォルダ作成
![](https://assets.st-note.com/production/uploads/images/124780914/picture_pc_9f262641b86475669e272c211c3568ea.png?width=1200)
↓の赤枠のIDをオプションシートのB10にコピペ
![](https://assets.st-note.com/production/uploads/images/124780961/picture_pc_93c420951226dabbcfac5687e4ac31a0.png?width=1200)
手順③GAS
GASとは・・・
Google Apps Scriptという、Googleのサービスをカスタムできるプログラミングのサービスです。(Microsoft officeでいうVBAみたいな)
これを使って申し込み時の定員更新や返信を自動で実行します。
スプレッドシート > 拡張機能 > App Script
![](https://assets.st-note.com/production/uploads/images/124775566/picture_pc_9f34b84a8a4a766dd66bdfab08f8a908.png?width=1200)
するとこのような画面に行くので、一旦function myfunction()…を全て削除。
そこに↓を貼り付ける
// フォームへの回答受信時に毎回自動的に実行される関数
function exe(){
// 処理中に回答が上書きされるのを防ぐ為、コンテナされているスプレッドシートをロック
const lock = LockService.getDocumentLock()
if(lock.tryLock(1000*20)){
const ss = SpreadsheetApp.getActive()
const ansSh = ss.getSheetByName("フォームの回答 1")
const opSh = ss.getSheetByName("オプション")
const optionValues = opSh.getDataRange().getValues()
const formId = optionValues[6][1] //GooleフォームのID
const choiceIndex = optionValues[7][1] - 1 // 定員を変更したい質問の番号-1
const limSh = ss.getSheetByName("定員")
const choiceCol = optionValues[8][1] // 変更したい質問の回答列
// reloadChoices関数を呼び出し、フォームの定員を更新⇒戻り値として申込日時の定員超過是非を受け取りdateに格納
let date = reloadChoices(formId,choiceIndex,choiceCol,ansSh,limSh)
const answer = ansSh.getRange(ansSh.getLastRow(),1,1,ansSh.getLastColumn()).getValues()
// 定員が超過していないイベントのみ、QRコードを発行
const folderId = optionValues[9][1] // QRコードを格納するフォルダのID
const name = answer[0][2]
let success = []
let error = []
let attachments = Object.keys(date).map(key => {
if(date[key] == true){
const fileName = `${name} 様 ${key}`
let data = `${name}*${key}`
success.push(key)
return createQR(data,folderId,fileName,"png")
}else{
error.push(key)
}
})
// 発行したQRコードをZipファイルにまとめる
const file = Utilities.zip(attachments,`${name} 様 QRコード.zip`)
// 自動返信
const toAdress = answer[0][1]
const fromAdress = optionValues[0][1]
const fromName = optionValues[1][1];
const mailsubject = optionValues[2][1];
const cc = optionValues[3][1];
const bcc = optionValues[4][1];
const replyTo = optionValues[5][1];
const docId = optionValues[10][1]
let text = DocumentApp.openById(docId).getBody().getText()
let replace = ""
success.length > 0 ? replace += "\n下記日程でお申込みを承りました。\n\n【お申込み日時】\n\n・" + success.join("\n・") + "\n\n添付にてQRコードを送付していますので入場の際にご提示をよろしくお願いいたします\n":"";
error.length > 0 ? replace += "\n下記日程のお申込みに失敗しました。\n\n【お申込み失敗日時】\n\n・" + error.join("\n・") + "\n\n大変申し訳ございませんが定員超過により正常に予約できませんでした。":"";
let body = text.replace("${day}$",replace)
sendEmail(toAdress,mailsubject,name,fromAdress,fromName,cc,bcc,replyTo,file,body)
}
}
// フォームの定員を更新する関数
function reloadChoices(formId,choiceIndex,choiceCol,ansSh,limSh){
// フォームを取得
const form = FormApp.openById(formId)
const items = form.getItems()
const id = items[choiceIndex].getId()
const check = form.getItemById(id).asCheckboxItem()
let choices = check.getChoices()
choices = choices.map(choice => {
return choice.getValue()
})
// 現在の予約情報を全て算出し、予約情報を空白なしの一次元配列に成形
let reserved = ansSh.getRange(2,choiceCol,ansSh.getLastRow() - 1,1).getValues()
reserved = reserved.map(arg => {
if(arg[0].includes(",")){
const value = arg[0].replace(/[\s\t\n]/g,"")
return value.split(",")
}else{
return [arg[0]]
}
})
let answers = reserved[reserved.length-1] //最終行だけ別の定数に格納
answers = answers.map(arg => {
const end = arg.indexOf("(残")
return arg.substring(0,end)
})
reserved = reserved.flat() //一次元配列に変換
// 予約情報のうち(残〇名)の部分を削除
reserved = reserved.map(arg => {
const end = arg.indexOf("(残")
return arg.substring(0,end)
})
// 予約状況をカウント
const count = {}
reserved.forEach(arg=>{
count[arg] = (count[arg] || 0)+1
})
// 定員情報を抽出して連想配列に変換
let limits = limSh.getRange(2,1,limSh.getLastRow() - 1,limSh.getLastColumn()).getValues()
let limit = {}
limits.forEach(arg=>{
return limit[arg[0]] = arg[1]
})
// 定員からカウントした数を引いて、選択肢を再生成
let options = {}
Object.keys(count).map(key =>{
return options[key] = limit[key]-count[key]
})
// 選択肢を用意
options = Object.keys(limit).map(key => {
options[key] != undefined ? limit[key] = options[key] : "";
limit[key] < 1 ? delete limit[key] : "";
return `${key}(残${limit[key]}名)`
})
// 最新の回答が定員超過していないかチェック
let answer = {}
answers.forEach(arg => {
answer[arg] = true
})
Object.keys(answer).forEach(key => {
options[key] < 0 ? answer[key] = false :"";
})
// 定員が0以下のイベントを削除してフォームの選択肢を更新
Object.keys(options).forEach(key => {
options[key] < 0 ? delete options[key]:"";
})
options = options.map(arg => {
return check.createChoice(arg)
})
check.setChoices(options)
return answer
}
// QRコードを生成する関数
function createQR(data,folderId,fileName,extension){
const url = "https://chart.googleapis.com/chart?"
+ "cht=qr"
+ `&chs=200x200` // 画像のサイズ
+ `&chl=${data}`//データ
const option = {
method:"GET"
}
const qr = UrlFetchApp.fetch(url,option).getBlob().setName(`${fileName}.${extension}`)
const folder = DriveApp.getFolderById(folderId)
folder.createFile(qr)
return qr
}
// メールを送信する関数
function sendEmail(toAdress,subject,name,fromAdress,fromName,cc,bcc,replyTo,file,text) {
// オプションを設定する
const option = {
from:fromAdress,
name:fromName,
cc:cc,
bcc:bcc,
replyTo:replyTo,
attachments:file
}
// メール本文を作成する
const body =`${name}様\n\n${text}\n`
// メールを送信する
GmailApp.sendEmail(toAdress,subject,body,option)
}
// 出席情報をカウントする関数
function calcAttendees(){
const ss = SpreadsheetApp.getActive()
const atdSh = ss.getSheetByName("出席確認")
let attendees = atdSh.getRange(2,3,atdSh.getLastRow() - 1,atdSh.getLastColumn()).getValues()
// 現在の出席状況を開催日ごとにカウントしてオブジェクトに変換
const count = {}
attendees.forEach(arg=>{
count[arg[0]] = (count[arg] || 0)+1
})
const limSh = ss.getSheetByName("定員")
const limits = limSh.getRange(2,1,limSh.getLastRow() - 1,limSh.getLastColumn()).getValues()
// 定員シートの情報をオブジェクトに変換し出席情報を初期化
let limit = {}
limits.forEach(arg =>{
limit[arg[0]] = 0
})
// 初期化された出席情報と現在の出席情報を照合し、出席情報があるもののみ置換
Object.keys(limit).forEach(key => {
count[key] != undefined ? limit[key] = count[key] : "";
})
// 更新された出席情報をオブジェクトから多次元配列に変換
const result = Object.keys(limit).map(key => {
return [limit[key]]
})
limSh.getRange(2,3,result.length,1).setValues(result)
}
// シートが開いたときにタブを自動で生成する関数
function onOpen(){
const ui = SpreadsheetApp.getUi()
const menu = ui.createMenu('出席集計')
menu.addItem('実行','calcAttendees')
menu.addToUi()
}
手順④AppSheet
出席の確認時、イベント主催者側がこれを使ってQRコードをスキャンし出席管理します。
AppSheetを作成
スプレッドシート > 拡張機能 > AppSheet > アプリを作成
![](https://assets.st-note.com/production/uploads/images/124776437/picture_pc_3bae34aefc8695dcfb55e0253560232a.png?width=1200)
出席確認データを追加
デフォルトではおそらく「フォームの回答1」が追加されているはずなので、他のデータを追加します。
add new Dataをクリック
![](https://assets.st-note.com/production/uploads/images/124776635/picture_pc_53b412162d3b1361ec25a7c5aa5b8e64.png?width=1200)
Add Table "出席確認"をクリック
![](https://assets.st-note.com/production/uploads/images/124777175/picture_pc_9eeb12657f4a14f827a97ac203aa3fa0.png?width=1200)
Add This Tableをクリック
![](https://assets.st-note.com/production/uploads/images/124777263/picture_pc_81a188c66ad73577b063d843cf3b3b02.png?width=1200)
データの設定
スキャンの行 > 「SCAN?」にチェック
![](https://assets.st-note.com/production/uploads/images/124777317/picture_pc_4ed81137c47cd188a28c02daa17bd84e.png?width=1200)
関数を追加
![](https://assets.st-note.com/production/uploads/images/124778029/picture_pc_a971eba1d10ceac23fad2ae3500fc369.png?width=1200)
参加者氏名 > INITIAL VALUE
![](https://assets.st-note.com/production/uploads/images/124778141/picture_pc_80120c3110b4c5b2affcbb5c2f5927ed.png?width=1200)
開催日 > INITIAL VALUE
![](https://assets.st-note.com/production/uploads/images/124778187/picture_pc_ac3c7bc202b1ee7402eea0eca3a446a2.png?width=1200)
viewを追加
↓の赤枠クリック
![](https://assets.st-note.com/production/uploads/images/124778225/picture_pc_4739ef4acfd2dcb99053160d5302fc95.png?width=1200)
create a new viewをクリック
![](https://assets.st-note.com/production/uploads/images/124778293/picture_pc_4c77cbc4bd3decceb2566b8367c78167.png?width=1200)
View name→出席確認
For this data→出席確認
View type→deck
Position→middle
![](https://assets.st-note.com/production/uploads/images/124778477/picture_pc_663a6065d9fa5381409158078991233f.png?width=1200)
翻訳
settings > Localization
全てやってもいいですが、とりあえず出席管理時二重登録防止のために表示される警告のみ↓
![](https://assets.st-note.com/production/uploads/images/124778924/picture_pc_588d211579979f494acba9cad1942a2c.png?width=1200)
これで全ての準備が整いました。
テスト
実際に使ってみてどのように動作するかテストしましょう。
申し込み処理
まずフォームから申し込みます。
するとこのようなメールが返ってくるはずです。
![](https://assets.st-note.com/production/uploads/images/124779355/picture_pc_a3e0f05f981db7dc919122d301d01abf.png?width=1200)
ZIPファイルの中身を確認すると、二つのQRコードが格納されていることがわかります。
ファイルに保存で端末に保存しましょう。
![](https://assets.st-note.com/production/uploads/images/124779460/picture_pc_84647090eb46eeaa43a9e54e5d7c8cf4.png?width=1200)
ちなみにもう一度フォームに戻ってみると申し込んだ日程だけ定員が減っていることも確認できます。
![](https://assets.st-note.com/production/uploads/images/124779529/picture_pc_2754343c777307e6875dc5b2b1effc36.png?width=1200)
出席管理
続いて出席管理の挙動です。
出席確認 > +ボタン
![](https://assets.st-note.com/production/uploads/images/124779726/picture_pc_b86246384890f8c1296caa685d8744ab.png?width=1200)
スキャンのマーク
![](https://assets.st-note.com/production/uploads/images/124779824/picture_pc_cebcfd30d52dbde5bc9c3f3a95890b75.png?width=1200)
スキャンする
![](https://assets.st-note.com/production/uploads/images/124780204/picture_pc_203dbb0e498baf7ba3488c61bb8022c4.png?width=1200)
出席集計
定員シート > 出席集計 > 実行
![](https://assets.st-note.com/production/uploads/images/124780561/picture_pc_6b83d832fd2c070647d58918f5fa81e3.png?width=1200)
結果
![](https://assets.st-note.com/production/uploads/images/124780570/picture_pc_c5960ed2687798154134adeb2d9734f7.png?width=1200)
このように自動的に出席人数が更新されれば正常です。
まとめ
いかがでしたでしょうか?これでイベントの管理を自動化できるようになりました。使うツールが複数あるのでややこしいかもしれませんが手順に沿ってお試しください。
もし不明点や関数の解説など気になることがあればコメント欄にてよろしくお願いします。
他にもこんなサービス作って欲しいなどリクエストがあればぜひよろしくお願いします。
この記事が気に入ったらサポートをしてみませんか?