はじめに

・こちらの記事は前回の「続き_Glideを使って在庫管理アプリっぽいモノを作ってみた話」の続きです。
・素人がGlideいじいじしている記事です。

出欠管理アプリを作ろう

春といえば、始まりの季節。

新しいクラスをお出迎えするわけで、何かしら新しい要素を入れたいなといつもの癖が発動する。

前々から、「誰がどのくらいコード書いたかを見える化したら面白そう。」という話が出てたのを思い出し、ついでに出欠も取っちゃうか。と思い立ったのが今日の午後。

まずはスプレッドシートの準備から

さて。今回作るものは決まった。
機能としては以下の通り

・出欠管理（今後のスケジュールの把握にもなると良いよね）
・学習時間の入力、視覚化
・メンバーリスト（早く顔と名前を覚えられるように）

ということで、スプレッドシートは以下のようなシート構成にした。

・Attendance >> 出欠入力用のシート
 　列：日付・カリキュラム・出席者数（以降のチェックボックスをCOUNTIFで集計）・受講生NO

・Studied_Chart >> 学習時間の集計、視覚化用のシート
　列：名前・学習時間の総計（Studied_logからSUMIFで集計）・順位

・Studied_log >> 学習時間入力用のシート
　列：日付・名前・学習時間

・Member >> メンバーリスト用のシート
　列：ニックネーム・年齢・画像

Glideで create app!

Glideにログインして、create appで先ほど作ったスプレッドシートを選択。

出欠管理の方は、授業のカリキュラムをリスト表示にした。
出欠入力をしたい講座を選択し、自分の名前にチェックをつける。

すると、スプレッドシートの方に自動で反映される。
相変わらず簡単すぎるな。これは。

贅沢をいえば、ユーザー認証をして自分の出欠以外は弄れないようにしたいが、Glideの認証機能はそこまで便利ではない。
アプリ自体の公開範囲を狭めるために、アプリを開ける人間を限定することはできるが、ログインしたユーザーを特定して個別の画面を出すような機能はない。（勉強不足だったらごめんなさい

そのため、他者の出欠も弄れてしまうという重大な欠陥があるが、その辺はモラルに任せることにしたw

次は学習時間の見える化

グラフの設置もすこぶる簡単である。
LAYOUTをDetailsに設定し、ComponentsからChartsを追加する。

Chartsのソース元をStudied_Chratに設定。

本当は全員分のグラフを表示したかったが、要素数が多すぎるとグシャったので、順位列のTop10のみを表示するように設定した。

さらにComponentsを追加し、Form_buttonを設置。
タップすると、Studied_logにデータが入力できるように設定。

Studied_logに入力したデータは自動でStudied_Chartに集計されるので、学習時間を入力するとリアルタイムでグラフも更新されるようになった。

メンバーリストは添えるだけ

メンバーリストは特に書くことがないw

途中で、各個人のSNSアカウントに飛べるようにしようかなとも思ったけど、嫌がる人もいるかもだし今回は名前と顔が見えればそれでいっかとなったので名前、年齢、写真のリンクをスプレッドシートにベタ打ちした。

SHARE APPして完成！

と、いうことで完成。

所要時間は驚異の4h。

今回はGASを絡めずにGlideの機能だけで作ったが、もし機能拡張するとしたらGASの出番だろう。

例えば、授業開始時間までに出欠を入力していないメンバーを判定して、Slackなど他のツールに通知して煽ったり、学習時間が数日間入力されていないメンバーをリストにして煽るとか。（Glideにプッシュ通知機能あったっけ？

入力された後の値を利用して整理したり他サービスやAPIと連携させるにはGASがどうしても必要になる印象。

やってて困ったこと

せっかくPWAになってるので、ホーム画面に追加した時用のiconを用意するのだが、iOSだと一部の端末では設定した通りの画像にならない事象が発生した。（ファイルの形式は.ico）

検証画面で見るとfaviconの設定はされているっぽいのになんで発生したか不明（未熟なだけかも）だったが、こういう時ノンコードのむず痒さがひしひしと感じられるなってなった。

とりあえず次期はこれ使ってもらってみようw

今後のアプデに期待！

またなんか作ったら続き書こうと思います。