Canvas要素をこねくり回してユーザーの入力をリアルタイムに描画する仕組みを実装する（CISTアドベントカレンダー2022Day11）
大学の出席に用いられている出席カードをデジタル化？したので開発の記録を残しておきます。
出席カードへの必要項目の入力をリアルタイムに描画する仕組みを、JSフレームワークを利用せずにCanvas要素をこねくり回してスクラッチ開発しました。
CISTアドベントカレンダー2022にリンクしています。
出席カードとは
某大学では授業の出席登録に3つの方法が用いられています。
出席カード
【様式】
教員が配布する紙。
【方法】
必要事項を記入して提出する。
【難点】
教員が学生に紙を直接配布するため、代理出席をするなどの不正をできない。教員視点でもシステムなどに出欠を一人一人入力する手間が生じる。
ポータルサイト
【様式】
授業で使用する資料の配布や授業内容の確認をすることができるWebサイト。
【方法】
授業内で提示される出席パスワードをWebから入力し出席登録する。
【利点】
出席パスワードは授業出席者全員が同一のものを使用するため、授業に出席しなくても出席している友人からパスワードを共有してもらい、サイトに入力することで出席登録ができる。
ICカード（学生カード）
【様式】
学生カードと非接触端末。
【方法】
学生カードを非接触端末にかざすことで出席登録する。
【利点】
学生カードを友人に預け、代わりに端末にかざしてもらうことで出席登録ができる。
【成果物】出席カードメーカー
前項であげた3つの出席登録方法のうち、出席カード方式は超アナログで学生に優しくないことが明白です。
出席カードは授業の実施場所でしか配布されないため、出席登録を行い単位取得に向けた意志があることを表明するには、どうにかして出席カードを手に入れなければなりません。
というわけで...
閃きました。
自分で出席カードを作ってしまえば良いのでは？
なので、作りました。
「出席カードメーカー」
＊PC推奨。レスポンシブ非対応。
このWebアプリを使えば、出席カードを量産できます。
出席カードを授業時に出し忘れた体にして、後から提出すれば完璧です。
開発経緯
ここまで悪巧みをすることが目的のように書いていますが、元は何か大学に関連して技術的アプローチで面白ネタができればいいな程度で開発しました。
使用技術
プレーンなHTML/CSS/JavaScriptで開発しました。
雑にスクラップに技術的なメモを残してあるので、ジェネレーター系のWebアプリを作る際の参考にしてください。
振り返り
ジェネレーター系のWebアプリの開発を一度やってみたかったので、良い機会になったと思います。
特にHTMLのCanvas要素をこねくり回して、ユーザーの入力をリアルタイムに描画する仕組みの構築が楽しかったです（一度指定範囲を全消しして、再度上書きしてるだけ）。
なお、実際の出席登録には利用できないのでご注意ください。
Discussion