きっかけ
弊クラスは教室のホワイトボードに担当が課題を書き出すという制度がありました。しかし，これでは本当に課題の一覧が見たい自宅から課題を見ることができません。課題を整理して取り組むことがバイキンマンより嫌いな僕は，これが我慢なりませんでした。
そこで，担任に相談したところOKが出たので開発に着手した感じです。
大体の構造
面倒なので構成図とかそういうやつはありません。
基本的に費用を出してもらうことはできないと思うので，管理にはSpreadsheetsとGASによって作成する計画でした。結果的にはこれが功を奏して課題管理用のバックエンドと呼んでいいのかわからないヘボシステムは約2日で出来上がりました。
課題の管理は専用のformから送信する形に，課題一覧はReactで作成したページをCloudflare Pagesで公開しているものから参照する形にしました。Reactは初めて書きましたが，かなり良くて好きでした。ちゃんとお勉強したいです。
制作で詰みかけたポイント
同時にLINE Botで通知するためのコードも書いていたのですが，何故かjoin / followイベントからidが取得できないことがありました。おそらく1年ほど前のコードを使いまわそうとしたためです。そこで開発が滞った気はしています。
そんなわけで，必要になることはないと思いますが備忘録も兼ねて書いておきます。GASでLINEからのWebhookをもとにidへ値を書き込みます。
function doPost(e) {
// この関数で必要なもの
const type = JSON.parse(e.postData.contents).events[0].type;
const source = JSON.parse(e.postData.contents).events[0].source;
let id = '';
// typeで分けて処理
if(type == 'follow' && source.type == 'user') {
id = source.userId;
} else if(type == 'join' && source.type == 'group') {
id = source.groupId;
} else if(type == 'join' && source.type == 'room') {
id = source.roomId;
}
}他の点に関しては，開発が遅延することはなかったものと思います。
今後
一覧のページはPWAに対応させたものの，現状としてそのメリットはiOSでホーム画面に追加がし易いことくらいです。将来的にはPWAのPush通知機能を利用して課題の内容を確認させたり，持ち物確認を促したりするような機能を実装させたいと思っています。
実際に開発をしてみて
クラス内で使用するアプリケーションを開発することは初めてで，そこそこ手間取った部分もありましたが概ね悪くなかった気がします。
クラスへ何かを還元することは，最終的に自分のためになるものだと思っていますので今後も何かを作って行けたらいいな，と思います。
学生開発者のみなさん！クラスで使うものを作るとクラス内で一瞬は崇められますのでぜひやってみてください！
コメント