過去問を仕分けする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割教えてくれるある男(こいつはホントに何者なんでしょうか...(褒め言葉)) に本当に感謝します。ありがとう
これ以上、過去問についての記事を書いていると明日から教員の殺意を背中に受けることになりそうなのでこの辺にしておきます。
改めて、ここまで読んでいただきありがとうございました。
じゃんけんの戦闘力を測定するwebアプリを作った話
この記事は 苫小牧高専アドベントカレンダー2019 16日目の記事です
進捗報告!!!
自己紹介
初めまして、おおやま(Twitter_id:@ohyama4z)です
とある男(@satakenkoki)にカイハツ沼に沈められ、今現在この記事を書いています
初心者なのでいろいろ至らないところもありますが、
文句は僕じゃなくて この男 に言ってください
じゃんけんで人生が決まる
あなたは今まで、何か重大な決断をどうやって下してきただろうか
そう、じゃんけんだろう
給食の牛乳の取り合い、下校路でのランドセルの押し付け合い、etc...
そうした対立もすべて解決できる万能な手段がじゃんけんである
じゃんけん制す者は人生を制すといっても過言ではないだろう
きっと、IQ300のじゃんけんジャンカーのあなたの頭には
こんな考えが浮かんだことがあるだろう
「自分のじゃんけんの強さを数値にして可視化したい」
そんな悲しきじゃんけんバーサークどもに送る*1のが今回のwebアプリだ
本題
上記の通り(?)、web上でじゃんけんを遊び、その戦績からレートを算出するwebアプリを作ったので紹介する(github)
アカウント登録画面
なんとこのサービス、自身のアカウントを作成しないとじゃんけんはできない
じゃんけんとはいえ、名声を勝ち取るためには名が必要である
ホーム画面
説明不要、戦士たちの休息の場所
プロフィール
アイコンとコメントを登録できる、
コメントに規制はないので罵倒、煽り何でもありである
コメントを使って「俺はグーを出す」といった
じゃんけん上位勢特有の心理戦ももちろんできる
じゃんけん準備画面
ルーム作成・入室部屋へ続く場所、特に面白みはない
(ここからの実装が一番大変だった)
対戦ルーム
部屋を立て、ここで来るべき敵を待つ...
敵の情報もここで開示される、ちなみにこのルームから退出するボタンなどはない
敵が格上でも戦士に撤退は存在しない、そんな厳しさを学べるだろう*2
対戦画面
⇩
ここで敵との熱い読み合いをここで楽しめる
(しかしここで一番エラーが起こる)
リザルト画面
負け
勝ち
プレイヤーが脳汁を絞り出すためだけの画面、敵のレート変動も見えるので
自分の勝ちにより相手がいかに” 堕ち ”たかを見ることができる
勝利後の一服をこの画面で過ごすのもいいかもしれない
おわり
以上がこのwebアプリの全容です
拙い文章だったかもしれませんが、ここまで読んでいただきありがとうございました
あとがき
このアプリ、完成したのは実は昨日(12/15)である*3
プログラミングずぶの初心者の自分がここまで実装できたのは
さたけ(@satakenkoki) から1から500まで教えてもらったおかげだ、感謝しかない
シンプルなUIだがVuikit(UIkit) のおかげでかなりオシャレにできて
自分の中では満足(じゃんけん狂人どもには少し物足りないかもしれない)
完成までに果てしないエラーの雨嵐を対処しただけもあってうまくいったときの
プログラミング特有の快感を味わえた
じゃんけんのルールを完全に理解した
— おおやま (@ohyama4z) 2019年12月10日
プログラミング、楽しすぎる
— おおやま (@ohyama4z) 2019年12月14日
これらはうまくいったときに脳汁をドクドク流しながら打った駄文