GASを活用したQRコードによるスムーズな出席確認システムの構築方法

GAS

イベントや会議、授業の出席確認に役立つシステムをご紹介します。主催者は参加者のメールアドレスをGoogleスプレッドシートに登録するだけで、簡単に出席者向けのQRコードを一斉送信できます。

参加者は自身のスマートフォンなどでQRコードを提示するだけで、入室時やイベント中に主催者がスキャンして出席を確認できます。

また、このシステムはバーコードの読み込みにも対応しています。

Googleスプレッドシートから一括でQRコードを送信する方法

Googleスプレッドシートに入力された宛先情報を活用し、Googleドキュメント内のメール本文に差し込みを行い、スムーズにメールを送信する方法をご紹介します。

QRコードの作成

QRコードはの作成は以下のURLを使用することで可能です。

“https://chart.googleapis.com/chart?chs=[size]x[size]&cht=qr&chl=”+str_QRコードの情報

もしGoogleのQRコード作成に関して詳細を知りたい方は、こちらのページを参照してください。詳しい情報をさらに探求したい方におすすめです。

QR Codes  |  Infographics  |  Google for Developers

メール本文になるGoogleドキュメントの差し込み作成

Googleドキュメントのシンプルなテンプレートです。

{ }で囲まれた箇所には、Googleスプレッドシートの内容が差し込まれます。

皆様のメールの内容に合わせて適宜変更してご利用ください。

{番号}
{氏名}さん

以下のURLにアクセスして、表示されたQRコードを提示してください。

QRコードのURL
{QR_URL}

Googleスプレッドシートで宛先リストを作成

下記を参考にしてメールの宛先リストを作成しましょう。

Subjectには、メールの件名を入力してください。

なお、今回はMessaeの欄を使用しません。

GASの作成

拡張機能をクリックし、下に表示されたApps Scriptをクリックしてください。

下記のコードをコピーしてペーストしてください。

ここにGoogleドキュメントのアドレスを入れる}は、ご自分で作成したGoogleドキュメントのアドレスをコピーしてペーストしてください。

https://docs.google.com/document/d/DOCUMENT_ID/editのDOCUMENT_IDです。

詳細を知りたい方は、こちらのページを参照してください。詳しい情報をさらに探求したい方におすすめです。

Mail merge  |  Google Docs  |  Google for Developers

function sendEmails() {
  //スプレッドシートのAppを呼び出す
  var sheet = SpreadsheetApp.getActiveSheet();  //アクティブなシートの取得
  var E_Mail_Sent = "送信済";
  var last_row = sheet.getLastRow();  //シートの最終行の取得
  var last_column = sheet.getLastColumn();  //シートの最終列の取得


  //メール本文のDocファイルの内容を取得
  var doc_URL ='https://docs.google.com/document/d/{ここにGoogleドキュメントのアドレスを入れる}/edit'; //メール本文のファイルであるDocファイルの設定
  var doc_Test = DocumentApp.openByUrl(doc_URL); //ドキュメントを取得
  var str_Doc = doc_Test.getBody().getText(); //ドキュメントの内容を取得

  //スプレッドシートの内容を取得
  var dataRange = sheet.getRange(2,1,last_row-1,last_column-1)  //2行目1列目から最終の行と列まで選択
  var data = dataRange.getValues();
 for (var i = 0; i < data.length; ++i) {
    var row = data[i];
    var str_number = row[0]; //A列の番号
    var str_name = row[1]; //B列の氏名
    var email_address = row[2]; //C列のEmailアドレス
    var email_sent = row[5]; //F列 送信済み
 
 //QRコードを作成
    var strUrl = "https://chart.apis.google.com/chart?chs=200x200&cht=qr&chl=" + str_number + str_name;
    var strBody = str_Doc.replace(/{QR_URL}/,strUrl).replace(/{氏名}/,str_name).replace(/{番号}/,str_number); //置換
    Logger.log(strBody); //ドキュメントの内容をログに表示させる

  //E-mailで送信
    if (email_sent != E_Mail_Sent) { //送信済の確認
    var subject = row[3];//C列
    GmailApp.sendEmail(email_address, subject, strBody); //メールを送信する
    sheet.getRange(2 + i,last_column).setValue(E_Mail_Sent); //F列を送信済にする
    SpreadsheetApp.flush(); //変更を即反映させる
      }
    }
 }

プロジェクトを保存してたら、「実行」をクリックしてください。

正常に動作すれば、以下のような形式でメールが送信されます。

リンクをクリックすると、QRコードが表示されます。

Gmailとスプレッドシートとの連携については、以下のサイトで詳しく説明しています。

Google Apps Script Gmailとスプレッドシートの連携

QRコードを読んで、Googleスプレッドシートに保存する方法

QRコードを読み取って、簡単に情報をGoogleスプレッドシートに保存する方法をご紹介します。

