過去問を仕分けするwebアプリを作った話
- この記事は苫小牧高専アドベントカレンダー2020 16日目の記事です
自己紹介
はじめまして、おおやま(@ohyama4z)です。
とある男にｶｲﾊﾂ沼に沈められて、去年のアドベントカレンダーでこんな記事も書いてからはや一年ですが、今年も彼は僕を沼から逃げさせてはくれませんでしたね
そんなわけで、至らないところもあるかもしれませんが、文句はとある男に言ってください
これを見る苫小牧高専教員の皆さんへ
この記事は過去問についてガンガン触れて書いているように見えるでしょう。しかし、この記事はフィクションで、あくまで個人的な見解で組織としてのものではなく、部屋を明るくして画面から十分に離れて見ていただき、出てくる食品はあとでスタッフが美味しくいただきます...
...ごめんなさい、怒らないでください、お願いします
キミは過去問を知ってるか
皆さんは過去問という存在を知ってるでしょうか
過去問、それは先祖代々引き継がれ、多くの学生達の命を救い、今日まで信仰されている存在。 (ヨハネの黙示録第9章より)
そうですね、古事記とかにも書かれているあの過去問ですね。
学生達はテスト前になると必死になって過去問を集めようとします。
彼らは血眼で学校内・寮内を駆け回り、上級生に媚を売り、SNSなどで詰め寄り、ワイロ(食料)を握らせ、過去問を手に入れます。
今回作ったのは、そうして集めた大量の過去問を年度・教科・用紙の種類などで簡単に仕分けるwebアプリです。
今までの過去問の管理の方法について
作ったwebアプリの紹介の前に、今までどのように過去問を管理していたか話す必要があります。
過去問が大量に集まり、共有する輪も広がるにつれて過去問の仕分けを人の手でさばけるほどでなくなってきました。
そこで、某氏らが作ってくれたkakomon-manager-legacyで管理し始めました。(github)
git1でスキャンした画像ファイルと、過去問の情報を記載したcsvを管理し、gitにあるcsvをもとにgoogle driveに同期するといったものです。
実際にこれを使った結果google drive上では以下のように教科ごとのディレクトリが作られ、ファイル名2もわかりやすいように仕分けされます。
発生した問題
コレ自体はすごく便利なんですけども、1つ問題が発生しました。それは、過去問をアップロードするハードルが高いということです。
上の説明図を見てもらうだけでも
などなどとても「ハイ、これ使って過去問ガンガン追加してね」って感じでみんなに使ってもらえるものではありませんでした。
これにより、大量の過去問を少数のハードルを越えた者だけがさばくという地獄が発生、過去問の仕分けの負担が重すぎてテストがままならない なんていう逆転現象が起こっていました。
そこで、誰でも簡単にこの仕分け作業ができるサービスの需要が生まれ、webアプリの作成に取り掛かりました。
本題
前置きが長くなりましたね。
ここからが作ったwebアプリ「KMS(過去問マネージメントシステム)」(以下KMS)の紹介です(github)
概要
KMSの役割は、ファイルの追加/編集時のgitとユーザの橋渡しとなるwebアプリです
netlifyのGit Gatewayを使ってホストし、webからgit commitや情報取得をできるようにしています。 このためgitのコマンドを一切知らなくても過去問の編集ができます。
csvの編集時には、セレクトボックス等でkakomon-manager-legacyの要件に合う入力に合わせることで、csvの記述のミスによるcircleCIのビルド落ちを無くし、誰でも編集できるようにしています。
実際の見た目
↑こちら4で公開してますが、 過去問の管理というプライベートなあれなので、権限が無いユーザ5はローディング表示をずっと見せられるだけのサイトになっています(?)
アップロード画面
過去問のアップロードを行います、新規ブランチの作成もここでできるようにしています。
が、Git Gateway側のnginxの設定でアップロードできるファイルのサイズ上限が小さく、スキャンした画像ファイルがサイズ上限に引っかかり、上げられない事態が発生
これが判明したのは9割方完成したあとだったので本当に、出ました。" 涙 "が
やむなく現在は使用を中断しています6
編集画面
すでに情報が入力されているcsvの編集、またはアップロードがされて情報がまだ入力されていないcsvの中身の記入をここで行います。
実際に動かしてる様子が以下のデモ
Kakomon-Management-Systemのデモ pic.twitter.com/OiDVti9D6U
— おおやま (@ohyama4z) 2020年12月15日
vue-sidebar-menuをつかってファイルツリーを実装したんですがオシャレですね(自画自賛)
結構ここらへんのUIは配慮しながら書いたつもりなんですが、実際に友人に使ってもらっての意見を聞いてみると、 意外とまだまだ改善の余地だらけでホントUIづくりって難しいなと思ったり思わなかったりしました。
おわり
今回作ったwebアプリの紹介は以上です。
拙い文章だったかもしれませんが、ここまで読んでいただきありがとうございました。
あとがき
ぶっちゃけた話、これまだ完成してません。
このプロジェクトに取り掛かり始めたのが今年の7月終わり頃なのですが、まだ「誰でもすんなり使ってもらう」というテーマに至るほど配慮カンペキなwebアプリとはなっていません。 しかし、以前より圧倒的にハードルが下がってるのも確かなので過去問の管理がより手軽になりましたね。
今回のwebアプリを作るにあたって、僕一人で作ったわけではありません。
僕と一緒に作ってくれた友人と、わかんないことを150割教えてくれるある男(こいつはホントに何者なんでしょうか...(褒め言葉)) に本当に感謝します。ありがとう
これ以上、過去問についての記事を書いていると明日から教員の殺意を背中に受けることになりそうなのでこの辺にしておきます。
改めて、ここまで読んでいただきありがとうございました。
