【Rails】小学校教員、初心者が現場で使える時間割アプリを作った話

# 簡単に自己紹介
・　新卒で３年間、講師として小学校に勤務
・　学級通信のホームページ化を勤務校で提案した際に、ノーコードでプログラムを組んだことがきっかけでWebエンジニアへの転職を決意

# アプリ概要と制作背景
School Notesは、主に小学校の時間割をクラウド上で作成し共有できるアプリです。このアプリを作ろうとおもった背景には、大多数の教員が「週案」と呼ばれる大きな紙の手帳でスケジュールを管理しており、デジタル管理する手段がほぼないことがあります。
### 各種リンク
アプリ https://schoolnotes.net
github https://github.com/ast345/school-notes

![share_cloud.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/bc0f3128-5df0-30c0-4b15-b1175d29216a.jpeg)

## スケジュールをデジタル管理しないことによるデメリット
デジタル管理できないことの何が問題なのか、と思われる方もいるかもしれませんが、下記のように様々なデメリットが存在していると私は思ってきました。

### 変更があると書き直すのが大変
例えば、２時間目と３時間目を入れ替えてたいと思った時、消しゴムで消して書き直します。教科名だけであればそれほど苦ではないかもしれませんが、もしそこに単元名であったりその時間の狙い、単元時数（その単元の何時間目の授業なのか）を書き込んでいれば全て書き直おすことになります。
### 時間割を共有するための作業が煩雑
  当然、次の週のスケジュールが定まったら、関係する先生方や自分のクラスの児童と共有しなければなりません。そのためにわざわざExcelに書き直して印刷します。私が勤務していた学校では学校ホームページにも各クラスの時間割を載せていたので、ExcelをJPEGに変換してアップロードしたりもしていました。
  ちなみに専科の先生などは児童に配る必要がないので、手帳に手書きした時間割をそのままコピーして渡していたりします。ただこの場合、本人以外ほとんど読めないような字で書かれていることもあり、もらった人は謎の暗号を読み解くことになります。
### 印刷された時間割が古く、調整に失敗する
  小学校の授業は全て担任が１人で行うわけではなく、専科の先生に委任したり、TT（Team Teachingの略）の先生、支援員の先生と行なったりします。そのため時間割の調整が必要ですがこの調整が大変です。もちろん、ある程度は時間割を固定していますが、運動会や学習発表会等の行事があったり、出張があったりするとどうしても調整が必要になったりします。そのため、専科やTTの先生などが先に時間割を印刷して配布し、確認してもらうのですが、調整が多くなると空いていたはずの時間が埋まっていて、当てにしていた時間で調整できない、なんてことが起こります。うまくタイミングがあって話して調整できればまだいいのですが、タイミングが合わずに多分大丈夫だろう、とおもって調整できていないことも多々あります。
### データで記録が残らない
  これは教員をしたことのない方にはイメージしずらいかもしれませんが、週案は立てて終わりではありません。例えば、時数計算と言って教科毎に何時間授業をしたかを計算して進捗を確認しますが、これを手で数えて確認しています。また、授業のねらいや授業中の子供達の様子をメモしたりしますが、考えてみれば授業のねらいなんて全国の先生がほぼ同じねらいで毎年授業しているはずなのに、みなが揃って毎年手書きしているんです。また子供達の授業中の様子なんかも、去年の記録が残っていれば授業の計画を立てる時に大いに参考になるのに、全くそうした情報もなく授業を計画しています。

## 既存のアプリで置き換えられないのか
 上記のようにデジタル管理ができないことに、大きなデメリットを感じている一方、google calendarやoutlookなどのような、一般的に皆さんが利用しているアプリで時間割を管理することは難しいと感じていました。

### ○時間目に予定を入れる特殊性
以下の時間割のサンプルをご覧ください。まず基本的な学校のスケジュール管理の特殊性を言えば、○時間目に何をする、というように時限で予定を考えます。なんだ、そんなことか、と思われるかもしれませんがよく考えてみてください。googleカレンダーで予定を作成する時、１時間目、なんて選択できませんよね。汎用的なカレンダーアプリは、何時から何時までに何をする、という指定の仕方をするので学校の時間割の枠組みは利用できません。

![IMG_2F7E44467597-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/13e1cc9d-45da-ea98-8f63-7a7d1a8dc41d.jpeg)

