週刊SleepNel新聞

SleepNel所属のぽうひろが日々の個人開発で気になったことを綴ります。

入退室メール通知WebアプリがGoogle AppSheetで1時間で完成しちゃった話

みなさん、こんにちは。ぽうひろです。

この記事は、クロスマート・テックアドカレ9日目の記事です。
qiita.com

前日は、たるたるさんの「NewRelic初心者が資格試験を通じて学んだこと」という記事でした。
資格まで取ってしまうという前のめりさがサイコーな記事です。
現場にNewRelicを最初に導入したの私なので、詳しい人が増えて感慨深いです。
まだ読んでない方は、ぜひ読んでみてください!
qiita.com


今回はちょっとクロスマートの業務を離れまして、
「入退室メール通知WebアプリがGoogleAppSheetで1時間で完成しちゃった話」という記事を書きたいと思います。

私はクロスマートに入社する前、フリーランスで色々なことをやっていたのですが、その中の一つとして
子ども向け(小学生〜中学生くらい)のロボット・プログラミング教室をやっていまして、今もまだ続けています。

フランチャイズのため、教材は毎月本部の方から届くとはいえ、場所取りなども含め、そのほかは自分ですべてやる必要があります。

その中で、お子さんだけで通わせている親御さんから、「子どもが確実に教室に行ってるかどうかが分かりにくい」という要望が上がってきました。

お子さんは開始時刻は一緒なのですが、それぞれのタイミングで教室に来るため、その度に親御さんに連絡するわけにはいきません。
土曜日は連続で授業コマがあることもあり、入れ替わりのタイミングもなかなか忙しいです。

なんとか、これを解決する方法はないか、と考えました。

一番ラクなのは、世の中にある有料サービスを利用することでした。

nyutai.bpsinc.jp

こんな良さそうなサービスを見つけました。基本料金は3300円 で60人から人数*55円
とてもリーズナブルに思えます。

ですが個人で運営している教室。収益状況も火の車です。
せっかくエンジニアをやっていることですし、こんなに立派なシステムじゃなくても良いので「自分で作れないかな?」と考えました。
インフラ代で3300円を超えては本末転倒です。なるべく無料で、かつ、自分が使えるだけで良い、という条件でやり方を考えてみました。

仕様は以下のように考えました。

  1. スマホ or ChromeBook or Mac, Windows いずれかで動作すること
  2. 数日で開発ができること
  3. 在籍している生徒を一覧で表示できる。生徒それぞれには入退出を連絡する親御さんのメールアドレスを登録できる
  4. 入室時 or 退出時に 生徒一覧の該当生徒の入退出ボタンをおすと、登録されている親御さんのメールアドレスに時間付きでメールされる。

うちにはプログラミング教室で使っていたChromeBookがあったため、最初はGoogleSpreadSheetにマクロ作って生徒シートにボタンをつけるという方針を考えていました。
その辺りを調べていたのですが、たまたまこのようなページに辿り着きました。

cloud.google.com

Google AppSheet です。
見ると、ノーコードでアプリケーション開発と自動化ができるのがウリみたいです。Googleがノーコードの開発環境を出しているのを今回初めて知りました。

とりあえず、個人で使う分には無料というのと、調べるとメールを送信する機能も使えるようです。
今回はこちらを使って、仕様に沿ったアプリが作れないかチャレンジしてみることにしました。(うまくいけば、毎月3,300円の節約ができる!!)

何はともあれまずはGet Started

about.appsheet.com

こちらのAppSheetのホームっぽいページの右上にある「Get started」ボタンを押しましょう。

ログインの方法を聞かれますので、今回はGoogleを選びます。

権限はとりあえず全部選んでおきましょう。データ保存に使う気がします。

いつの間にかアプリ作りフェーズ

すると、こんな画面が出てきます。おや、Start with Gemini なんていうボタンが虹色に光ってますね・・・w
「せっかくなので俺はこの虹色のボタンを押すぜ」

Start with Gemini...?


すると、アプリのアイデアやプロセスを書く欄が出てきます。 もしかして、勝手に作ってくれるのか、、、?

試しに、「教室の生徒管理アプリ。生徒には親のメールアドレスを登録でき、生徒の入室/退出ボタンを押すと、親にメール通知される。」
と入力してみます。(日本語を打つと、途中でアプリを作り始めてしまうので、日本語入力する際はメモ帳などに書いてから貼り付けると良いです。)

しばらくすると、何やらデータベースのテーブルリストのようなものが提案されてきました。
Attendance Recordsが入退出レコードでしょうか。TimestampとStatusがあるのでそれっぽいですね。
Studentesは生徒、Parentsは親ですね。 Teachersは先生で、Classroomsは教室でしょうか。後ろの2つは要らなそうですね。

選ぶとテーブルの詳細が表示されます。削除もできるようなので、TeachersとClassroomsは消してしまいましょう。

削除してスッキリしました。これでCreate Appしてみましょう。

待つこと、20秒ほど(あんまり待ってない)

は? 完成した。。。?

Try it outとか書いてあるんだが?

右にスマホ画面とかタブレットとかPC画面とかに切り替えるボタンがあります。
それぞれの画面サイズに合わせて、Attendance Recordsのリストが表示されていますね。


「まさか、こいつ動くのか。。。?」


動いたあああああああああ!!!

生徒に親のメールアドレスの紐付けられています。変更して保存もできます。

データは、左メニューのDataボタンを押して、テーブルを選んでから「View data source」ボタンで別タブで見れます。

dataからテーブルを選んで、View data source

データが見れます。今回、ENTERデータを追加したのですが、ちゃんと24/12/8 で登録されています。

すごいですね・・・!! データベースとWebアプリ画面が連動して動いていますので、このままでも使えちゃいそうです。

Automationを使ってメール送信

ですが、一個だけ問題があります。 入室データを登録するとメールが送られるわけではなく、メールクライアントが開く状態です。
ここは、自動でメールが送られて欲しいですよね。自作のアクションを作りには「Automation」から作成します。


この画面からCreate my first automation ボタンを押してみましょう。


また何か聞かれていますね。 Attendance Recordsにデータが作られたらメールを送信したいので
「When a new Attendance Records record is created, 」と途中まで入力すると、サジェストが出ました。これを選びましょう。

すると、なんだかビジュアルプログラミングっぽいフロー図が出てきました。

このSend a notificationを押して、詳細を設定していきます。
メールを送りたいので、Send an Email を選びます。

宛先は、Toの部分で設定しますが、これをStudentの親のメールアドレスにしたいですね。

Addを押して、フィルタボタンを押し、入力フィールドをクリックします。


送りたい、ParentsのEmailをInsertします。

あとは、メールタイトルや本文をカスタマイズします。

メールのFromもいじれます。ただし、無料版ではメールアドレスFromまでは指定できません。必ずFromはnoreply@appsheet.comからになりますのでご注意ください。

ここまでできたら、実際にレコードを登録してみましょう。

メールが届きました!!  やったね!!

まとめ

いかがだったでしょうか。
あっという間にGoogle AppSheetで便利なWebアプリが作れてしまいました。
Google Workspaceと連携していると、もっといろいろなことができるみたいなので、会社の業務システムなどで便利なツールを簡単につくれるかもしれませんね!

今回は個人向けアプリのため、利用者数もデータ量も少なくFreeプランでも良いですが、もう少し大掛かりになってくると有料プランにした方が良さそうです。

簡単に試せますので、ぜひ試してみてください!

では、次のアドベントカレンダーの記事をお楽しみに!!