はじめに
授業中にランダムに指名しようとして、割りばしでくじを作ったり、名前カードをシャッフルしたり、はたまた、「今日は〇月〇日だから出席番号 △ 番の人～」と指名したことはありませんか？
この方法は、誰が選ばれるかが予測できないため、児童生徒にとっては常に集中して答える準備をしておかなければならりません。つまり、授業への参加を効果的に促進できる指名方法となります。
しかし、従来のランダム指名では、いくつか問題点があります。
- 割りばしなど、出席番号を元にしたランダム指名では、出席番号と名前を結びつけるのに時間がかかる。
- 名前カードをシャッフルする場合、近くの児童生徒にしか見えない。
- 日付を使う方法は、そもそもランダムではなく、時間もかかる。
- 欠席者がいた場合、事前に除外しずらい。
今回開発したアプリで、この指名方法を令和にアップデートし、より授業が円滑に進むようにしたいです。
このアプリを作るきっかけ
児童生徒を指名する方法はさまざまな種類があります。そのうちの一つがランダム指名（くじ引き指名）です。それならただ単に教員がランダムに指名すればよいと考えがちですが、児童生徒の不満を生むこともあります。児童生徒からしてみれば、教員の意図が入り込む余地があるからです。ですから、ランダムに指名する時は教員の意図が入らないプログラムをエクセルで実装し、普段から使っていました。大画面かつ名前が高速に表示される目新しさもあり、児童生徒からの反応もよかったです。そして名前がランダムに表示されている時間は、誰が当たるか分からない緊張感が漂います。
嬉しいことに同僚の教員にも使ってもらえるようになりました！しかし、そのエクセルファイルを紹介するたびに児童生徒の名簿を張り替え、関数の範囲を変更しなければならず、利用するための少し高い壁がありました。
ちょうどそのころ、私は Python にドハマりしている時期でした。そこでプログラミングで Web アプリを作れば、どんな環境でもブラウザがあれば、誰でも全国どこでも簡単にアクセスし、かつ分かりやすく使ってもらえるのではないかと思いました。プログラミングでより多くの人の役に立ちたいと思い、この機能を Web アプリで実装しようと作り始めました。
思わぬメリットとして、Web アプリにすることで、デジタル教科書（クラウド）から当アプリに切り替えるときに、ブラウザのタブを切り替えるだけで使えます。授業中にも思いたったらすぐに使うことができるので、大変便利です。
作ったもの
これがホーム画面です。40 クラスまでの名簿を管理できます。初回アクセス時のみ「sample_偉人」が cookie に書き込まれます。六角形のロゴは、商店街などでよく見るガラガラ抽選機をイメージしています。真ん中の R は Random のイニシャルです。
担任だけではなく専科の先生（いろんな学級に授業をしに行く先生）のためにも、名簿は、複数管理できるように作成しました。
- 名簿の作成
- 名簿の削除
- 名簿の title 変更
- 順番を入れ替える
など、この画面で行えます。また名簿の title や順番はローカルストレージに保存されるので、次回アクセス時にもそのままの状態で使用できます。
また当日の欠席もチェックボックスで簡単に管理できます。
任意のリストを選択後、右上の詳細設定を押すと、
- 姓と名の間のスペースを詰めるかどうかの設定ができます。初期設定では詰めるように設定されています。
- 英語の複合語を表示するための改行の有無を設定できます。改行したほうがより大きく表示できます。
当アプリは、教室に特大モニターとパソコンがある前提で作成しています。（モニターはなくても構いませんが大きく表示できるメリットが薄れます。）
またブラウザでアクセスでできるため、デジタル教科書クラウドとの親和性も高いです。ブラウザのタブを切り替えるだけでスムーズに当アプリと、デジタル教科書を行き来できます。
##メイン機能 ① 名前ビンゴ
任意のリストを選択し、"ビンゴスタート"ボタンを押すと始まります。
巨大モニターで映し出して使うことで、一番後ろの席でもはっきり見えます。
##メイン機能 ② ペア・グループ作成
任意のリストを選択し、"グループスタート"ボタンを押すと始まります。
ペアやグループを瞬時にランダムに作成できます。ペア作成機能は、英語の授業でたくさん会話の練習をさせたいときに特に重宝します。任意の人数のグループを作成できる機能では、総合の学習や遠足の班など、グループを男女関係なく作成できるのでよく使います。
開発中に意識したこと
1.ユーザーの安心感
教育現場では、個人情報の管理が徹底されています。今回生徒の名前を取り扱うにあたり、ユーザーにこのアプリなら大丈夫だと思ってもらうためにどうすればよいか熟考しました。（以下、個人情報は、ユーザーが入力した生徒の名前を指す。）
そのために情報の保存場所についてユーザーの不安も考慮に入れて考えました。
- 外部サーバー
「技術的に安全であっても外部に個人情報を保存すると不安」と思ってしまい使用を避けるユーザーが多いと仮定しました。またログインが必要になるとユーザーの離脱率が高まると考えました。よってこの案はボツです。 - WebStorage
WebStorage は、永続的なデータ保存・ストレージ容量が 4MB と Cookie よりも高機能です。今回の実装には、適していると採用を考えました。しかしセキュリティについて調べていく中で「cookie を使用するよりも安全ではない」といった記述が多くみられました。よってこの案もボツです。
ただし、リストの名前を保存するためにローカルストレージを利用することにしました。 - cookie
個人情報を外部に送信しないかつ、より安全なローカルへの保存方法を考えた場合、cookie が適していると判断しました。このアプリでは cookie へ保存を採用します。
2.UI/UX
実際の現場では、パソコン操作に困り感のある教員が多いです。そんな教員にも迷うことなく使用してもらうために UI を工夫しました。直感的に操作方法が分かるように心がけました。
仕様
このアプリは cookie に個人情報を保存しているので、cookie の仕様による制限を受けています。
- 作成できるリストの上限
ブラウザによって１ドメイン当たりに保持できる cookie の上限は異なります。そのなかでも上限が低いブラウザの保持できる cookie が 50 くらいでした。余裕をもって 40 にしています。（ユーザーが 40 もリストを作る状況はあまり想定できませんが） - リストに保存できる人数の上限
1 つのリストにつき１つの cookie を使用しています。cookie の保存容量は 4096byte です。cookie に保存するときは uuid をキーとして保存、また日本語は URL エンコードして保存しています。よって人数の上限は、はっきり言えないですが、５文字くらい漢字表記で 80 人前後の名前を保存できます。 - 保存期間
ブラウザによって cookie の保存期間が異なります。この Web アプリの仕様上は、クラスを持つ期間は個人情報を保持する必要があると考えていたの１年と設定しています。chrome では、１年間保存できますが、Safari や Brave では１週間しか保存できません。これでは、UX を大きく損なってしまいます。その対策として、ユーザーがこの Web アプリにアクセスし、リストをクリックしたら cookie の再保存が行われ、保存期間が１週間伸びます。つまり、１週間に１度でも使い続ければ、入力した個人情報は保持され続けるので UX を大きく損なわずに済みます。
主な使用技術
- Next.js
- TypeScript
- Tailwind CSS
レスポンシブ対応
とにかくこだわりました。
スマホが普及している現代、パソコンよりスマホのトラフィックが多いそうです。スマホに対応していないと機会損失になると考えます。
友人に作った Web サイトを送るときに LINE を使うこと送ることになるでしょう。その時、レスポンシブ対応しておらず、スマホからの使い勝手が悪いサイトだと、第一印象が最悪です。その後、実際に授業で使おうなんて思わないと考えました。
スマホも縦画面表示でも横画面表示でも使い勝手がいいように設計しました。スマホの場合、名前のランダム表示後のリスト追加確認のたびに Window.alert()を表示すると、Window.alert()の表示制限を受けたり、Window.alert()の表示が名前表示と重なってしまい、使い勝手が悪かったです。そこでモーダルを使用することで、表示制限と表示場所を制御するようにし、スマホでも操作しやすいようにしました。
感想
このアプリが私の初作品になります。作ろうと決心してからは様々な書籍や Progate などのサイトで勉強していました。「まだこのレベルでは、Web アプリを作れない」と思って勉強ばかりに時間とっていました。
そんな考え方ではいくら時間があっても完成しないと気づいてからは、実際に作り始めました。独学で、心が折れそうになる時もありましたが、分からないなりにできることを少しづつ増やし積み重ねてきた結果完成しました。たくさんの人に使ってもらえればと思います。（毎日 Google Analytics を眺めています。）
現在もフィードバックをいただきながら改良を重ねています。
Qiita も初投稿です。コメントなどのアクションをいただけたらとても嬉しいです。何らかの誤りや改善点もあるかと思いますが、ご指導ご鞭撻のほどお願いします。