【お知らせ】塾専用HP作成サービス
こんにちは、「chotto」の開発と運営をしているタカフミです。
この度、Googleアカウントを持っていたら誰でも無料で使える学習塾用の入退室システムを作りました。
便利な機能がたくさんついた入退室システムがたくさんありますが、正直なところ登録したアドレス宛てに「●●さんが入室・退室しました」と送信される機能があれば十分なのではないかと思います。
記録の手間が省けるようにQRコードを読み取ることで簡単に入退室記録ができるものとなっています。
ご自身のGoogleドライブ上にスプレッドシートを設置するため、無料で使い続けることができます。
入退室システムの流れ
教室でどのように使うのか流れを簡単に説明させていただきます。
🏫 教室側の流れ
スプレッドシートに生徒情報を登録
スプレッドシート上で生徒の名前、メールアドレスなどの情報を登録していきます。
QRコードを作成する
スプレッドシート上のボタンをクリックして、各生徒さん用のQRコードを一括作成します。
作成されたQRコードはGoogleドライブ上に保存されます。
入退室用のカードを配布する
作成したQRコードをカードなどに印刷して生徒さんに配布します。
パソコンやタブレットなどを設置する
カメラが搭載されたパソコンやタブレットなどで入退室アプリを起動させて準備完了です。
🙍♂️ 生徒側の流れ
QRコードをかざす
入退室アプリが起動しているタブレットなどのカメラにQRコードをかざします。
確認画面でボタンをタップする
確認画面が表示されるので「入室する」または「退室する」のボタンをタップしてもらって完了です。
登録済みのメールアドレス宛に入退室の連絡メールが自動送信されます。
入退室システムの導入方法
入退室システムの導入方法について解説していきます。
図解で分かりやすく解説していきますので、始めてスプレッドシートを使う人でも安心してください。
🎬 導入方法を動画でみたい方はこちら
動画内で出てくるスプレッドシートのダウンロードフォームはこちらです。
1. Googleドライブに入退室システム用のフォルダを作成する
Gmailにログインした後で、Googleドライブに移動します。
左側のメニューより「マイドライブ」をクリックします。
フォルダ一覧が表示されるので任意のフォルダに移動します。
フォルダが決まったら、入退室システムを設置するフォルダを新規に作成します。
画面上で右クリックをして「新しいフォルダ」をクリックします。
「入退室アプリ」と入力して「作成」をクリックします。
作成された「入退室アプリ」をダブルクリックして中に入ります。
さらにその中で新しく「qr_code」という名前のフォルダを作成します。
次のようにフォルダが作成されていれば大丈夫です。
2. スプレッドシートをダウンロードする
次に、こちらのフォームからメールアドレスを入力してスプレッドシートのダウンロードリンクを入手します。
オリジナルのスプレッドシートが表示されたら、上部メニューより「ファイル」をクリックして「コピーを作成」をクリックします。
ポップアップが表示されるので名前を「入退室アプリ」に変更して「フォルダ」をクリックします。
フォルダが一覧が表示されるので、さきほど作成した「入退室アプリ」のフォルダを選択します。
再度、確認画面が表示されるので「コピーを作成」をクリックします。
次のようにスプレッドシートが表示されればひとまずオッケーです。
3. Appsスクリプトの初期設定を行う
次にスプレッドシートに紐づいているAppsスクリプトの初期設定を行います。
■スプレッドシートのIDを設定する
今開いている入退室アプリのスプレッドシートのIDをコピーしていきましょう。
ブラウザのURL欄に表示されているURLの「https://docs.google.com/spreadsheets/d/」と「/edit」の間に挟まれている文字列がIDになります。
下記の参考画像でいうと「1Q96KRdboxVAs〜」という文字列です。
この文字列を右クリックなどでコピーしたら、スプレッドシートの上部メニューから「拡張機能」をクリックして「Apps Script」をクリックします。
Apps Scriptが起動したら左メニューより「main.gs」をクリックします。
右側の編集画面の上部にある「sheetId」のところにコピーした文字列を貼り付けます。文字列は「’（シングルコーテーション）」で囲ってください。
■教室名を設定する
次に「schoolName」のところに教室名を入力します。
- schoolName = ‘ABC英語塾’
■送信元メールアドレスを設定する
最後に「fromMail」のところに送信元のメールアドレスを設定します。
ここに入力するメールアドレスはGmailで使用しているメールアドレスを入力してください。
- fromMail = ‘info@abc.com’
以上でApps スクリプトの設定は完了です！
4. 生徒情報を登録する
次に生徒情報を登録していきましょう。
入退室アプリのスプレッドシートを開いて、下の方にある「生徒情報」タブをクリックします。
サンプルデータのように「ID」と「名前」「メールアドレス」を入力していきます。
「ID」は重複しないように気をつけてください。
カンマ区切りで入力することで、メールアドレスを複数設定することも可能です。
- kensuke@sample.com,yamada@sample.com
5. QRコードを作成する
生徒情報の入力が完了したらQRコードを作成していきましょう。
「入退室アプリ」のスプレッドシートの上部より「操作メニュー」をクリックして「QRコードを生成する」をクリックします。
認証画面が表示されるので「OK」をクリックします。
Googleアカウントを選択する画面が表示される場合があるので、その際には入退室アプリを保存したGoogleドライブのGoogleアカウントを選択します。
アクセス権限の確認がでるので「許可」をクリックします。
もう一度、「入退室アプリ」のスプレッドシートの上部より「操作メニュー」をクリックして「QRコードを生成する」をクリックします。
QRコードの生成に時間がかかる場合があるので、しばらく待ちます。
「QRコードの生成が完了しました」と表示されれば作成完了です。
「入退室アプリ」フォルダ内にある「qr_code」フォルダをダブルクリックします。
各生徒用のQRコード画像が保存されているのが分かるかと思います。
あとは、このQRコードをカード等に印刷して配布します。
6. パソコンやタブレットなどで入退室アプリを起動させる
最後に入退室アプリをパソコンやタブレットなどで起動できるように準備をしていきましょう。
さきほど開いたAppScriptの画面を開いたら「デプロイ」をクリックして「新しいデプロイ」を選択します。
次の様に設定して「デプロイ」をクリックします。
- 「新しい説明文」を「v1」
- 「次のユーザーとして実行」を「自分」
- 「アクセスできるユーザー」を「全員」
デプロイが完了するとアプリのURLが表示されます。
このURLをパソコンやタブレットで開くことで入退室アプリを起動できるようになります。
初回起動時にはカメラの権限がオフになっているので、「Request camera permissions」をクリックしてください。
ポップアップが表示されるので「許可する」をクリックします。
あとは起動したタブレットなどを教室の入口などに設置して完了です。