### 入れ替えという特殊な操作
そして学校現場でよくある変更、それは時限の入れ替えです。例えば１時間目と５時間目の授業の入れ替えをしたい場合、この時間割をExcelで作っていたとすれば４カ所書き換えることになります。仮にgoolgleカレンダーを使ったとしても、１時間目の予定を５時間目にドラッグ&ドロップし、５時間目の予定を１時間目にドラッグ&ドロップすることになるでしょう。しかし、それも微妙に開始時間がずれたりして厄介です。決して操作性に優れているとは言えないでしょう。
ちなみになぜこのような入れ替えが頻発するかと言えば、関係する先生に出張や研修の予定が入っていたり、体育館やプールのような施設が特定の時間しか使えなかったりするからです。

![IMG_45823A6D9625-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/fa7f4786-596c-2f13-3fb3-0f7d9d7cbb9d.jpeg)

### 学校ならではのニーズ

また時間割の下の方をよくご覧ください。「持ち物」、「下校時刻」といったものが書かれていますよね。こんなことgoogleカレンダーでは絶対に表現できませんが、これは重要です。なぜなら子供達はここを見て、次の日の持ち物を準備するし、保護者は下校時刻を見て、子供達が帰ってくる時間を把握します。これは学校の時間割には絶対に必要なのです。もし下校時刻を書いておらず、帰ってくると思っていた時間に子供が帰ってこなかったら、親からクレームの電話が来るでしょう。

![IMG_8D4E0B57C381-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/8c68cb28-28b0-548e-7403-bbb3dad366bc.jpeg)

### 校務支援ソフトは使えないのか
でも学校には校務支援ソフトがあるじゃないか、と思うかもしれません。確かに学校には学校現場のニーズに合わせて開発された校務支援ソフトがあり、その中に時間割作成機能がある場合もあります。でも操作性が直感的でないし、URLで共有したりといった基本的なクラウド操作はまだまだ開発が追いついていない印象です。

## このアプリで解決した課題
上記のように、学校のスケジュール作成には様々な課題がありますが、これらのうちいくつかは本アプリで完全に解決することができました。

