現役情シスが送る実践的Tips集

2020/09/23

【GAS】QRコードで簡単登録できる座席表を作ってみた

こんにちは。

今日はGASとQRコードを組み合わせてフリーアドレスな職場で使えそうな座席登録システムを作ってみました。


概要

最初に考えたのはどんなタイプの社員でも簡単に利用できるシステムであること。

在宅勤務によって社員が新たに入手したものと言えば、

在宅勤務に向いたPC・Web会議を実現する機器、そしてスマートフォンが挙げられます。

次に考えたのが開発が簡単であること。

このブログで「開発が簡単」というとそれはもうGoogleアカウントがあって「コピペ」でできることに尽きます。

GoogleAppsScriptとスプレッドシートの組み合わせが最もハードルが低い、というか最も向いていると考えました。


スマートフォンをキーとして、GASで開発できる仕組みと言えばQRコードの出番でしょう!

着席時に各座席のQRコードをスマホでピッとスキャンするだけで座席表に自分の名前が入っちゃう。

今回はそんなシステムを作ります。


作り方

スプレッドシートの準備

まずは座席表となるスプシを作ります。
下図のように「QR」「座席表」「LOG」シートを作ってください。


シートの準備ができたらスクリプトエディタを呼び出しましょう。

プログラミング

スクリプトエディタを起動したら適当に名前を付けて「コード.gs」に以下をコピペしてください。
  function doGet(e)
    var no = e.parameter.no;
    var datetime = new Date();
    var UserInfo = Session.getActiveUser().getEmail();
    var ss = SpreadsheetApp.getActive().getSheetByName('QR');
    var LogSheet = SpreadsheetApp.getActive().getSheetByName('LOG');
    var lastRow = ss.getLastRow();
    // 読み取ったQRコードから対応する座席に自分の名前を登録する
    for (var i=2; i<=lastRow; i++) {
       if (ss.getRange(i, 1).getValue() == no) {
         ss.getRange(i, 4).setValue(UserInfo);
         break;
       }
    }
    // 実行日時&メールアドレスセット
    LogSheet.appendRow(['登録完了', datetime, no, UserInfo]);
    return ContentService.createTextOutput("メールアドレス:"+UserInfo+"");
  }
こんな感じですね。

アプリを社内限定で公開

作ったプログラムをQRコードを通して実行できるように社内限定で公開します。
公開 > アプリケーションとして導入を実行してください。


下図のように選択して公開してください。
「自分のドメインなら誰でも自分のアカウントとして実行できる」みたいな意味合いです。(雑)

操作が成功したら公開URLが表示されるためコピーしてください。これを使ってQRコードを作ります。

QRコード生成

スプレッドシートに戻り「QR」シートにて1列目にヘッダを作成します。
下図はサンプルです。プログラムのコードに対応しているため各ヘッダの名前を変えるのは問題ありませんが、
座席NoをAではなくB列に変更するなんてことはやめてください。

続いてサンプルとして1つだけ座席用QRコードを生成してみます。
B2とC2にはそれぞれ以下の関数を入力してください。
  • B2:="公開URL/exec?no=" & A2
  • C2:=image("https://chart.apis.google.com/chart?chs=200x200&cht=qr&chl=" &B2)
そしてA2に適当に座席Noを割り当ててください。
下図は座席No「1001」としたサンプルです。
C2にQRコードができましたね!
Aに座席No、Bに座席Noに応じたURL、CにURLから生成したQRコードといった並びです。

ちなみにQRコードの生成はGoogle Chart APIを利用しています。
QRコードの生成は非推奨となっていますがまだまだ現役です。

スマホでスキャン

さっそく生成したQRコードをスマホでスキャンしてみましょう。
上部に出てきたリンクをタップすると・・・
実行許可確認の画面が出てきます、このあともアプリの確認が数回行われすべて許可で進むと・・・
超簡素&マスクしてるのでわかりにくいですが自分のメールアドレスが返ってきます。
そしてスプシを見てみると・・・
座席No「1001」の「座った人」にメールアドレスが入りました!

更に「LOG」シートにはしっかりと登録ログが残されています。

さてここまで来たらもうおわかりですよね?
残る「座席表」シートにフロアマップを書き込んで座席Noに対応するセルに
「QR」シートの「座った人」を表示させるようにしたら・・・
このとおりQRコードで登録できる座席表の完成です!

なお、他の人に使ってもらう場合はこのスプシの「編集権限」を与えて共有してください。
GAS経由で本人がスプシに直接書き込むことになるため編集権限が必要になります。
勝手に編集されて困るようなところは保護をかけましょう。(保護が強すぎると登録できないので注意)

補足

GAS部分をもう少し作りこめば、登録解除や座席変更、夜間に全リセットなんかも可能です。
ただし表示名をメールアドレス以外のものに変えたい場合、
現時点でGASが対応してないため別途手動でマスターデータを持つしかありません。
これは入社や異動時にメンテ工数が発生するのであまりおススメしません。。

できればもう少し権限周りを細かく制御したかったのですが、
まずは短期間で動くものを作ることを目標に取り掛かったので突っ込みはご容赦願いたい。


場所: 日本

5 comments:

  1. 「【GAS】QRコードで簡単登録できる座席表を作ってみた」に基づいて、座席表の作成に挑戦させて頂いています。QRコードを読み込んで実行したところ、下記のエラーが出てしまいます。ネットで調べましたが、GASの場合の403の書き込みがなく、理由が判明しません。どのような原因が考えられるでしょうか。ブラウザはChromeを使っています。ご教授頂けると幸いです。

    承認エラー エラー 403: disallowed_useragent
    You can’t sign in from this screen because this app doesn’t comply with Google’s secure browsers policy. If this app has a website, you can open a web browser and try signing in from there.

    You can let the app developer know that this app doesn’t comply with Google’s secure browsers policy.

    返信削除
    返信
    1. 挑戦ありがとうございます!
      ブラウザはChromeとのことですが、エラーメッセージを読んだ限りではブラウザの問題と判断できます。
      QRコードを読み取る際は一般的にカメラアプリ(あるいはQRコードリーダーアプリ)を利用されることが多いので、アプリによってはChromeではなくそのアプリ内でページにアクセスする可能性があります。(LINEやTwitterからウェブサイトに遷移する際に「アプリ内で開きますか」みたいな確認メッセージが出るアレです)
      本当にChromeで開いているかどうか確認してみてください。

      削除
    2. 返信ありがとうございます。自分自身では問題なくできるのですが、他の人に試行してもらうと全員がエラーになってしまいます。これからも試行してみます。稼働できたら、超便利だと思っていますので、頑張ります。

      削除
    3. なるほど!他の人のデバイスの状態が気になるところですね!
      更に情報が集まったら解決に向けて他にもご支援できることが出てくるかもしれません。
      解決しない場合は情報お待ちしています!

      削除
  2. 分かってきました。Googleの仕様で複数アカウントでログインしている場合、GASが動かないようです。他のアカウントからログアウトして、1つのアカウントにすると動くようです。対応策をネットで探しています。

    返信削除