ちょっと前から普通自動車免許を取ろうと思い立ち教習所に通いはじめた。
技能教習はWeb上から予約できて、基本的に順番にやっていくだけなので難しいことはない。
問題は学科教習で、月ごとにスケジュールが配布されるのだけれどもExcelで作った表をPDFにエクスポートしたもので、とてもじゃないが機械的に扱うのに向いていない。 一応、PDFをパースしてテキストを取り出したらなんとかならないかなと思ったけれど、開講されていない時限に空白が入る関係上、取り出したテキストデータからセルの位置を同定できないことがわかったので諦めた。 テキストデータ以外の、たとえば位置情報とか (とれるのか?) を頑張って計算したらなんとかなりそうな気もするけれど大変そうだし、そもそもやりたいことは取り出した後にあるので手で入力することにした。
さてデータは頑張って手でインポートするとしてスケジュールを立てる際、どんなことができてほしいか。
- 常勤の仕事がある関係上、できるだけ半休で済む単位で履修したい
- 未履修の科目が集中しているからといって全休を取って履修するようなスケジュールは避けたい
- そもそも1日中ずっと開講されているわけではなくて、たとえば午前と午後の間に2時間以上の間隔が空く場合は持て余してしまう
- 同じ科目が別の日・別の時限に開講されているが、受講は1回だけで良いので「履修済みか」「別の日に履修予定があるか」を俯瞰したい
- 全26時限のうち、未履修の科目・履修予定を立てた科目・履修済みの科目を一覧したい
……あたりができてほしい。
というわけで作ったのが冒頭の教習スケジュールアプリ。
見た目はこんなかんじ。
こんな風に、同じ科目の予定が別の日に入っていたらそれとわかるようになっている。加えてここからチェックボックスを操作するとこの日に予定を変えることもできる。
特徴は:
- 科目ごとに色分け
- 「未履修」「履修予定が入っている」「履修済み」が一目でわかるようアイコンと科目の明度を分ける
- 同じ科目が別日に予定が立っている場合、予定を入れ替えられる
- 例: に科目12が入っている状態で、のスケジュールを開いてこちらに変更できる
- 前日以前の背景をグレーにし、これから予定が入れられる範囲を視覚化
- 履修状況ページで科目ごとに「未履修」「履修予定がある」「履修済み」を可視化
色分けについて、科目が多い関係上、どうしても色相が近く特に色覚異常のある方にとってかなり厳しい見た目になってしまったし、なんなら色覚について (おそらく) 正常である自分でもたまたま近い色相の科目が並ぶと混乱することがあるのであまり良い筋ではないかも、とも思う。 しかし色分けしなかったら数字だけで判別しなければいけないので、これはこれで厳しいからやむをえない。
また、予定が入っていたらそれとわかる。上記スクリーンショットだとたとえば8/6の5〜7時限に予定を入れたので、午前の1〜2時限を取ろうとすると全休しないといけないし、そもそも3〜4時限ぶん空いてしまうな、とかがわかる。
賢いテクノロジーでスケジュールを自動で立てようかと思ったけど、仕事の都合とか自分の体調その他の都合で急遽別の日にしたいこともあるので、自分でスケジュールを立てること前提で使いやすいものにした。
技術的な詳細は:
- ホスティング先: Firebase Hosting
- UIコンポーネント: Material UI
- セットアップ: Create React App
……というかんじ。さっと作ってさっと動かしたかったのでいつものグッズにした。
おかげさまで無事にあと3時限履修したら卒業テストが受けられる状態になったので、あとは技能教習をがんばります。サンキューです。