この方法を使えば、スキャンしたQRコードのデータを効率的に整理し、必要な情報を一元管理することができます。QRコードを活用して作業をスムーズに進める方法をご覧ください。

ファイルの作成

Code.gsとindex.htmlの2つのファイルを作成します。

Code.gs

const SHEET_NAME = 'ScanQRData';

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}


function onScan(text) {
  SpreadsheetApp.getActiveSpreadsheet()
    .getSheetByName(SHEET_NAME).appendRow([new Date(), text]);
}

index.html

<!DOCTYPE html>
<html>
  <head>
  <base target="_blank">
  </head>
  <body>
    
    <div id="reader" style="width:600px;"></div>
    <div id="result"></div>
    
    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
    
    <script>
      let CURRENT_CODE = '';
      let html5QrcodeScanner = new Html5QrcodeScanner("reader", { fps: 50, qrbox: 250});
      
      let QRresult = document.querySelector('#result');
      const append = (decodedText) => {
            QRresult.innerHTML += `${decodedText}<br>`; 
      };


      const onScanSuccess = (decodedText) => {
        console.log('onScanSuccess', decodedText, CURRENT_CODE);
          if (CURRENT_CODE !== decodedText) {
              CURRENT_CODE = decodedText;
              append(decodedText);
    
              google.script.run
              .withFailureHandler(function (error) {
              append(`"${decodedText}"を保存できません: ${error}`);
               })
             .onScan(decodedText);
          }
       };

      html5QrcodeScanner.render(onScanSuccess);
      

    </script>
  </body>
</html>

このように2つのファイルを作成してください。

デプロイして実行してみてください。

QRコードを読ませて、スプレッドシートに保存されていたら成功です。

ファイルの説明

doGet()

GASでWebアプリを作成して、QRコードを読み込みます。

これにはdoGet関数を使います。これの関数を使うと、GASでWEBサイトを作成して表示することができます。

GASのコードを書いて、デプロイした際に決められたURLにアクセスすると、doGet(){   }関数の内容が実行されます。ここではindex.htmlが実行されることになります。

onScan(text)

SHEET_NAMEで指定したシートにscanしたQRコードの内容を保存します。

HTML5 QR Code scanner

QRコードの読み込みには、HTML5 QR Code scannerを使います。

html5-qrcode
A cross platform HTML5 QR Code & bar code scanner. Latest version: 2.3.8, last published: a year ago. Start using html5-qrcode in your project by running `npm i...

npmはnode package managerの略です。ソフトウェアを管理して、インストールをサポートします。

UNPKGで公開されるているパッケージはscriptタグで指定することで、ライブラリをローカルに落とさずに使用できます。インターネットに接続してないと使用できないという欠点がありますが、GASでのアプリケーションはインターネットに接続されていますので、非常に便利です。

ライブラリ

Request camera access each time my QR scanner runs
I am using the following code to develop a qrcode scanner (source: function onScanSuccess(decodedText, decodedResult) { console.log('Code matche.....

一番参考にしたのは、こちらです。

GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
A cross platform HTML5 QR code reader. See end to end implementation at: - mebjas/html5-qrcode

<div id="reader" style="width:600px;"></div>

ここでhight は、カメラの画像で決まるため指定しないほうが良いとのことです。

<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>

UMD (Universal Module Definition) javascript codeを取ってきます。

QRコードの内容はinnerHTMLプロパティを使って取得します。

   let QRresult = document.querySelector('#result');
      const append = (decodedText) => {
            QRresult.innerHTML += `${decodedText}<br>`; 
      };

注意!同じQRコードは2回目以降保存されません。さらに、スプレッドシートの名前が異なる場合や保存できない場合はエラーメッセージが表示されます。

const onScanSuccess = (decodedText) => {
        console.log('onScanSuccess', decodedText, CURRENT_CODE);
          if (CURRENT_CODE !== decodedText) {
              CURRENT_CODE = decodedText;
              append(decodedText);
    
              google.script.run
              .withFailureHandler(function (error) {
              append(`"${decodedText}"を保存できません: ${error}`);
               })
             .onScan(decodedText);
          }
       };

最後に

ここで紹介する本は、Googleの強力なスクリプト言語を使って、G Suiteのアプリケーションをカスタマイズ・自動化する方法を解説した書籍です。この本を使えば、初心者でも簡単にGoogle Apps Scriptをマスターし、効率的なタスクの自動化やパーソナライズされたツールの作成が可能になります。

豊富な実例とわかりやすい解説で、読者はスクリプトの基礎から応用まで幅広く学ぶことができます。また、Google Apps Scriptの魅力的な機能や活用事例も紹介されており、ビジネスや個人のニーズに合わせたカスタマイズが可能です。Google Apps Scriptの知識を深めたい方や、効率的な業務フローの構築を目指す方にとって必読の本です。ぜひ、あなたのスキルアップと業務効率化に役立ててみてください。


タイトルとURLをコピーしました