※技術的にどう実装したのかについては、[githubのREADME](https://github.com/ast345/school-notes)に記述しております。こちらもぜひご覧ください。

### 直感的な操作でサクサクと時間割を編集できる
・　ドラッグ&ドロップで授業の入れ替えができる
　前述した授業の「入れ替え」はドラッグ&ドロップ一回で完結できるようにしました。私の知る限り、たった一回の操作でこれができるアプリはありません。非常に便利です。
 
![dragdrop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/9d64f9fb-8a96-4879-d7b3-73faaf93c1a0.gif)

 
・　テンプレート機能
 教科や持ち物、下校時刻など、毎週変わらない予定は予め設定しておくことで、ワンクリックで作成することができます。
 
![template.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/3e7d2d9c-8dbc-dc86-b3a8-b6a9d1f73c50.gif)

・　プルダウンで教科や単元名を選択できる
　これは地味に便利でした。テンプレートを作成した後に、トントントンとクリックしていけば単元名もすぐに決まります。入力の手間って意外と大きかったんですね。
 
![pulldown gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/8cf44f2f-5851-f6b6-b1a5-22e9d1eee8f9.gif)
 

### 学校のニーズに合わせた枠組み
・　行の追加、調整ができる
　オーソドックスな時間割の枠組みの中で予定を組むことができるようにしたのはもちろん、時限の設定、業間の追加、曜日の設定ができるようにしました。このようなカスタマイズは、５時間目までしか授業のなかったり細やかな計画を必要とする低学年で役立ちます。また曜日の設定は土日に運動会などの行事がある時に必要です。
 
![add_column2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/3c8cc90a-c695-e0fd-8f9d-40cfb3468c99.gif)


・　学年によってひらがな、漢字を自動で切り替えてくれる
　非常に細かいことですが、当然、時間割に出てくるような漢字も低学年ではひらがなで作成するので、自動的にひらがなで表示されるようになっています。
 
![統合　１・５.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/f10487aa-a4cb-906b-ec44-d2dae3a6a23f.png)


・　専科では学年＋教科で時間割が作成できる
　専科など、学年をまたぎ特定の教科だけを担当する先生も使えるように、専科で登録すると「学年＋教科」で教科名を表示するようになっています。
 
 ![スクリーンショット 2024-01-15 20.58.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/b15dafb2-2dd0-0623-32b8-0c1ed0addbad.png)



### 作った時間割をそのまま共有できる
・　目的別の3種類のURL発行
　右上の共有マークから目的別の２つのリンクと埋め込みコードを取得し共有することができます。今は子供達も１人１台タブレットを持っているので、毎日持ち帰って使っている学校であればタブレットで確認してもらうこともできるかもしれません。児童・生徒向けと先生向けでリンクを分けているのは、翌週以降の時間割の閲覧権限を制御するためです。また埋め込みコードは学校ホームページ等に埋め込めるコードです。

 
![スクリーンショット 2024-01-16 7.32.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/e6871014-9f9f-ed03-3524-d1fceb082b66.png)

※実際にサンプルのリンクとコードを以下に掲載しておきます。

児童・生徒向けリンク
https://schoolnotes.net/school_classes/31b56819cb82fbdec133c2a049d05f21f50c8595/share

教員向けリンク
https://schoolnotes.net/school_classes/31b56819cb82fbdec133c2a049d05f21f50c8595/share_teachers

埋め込みコード
```
<iframe src='https://schoolnotes.net/school_classes/31b56819cb82fbdec133c2a049d05f21f50c8595/share' width='700' height='800' frameborder='0'></iframe>
```


・　フォロー機能
　教員向けリンクから時間割にアクセスするとフォローボタンが表示されます。フォローすると、左側のメニューバーからアクセスできるようになります。
 
![スクリーンショット 2024-01-16 21.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/2546f384-f087-7bf7-bb52-9e93b4f7ca86.png)

![スクリーンショット 2024-01-17 20.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/f9631fa3-a144-218f-04ec-b5f86b388b6e.png)


・　印刷もワンクリックでピッタリの大きさにしてくれる
　右上のプリンターのマークを押すことで、プリント用のレイアウトに自動的に切り替わります。また、上記の共有URLでもそうですが予定の組まれていないコマはグレー表示になります。
 
![printgif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/4fbdd9db-69ad-84a9-0436-0c0232ae98e4.gif)

## 今後、実装していきたい機能
時間割を作るというその点だけ見れば、上記の機能だけでも十分かもしれません。しかし、紙の「週案」を上回る利便性・効率性を実現していくために、まだまだ実装していきたい機能がたくさんあります。

### 時数計算機能
[スケジュールをデジタル管理しないことのデメリット](#スケジュールをデジタル管理しないことによるデメリット)でも触れましたが、進捗状況を把握するために教員は各教科何時間授業を行なったかを計算しています。せっかく時間割をデジタルで作成しているのだから、これは当然自動で計算したものを確認できるようにしておくべきでしょう。
### 様々な用途に合わせてビューを変更できる機能
「週案」はもちろん授業の時間割を管理する役割を持っていますが、それ以外にも様々なことを管理・メモする役割があります。下記の週案の画像をご覧ください。授業の予定以外にも、職員会議や出張の予定など、教師としての予定も書き込まれています。

![Page0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675003/847c6d19-b2f1-d7ea-5447-efd6d1e5dd32.jpeg)

ですが、現状、School Notesは子供に配る時間割の型で予定を作成することしかできません。教科以外の予定も組み込めない仕様になっているので、時間割のビューとは別に、googleカレンダーなどの汎用的なアプリに近いビューで、時間割、教師としての予定、どちらも組み込めるビューがあると格段に利便性が上がると思っています。

ちなみにこの週案を作成した先生はExcel上で学級の時間割を組み立て、そこに教師としての予定を一旦組み込み、印刷して週案に貼り付けています。その後、教師としての予定を削除し、子供に配布するものを印刷していました。このような手間を解消したり、必要な情報を整理した画面で確認できることは教員の働き方に大きく影響すると思います。

### 時間割調整機能
[時間割の調整が失敗しがち](#印刷された時間割が古く調整に失敗する)、ということは前述の通りですが、教師間の時間割の調整をアプリ上で完結できると失敗することは少なくなるでしょう。
調整機能の作り方はいくつか考えられますが、例えば「リクエスト機能」を作って、この時間にこの授業入れて（あるいは移動させて）といったことをアプリ上で連絡し、連絡をもらった側は承認したり拒否したりできるといいですよね。
あるいは2つの時間割を連携させて一方が立てた計画をもう一方の時間割に反映させていく、という方法も便利かもしれません。

### 単元指導計画に基づいて時間割を作成する機能
現状、テンプレート機能はあるものの、単元名は自分で選択しなければなりません。しかし学校には単元指導計画というものがあり、1つ1つの単元をどの順番で何時間ぐらいかけて行うかということは計画してあります。こうした計画をアプリ上で管理し、その計画に基づいてアプリが単元名を自動的に選択していく、といった機能があれば時間割作成の手間は格段に減るでしょう。