Googleをフル活用して、生徒用オリジナルポイント機能とネットバンキングっぽいシステムを作ってみた

こんにちは。湯沢町にUターン後に小学生向けのプログラミング講師として活動している腰越です。この内容は現職でハマった「Google」についてご紹介をしています。

【※注意】
以前の私のように「仕事ではWindowsのエクセル・ワードが命です」という方に向けてオススメする内容です。既にGoogleを活用して仕事をされている方の閲覧はご遠慮ください。

制作のきっかけ

私がロボ団というプログラミング専門の習い事教室で勤務しています。幅広くみれば学習塾になるのでしょうが、いわゆる勉強を教える普通の学習塾とは異なる点があります。それは「学校と連動するようなテストがない」という点です。

普通の塾なら、塾で予習復習をして「学校のテストで良い点が取れるように頑張ろう！」という流れがモチベーションを上げる1つのフックになっていくのですが、そういったものがロボ団にはありません。

もちろん授業自体は楽しめるよう構成していますし、実力を知るための独自のテストは存在します。

ただ、それだけでは普段のモチベーションを高く保ち続けるのは難しい。
ということで、モチベ向上対策の1つとしてポイント機能を導入することになりました。

ポイント制度のデメリット

このポイント制度は全員とは言いませんが、一定数の生徒には効果があると私は思っています。（経験的に）
以前学習塾にいたときにも、「テストで満点とったらポイントあげる！」とかいって頑張っていた生徒もいたので。しかし、これ1度始めると中々面倒でわざわざ講師が1人ずつポイントを入れてあげないといけなかったんですよね。

そして生徒が増えれば増えるほどポイント付与にとられる時間もかかるし、更に「宿題ポイント」「小テストポイント」「登校ポイント」etc...モチベーションを上げるためとはいえ、様々なポイントチャンスを増やせば増やすほど運営者サイドはカオスな状況に.....

まぁモチベーションUPの工夫は大切ですが、それでも先生は本来教えるための準備に時間を割くべきで「ポイント加算するためにパソコン開いて、ポイント入力して...」という作業に時間が奪われるのはひじょうにもったいないなーとずっと思っていました。

ってことで、私は思いました。

よし、先生の負荷がかからないポイント機能を自作しよう！

と。

先生の負荷を減らしたポイント機能とは

極力先生のポイント入力負荷を軽減するために、私がイメージした理想の機能はQRコード決済機能です。

私の勤務する教室では授業の都合、基本生徒全員がタブレットを持っているので、読み込む道具は全員所持済み。あとは以下の機能を連動させればつくれるんじゃないかな〜と思い、作りはじめました。

①タブレットでQRコード（Google FormのURL）を読み込む
②Google Formで氏名とためる（使う）ポイントを回答するページ作成
③Google Formの回答を反映させたスプレッドシートをGASで改良
④回答したポイントの合計をデータポータルで反映

では、始めます。

QRコード作成

まずはQRコードを作成するところから始めました。

QRコード作成【無料】／QRのススメ

QRコードって簡単に作れるんですよ皆さん...（これは常識なのでしょうか？私は現職場に入るまで知りませんでした。。。）

ちなみに謎の恐竜(？)アイコンがいてもOKなら、Google Chromeでも右上のボタン押せば作れるんですって。Googleすげぇ…

デザインにこだわらないならGoogle Chromeで作成した方が圧倒的に楽です。

これを大手QRコード会社風にデザインをアレンジ。

これで生徒が読み込む準備は完了。よし次。

ポイント回答用フォームの作成

次に万能のフォームアイテム「Google Form」でポイントを入力するための項目を作成しました。主要の質問項目としては
・生徒氏名
・ポイントをためる or 使うか（ここで質問が分岐する）
・ためる（使う）ポイント数

をいれました。

このフォームで回答してもらったら、合計ポイントを算出するために少しGASをいじる必要があります。

sum関数が使えるようにGASでセルをいじる

回答したデータはこんな感じになります。

ただしこのままだと「もらうポイント」の列と「使うポイント」の列が別になっているので、sum関数（合計値の算出）することが出来ません。
そのため、GASで「フォームの回答が送信される度に、K列に値をコピーさせ、その列で合計値を出す仕組み」にしました。

function pointMove() {

 //アクティブなスプレッドシートを取得
 let ss = SpreadsheetApp.getActiveSpreadsheet();
 let sheet = ss.getActiveSheet();
 
 //最終行の値を取得
 let lastRow = sheet.getLastRow();
 
 //指定列の2行目〜最終行までのポイントを「銀行残高」のセルへコピー
 for (let i=2; i <= lastRow; i++){
   
   let getCell = sheet.getRange(i, 5); //もらうポイント
   let payCell = sheet.getRange(i, 6); //つかうポイント
   
   //もしgetCell（もらうポイント）が空欄でない場合
   if(!getCell.isBlank()){
     //もらうポイントをK列の銀行残高に値をコピー
     sheet.getRange(i, 5).copyTo(sheet.getRange(i, 11),{contentsOnly:true});
   
  //もしpayCell（使うポイント）が空欄でない場合
   }else if (!payCell.isBlank()){
    　　//使うポイントをK列の銀行残高に値をコピー
     sheet.getRange(i, 6).copyTo(sheet.getRange(i, 11),{contentsOnly:true});
   }
 }
}

上記コードはこれまでの先人達のコードを参考に初めて自分で書いたため、最善のコーディングかはわかりませんが、一応コピペで機能はします。

上記コードを貼り付けたあとは、トリガーと呼ばれる「プログラミングを自動で実行する設定」を行います。

上記設定をすることで、フォームの回答が送信されると自動でpointMoveの関数が実行されることになります。

これでポイント残高が1列に集結できるので、合計値を出せるようになりました。

ネットバンキング風画面の作成

最後にこの残高を生徒が自分で見れるようにするために、スプレッドシートのデータをGoogleデータスタジオ（データポータル）なるものに反映させました。

空のレポート押して

データ元をスプレッドシートにして

グラフを追加で必要なグラフを選んで...

ペタペタ貼っていくと簡単にそれっぽいのが出来ます。

どの列の情報をグラフに読み込むか等、細かな設定はあるものの、スプレッドシートのデータを表やグラフを自動でまとめてくれる優れもの。
さらにフォームが更新される度にグラフも同時更新されます。
先生がポイントを操作する必要は皆無。

これを作ったら、このページのリンクを生徒に教えて常に自分のポイント残高を閲覧することが可能。

実際に運用してみて修正・改訂はしていくと思いますが、ひとまずこれでシステムは完成。

まとめ

やればやるほどGoogleの凄さを痛感します。

今後もプログラミング未経験者だった者（＝私）の目線で、自分の仕事で便利だった機能や、皆さんにも転用できそうな機能が作れれば記録していこうと思います。

ではではまた。