【席替えの負担激減】すごい席替えアプリをつくりました【U-22プログラミングコンテスト】
どうもこんにちは！とある普通科高校に所属していたらひょんなことから所属校や本名まで開示されてしまいあとに引けなくなった （仮） <かっこかり>と申します。
最近は分散型SNS「Misskey」のコア開発メンバーに任命されたりしています（ドキュメンテーションサイトのリニューアルや、操作方法のチュートリアルの実装なんかをやってる）。
今回、私の学級で使用するために席替えアプリを作りましたので、その内容を共有してみたいと思います。
1. 作ったきっかけ
私のクラスでは、クラス委員がいて、全員何かしらの役割を持つことになっています。そのクラス委員を決める際に、私は席替え委員なるものをチョイスしました。席替え委員とは、その名の通り席替えを行う係です。今まで基本的に席替えは先生が行っていたので、新鮮な役職でした。
この役職を選んだ理由？楽そうだったからです。
他の委員は提出物の回収や配布などがあり毎日働く必要がある中、席替えは月に1回くらいしか行わないし楽そう！そんなふうに楽観的に思っていました。しかし実際は想像を遥かに超える激務が待っていたのです…。
1-1. 激務！席替えの流れ
具体的に、席替えは以下のような手順で行います。
-
席替え時期の決定
席替えの時期は席替え委員に一任されていたので、クラスの人が「やりたい！」と行ったら基本的にやっていました。 -
席替えの実施
全員に集まってもらい、座席を決めます。このとき、トランプを使用したり、既存の席替えアプリを使用したりしていました。 -
結果を元に座席表作成
座席が決定したら、それを元に座席表を作り、教卓に差し込みます。翌日までに行わないと、座席表と座席がミスマッチして混乱するので、素早く作成する必要があります。既存の席替えアプリを利用しても、座席データのエクスポート機能がなかったので、基本的に手作業で座席表を作成していました。
単に「席替えをする！」といっても、短期間で様々なことをする必要があるということがわかりました。同時に正直少し後悔しました。 他の委員のほうが楽そうじゃん…。
しかし、拝命いただいた以上、しっかりやる必要があります。そこで、もっと楽に席替えができないか…？ と思い、席替えをシステム化してしまおう！ と考えたのでした。
1-2. 要望が多数…全部叶えられない！
さらに、席替えを行う中で、クラスメイトからは様々な要望が上がってきました。
- 「クーラーの風が当たりにくい左寄りの席にしてや～」
- 「俺は暑いから逆に右寄りの席にしてほしいわ」
- 「目が見えにくいから前よりの席にしてほしい…！」
- 「怪我してるからドアに近い席に固定してな」
このような要望が数件しか無いのであれば叶えられるかもしれませんが、エアコンの暑い寒いのような要望は大量にあります。 なので、すべての希望を叶えることはやはり難しく、結局（上の例で言えば）下2名の希望しか叶わない…といったことが起きていました。
せっかく席替えをするのですから、それぞれの希望にあった座席で快適に授業を受けたいですよね。そこで、曖昧な座席希望を叶えられる席替えアプリを作成することにしたのです。
2. システムの構成・特徴
そうして出来上がったのが、Sekigae.appです。
ドメインも同じ名前で取ってあるので、アプリ名を検索バーに入れるとそのままアプリに飛べます。地味に助かりますね。
2-1. システムの構成
いっつも同じようなシステム構成ですね
フレームワークには、Nuxt3 を採用。Nuxt3 は Beta 版のころからちょくちょく触っていたので、スムーズに開発を進められました。また、学校のイベントウェブサイト制作の際には一部へ導入するにとどまった TypeScript ですが、今回はロジック部分をすべて TypeScript で実装しました！ Github の言語パーセンテージ表示から黄色が消えてなんかグレードアップした気分。
CSSフレームワークには Tailwind CSS を使用。時間がなかったので、UIコンポーネントとしてNuxt UIを初めて採用しました。Tailwindベースなので、自由度はかなり高かったです。
このアプリは静的HTML・CSS・Javascriptとして出力（SSG）されており、Github上での変更を検知し Cloudflare Pages に自動デプロイされる仕組みです。Cloudflare Pages 経由でインターネットに公開されています。経費は.appドメイン分（約1,200円/年）のみ。リーズナブルですね。
また、バックエンド等はあえて使用しておらず、すべてのデータはブラウザ（フロントエンド）上で処理されます。席替えの際には生徒の名前などの個人情報を含みますので、情報漏洩には気を配る必要があります。その点このアプリはデータが一切外部に送信されないので、セキュアです。
2-2. 使い方
2-2-1. 座席の並びを登録
教室の座席の並び方を登録します。列・行数を教室のそれと合わせた後、存在しない座席をクリックして暗転させます。
中央に柱などがあって一部の座席がない場合など、変則的な座席配置にも対応しています。
2-2-2. メンバー（生徒）情報を追加
席替えするメンバーを登録します。手動で一人ずつ登録することもできますが、所定のCSVデータをインポートしたり、名前を改行区切りで入力することで、一括登録することもできます。
この際、個人別に、座席の希望を反映させることができます。
2-2-2-1. 固定配置
座席の固定配置を設定可能です。「けがをしているので入り口横の席にしたい」などのユースケースに使用可能です。
使用するには、個人の設定画面から「固定配置を有効にする」をクリックし、固定する座席をクリックして選択します。
2-2-2-2. 優先配置
当該メンバーの座席の希望を反映できます。「エアコンの風が当たりにくい左側の席がいい」「目が見えにくいので前方の席がいい」など、座席を固定するまでではないものの希望を優先したい場合に使用できます。
2-2-2-3. 座席を離す・ペアにする
座席を離したいメンバーを複数人指定できます。くっつくと喋ってばかりで授業に集中してくれない人は、ここに追加してやりましょう。
逆にペアにしたい人も選べますが、こっちはあまり需要なさそう。
2-2-3. 席替えを実施
座席配置とメンバーを設定し終えたら、席替えを実行します。席替え発表時のワクワク感を演出するエフェクトを搭載しているので、お好みで設定し、「席替え実行」をクリックします。
席替えのページには、実際の現場での仕様を想定して以下のような機能を設けています。
- 全画面表示（文字もデカくなります）
- 座席の縦横列を数字で表示（航空券番号のように、6Aなどの行列番号で座席を見つけやすくできます）
- 座席の入れ替え機能（ドラッグアンドドロップで入れ替え可能。いたずら・誤操作防止のロック機能付きです）
そして、このページで席替え結果のCSVをエクスポートできます。あとは、お好みの座席表テンプレートにCSVデータを突っ込むだけで座席表が作れてしまいます。 簡単ですね！
2-3. 特徴
2-3-1. ランダマイズ アルゴリズムを自作
たくさんの希望を処理しつつ、ランダム性を確保するため、座席のランダマイズエンジンを自作しています。
2-3-2. 席替えをすぐできる
既存の席替えアプリの中には、席替え表のタイトルや作成日など、席替え自体にはあまり関係のない情報が必須となっていることも。 インポート機能があるので、生徒一覧のCSVがあればすぐに席替えを行えます。
2-3-3. CSVの入出力に対応
Excelで開けるCSVを出力するため、BOM付きのUTF-8で出力しています。学校の業務でも日常的に使用されているExcelなどのツールとも親和性が高く、席替え委員の利便性だけでなく、先生の方でも、既存のワークフローに取り入れやすいことから、業務効率化にも一役買えると思います。
3. 実運用
この席替えアプリはまともに動くようになるまで実質4日間ほどかかっていますが、相当急いだのでかなり荒削りなものとなっています。初回の運用は8月末の夏休み明けでした。
3-1. 調査
まず、Googleフォームを使い、座席の希望を聞きました。Googleフォームの結果はGoogleスプレッドシートに出力されるので、このデータを関数を用いて以下のように一括加工し、所定のCSV様式に流し込みました。
- エアコンの風（の当たりやすさ） … 座席の左右の希望として変換
- 黒板の見えやすさ … 「見にくい」と回答した人は全員前方希望として割当て
3-2. 運用
当日は、席替えアプリを起動して作成したCSVをインポート。そのまま席替えアプリを稼働させ、席移動をしてもらいました。教室のプロジェクターの不具合などがありましたが座席決定→席移動には3分くらいしかかかっていないと思われます。
3-3. 座席表作成
席替え終了後、席替えアプリからCSVをエクスポート。以前より使用していたExcel製の座席表テンプレートに席替え結果を流し込みました（以前は座席と出席番号を一つずつ対応させて手入力していた）。これで作業終了！あっという間に座席表作成まで終わりました。
4. 使ってみた結果
このような運用を数回行ったのち、このアプリについてのひとり反省会を開きました。
4-1. 席替えにかかる所要時間
- 座席の決定（実際に席替えをする）の所要時間 … 約79%削減
- 座席表の作成の所要時間 … 約90%削減
に成功しました！すごい！
4-2. みんなの反応
- 座席の希望が(何かしら)叶った人 … 19%増加
- 座席の希望がすべて叶った人 … 25%増加
- 希望が叶わなかった人 … 10%減少
座席の希望も叶いやすくなっています！
5. ふりかえり
アンケートの自由記述欄には、こんな意見も。
オイオイ、アプリじゃねえのかよ！となってしまいますが、このアプリでは太刀打ちできない問題でございます。 もちろん、アプリの画面上での演出を強化することで席替えの楽しさを工夫することはできます。しかし、クラスのみんなでワイワイ言い合いながら席替えをする、というのはアプリを介してでは体験できないことで、この点でこのアプリには勝ち目がありません。
というわけで、時間のないときはSekigae.appを使って究極の時短を行いながら座席を決定しつつ、時間のある時はクラスみんなで話し合ったりしてワイワイ席替えを楽しむのが、最適解ではないかと思います。
皆さんもぜひSekigae.appを使ってみてくださいね！じゃ！
Discussion
こういった配慮ができるとは素晴らしいです！
「クーラーの風が当たりにくい左寄りの席にしてや～」
「俺は暑いから逆に右寄りの席にしてほしいわ」
「目が見えにくいから前よりの席にしてほしい…！」
「怪我してるからドアに近い席に固定してな」
ついでに先生のための時間割表も作ってみたら面白いと思いますよ
コメント失礼します。
席替えアプリとても便利なのですが、
座席の位置などを設定済みのCSVファイルを開いて
席替えスタートすると座席が設定とは全く違ったり
スタート押しても座席が映らなかったりと不具合が出ています。
対処お願いしたいです。