サークル向けに初めてのWebアプリを作った話
初投稿です．
前々から何かしら動くものを作ってみたいなと思いつつもネタが無いのを言い訳理由に手を出せずにいたWebアプリ開発をやってみたので，自分用のメモも兼ねてつらつらと書いていきます．
ちなみに今回作ったアプリは所属しているサークル向けのもので一般に公開する予定はないですし，この記事では用いた技術的な話もあまり出てこないです．作成時にはこんなこと考えてたなあ，というのを後々思い出すための，あくまで個人的なメモだと思ってください．
あと記事を書くというのも初の試みなので読みづらいところが多々あるかと思いますが，あしからず．
作成に至った経緯
アプリの内容の前に，まず作成に至った経緯について．
現在僕が大学で所属しているサークル*2には，会計係という端的に言えばサークル内のお金を管理する人がいて，数年前は僕自身もこの役職を担っていました．サークル内での飲み会(宴会)が行われるときに，宴会費用を徴収するのも会計係の仕事でした．このときの仕事内容を具体的に言うと，次のようになります．
- 宴会場に他の部員たちより早く行き，到着した参加者から順次宴会費を徴収する．
- 徴収するべき金額と，実際に徴収した金額が一致するかを確認する．
一見簡単そうに見える作業なんですけど，これがなかなか手間で，もしも2.の行程で金額がズレていたらなんらかの徴収ミスを犯したことになってしまうので，いつも神経をすり減らしていたような記憶があります．というかこの金額が合わないと周りの人たちは飲み始めているのに自分だけ飲めないと言うなんとも悲しい状況になってしまう．この作業の何が手間だったのかというと，このサークルでは宴会を開く際に，
- 部員の名簿を印刷して宴会の１週間ほど前から部室に置いておき，
- そこに各部員が出欠を表明．
- 宴会時には会計係がそのプリントを使って，宴会費を徴収した人にチェックを入れる．
- 参加予定者全員をチェックできたら，そこから金額を手作業で計算．
というシステムを採用していました．特に4.の金額計算なんですが，１次会と２次会で宴会費や参加者数が異なっている場合が多く，その分計算がややこしくなっていました．また，参加者数もその都度数え上げていたので手間がかかっていた記憶があります．このようなミスを誘発しそうなシステムに違和感を覚えながら*3も，まあ気をつけて取り掛かればミスも起きないだろう，と思いつつ１年間仕事をこなしていました．
会計係の立場も離れ，最近は院生になったこともありサークルにもあまり参加していなかったんですが，７月頃久しぶりに宴会に参加してきました．たまたま今の会計係である後輩の近くに座ったので，その仕事ぶりを見て懐かしく思っていたときに，先程述べた｢金額が合わない問題｣が発生したらしく，慌てている後輩たち*4を見てやはりこのシステムは改善した方が良いのでは…と思いました．そこで，宴会の出欠であったり徴収した金額であったりを管理するものを作ろうと思い至ったわけです．
作成に取り掛かるまで
作る気力があるなら自分が現役の時に作ってただろうし，一から勉強するのも大変だろうし，そもそも作る時間があんまり取れないし…．という風に２年ほど前から自分に言い訳をし続けていたんですが，先の宴会時の光景を見て，まあ暇があれば作ってみようかな，程度の心持ちになりました．そして諸事情により夏休みが暇になったので重い腰を上げて作成に取り掛かることにした次第です．
使ったフレームワークはDjango*5で，これは特にこだわりがあった訳ではなく，僕が普段よく使っている言語がPythonだから，という程度の理由です．まずDjangoの勉強をしなくては，ということでDjangoのチュートリアルとして評判の良かった Django Girls Tutorial でざっと流れを学びました．諸々のセットアップからHerokuへのデプロイまでの全体像がざっとカバーされていたので，初学の教材としては良かったと思いました．そのまま実装すると一部バグが出たりする*6んですが，その辺りはQiita等で調べて解決できました．
必要な機能たち
ようやくアプリの具体的な話になります．本アプリを作成するにあたって必要な機能をざっくりと列挙すると次のような感じになります．
- 各部員が各々の出欠を登録できる機能
- 宴会時に会計係がお金を徴収した人をチェックできる機能
- 現時点で徴収されているべき金額を計算する機能
今回は会計係だけではなく，宴会場となるお店の予約や人数の連絡をしてくれる宴会係という役職の人たちも使える，次の機能もついでに実装しました．
- 部員名簿を作成，編集できる機能
- 名簿から出欠表を作成する機能
- 宴会情報を宴会に応じて設定できる機能
- 参加予定人数，現時点での参加人数を表示する機能
- OBなどの急な参加者にも対応できる機能
- 出欠受付の締め切りを設定できる機能
以下では，それぞれの機能についてその意図や，実装上つまずいた話とかを軽くしていきます．貴重な技術要素．
各部員が各々の出欠を登録できる機能
いわゆる出欠表明のこと．これまでは部室に設置されていた出欠表に直接◯(出席)とか×(欠席)とかを書き込む，もしくは宴会係に出欠連絡をする必要があったんですが，これが自分のPCやスマホからできるようになりました．便利ですね．
実装としては各部員の出欠状況を表すModelを用意して，Formによってそれを編集する感じです．
ここからの機能は全て管理者としてログインしないと使えない機能で，宴会係か会計係だけが使るようになっています．
宴会時に会計係がお金を徴収した人をチェックできる機能
宴会費を徴収した人にチェックを入れていた作業です．これまでは出欠表に◯が付いていた人からお金を回収したら，会計係がそれを塗りつぶして●にすることで回収済みかどうかのチェックをしていました．本当にペンで塗りつぶしていました．これをスマホでポチポチするだけで済むようにしたのがこの機能です．便利ですね．
この機能を実装するために，上の各部員が出欠を登録できるFormとは別のFormを用意しました．こちらのFormも各部員の出欠状況を編集できるようになっているんですが，その選択肢に●などの通常の出欠Formでは選べないものが追加されています．会計係側で出欠状況を編集するにあたっては，１人チェックしては更新して…という処理がスマートではないと感じたため，Ajaxによる非同期通信を使っています．実装で最もつまずいた箇所の一つでしたが，このおかげで非常に効率的に作業を行えるようになったと思います．（ちょっと表示はダサくなりましたが…．動けば良いのだ．）↓こんな感じの処理が，ページ遷移なしで行われます．
現時点で徴収されているべき金額を計算する機能
徴収した金額を計算する機能．つまりは「参加人数×宴会費」を計算するだけで，この金額は出欠表に表示されます．ここでいう参加人数は”宴会費を徴収した人の数”で，すなわち●が付いている人の数になります．手作業で計算していた時は，●の数を数え上げて，宴会費を掛けて，ということをしていました．これをn次会ごとにやっていたので，当然それぞれ参加人数や宴会費も異なるわけですし，さらに参加者が全体で70人以上になることもしばしばあって，非常に手間のかかる作業でした．特に人数の数え上げはミスの温床だと個人的には思っていたので，ここを自動でやってくれるというのは非常に助かります．めちゃくちゃ便利．
実装としてはただ単にn次会ごとに●を数え上げて，そこにn次会の宴会費を掛けて，それらの和をとって出力するだけです．とても簡単．
部員名簿を作成，編集できる機能
これはまあそのままの意味です．名簿には各部員の名前とその人の学年，もし幹部であった場合は役職名*7をつけられるようにしました．
これに関しては，名簿から除名削除する機能も実装しました．これで間違って同じ人を登録してしまった場合などに対処できます．削除の際に確認用のモーダルウィンドウを表示するよう実装しましたが，ここも少しつまずいたポイントでした．
名簿から出欠表を作成する機能
部員名簿をもとに出欠表が作成できます．いままでは某表作成ソフトで出欠表をあらかじめ作っておき，宴会のたびに１週間ほど前に印刷して部室に置いていたようですが，これがスマホでできるようになりました．便利ですね．
これも単に，作成時点で部員名簿に登録されている現役部員全員の名前を反映した表を作成するように実装しただけでした．*8
宴会情報を宴会に応じて設定できる機能
これまでの出欠表にはその宴会の日程であったり，会場，金額などが記されていて，これらの情報は宴会係が出欠表を印刷したあとに書き込んでいました．これらの宴会情報を設定したり，修正したりできるようにしました．便利です．
実装としては各情報を入力するFormを用いた程度です．また，この宴会情報の入力は出欠表作成時に同時に行えて，作成後に修正することもできます．
参加予定人数，現時点での参加人数を表示する機能
宴会係は宴会の参加予定人数を見積もってお店の予約をしてくれるんですが，もちろん想定よりも参加者が多くなったり少なくなったりする場合もあり，そのような時はお店に連絡して参加予定人数を訂正する必要がありました．この参加予定人数は，出欠表に◯が付いている人を数えれば良いのですが，いちいち数えるのはとても面倒…ということで，これを数え上げて表示する機能を実装しました．これにより，出欠表のページを見るだけで現時点での参加予定人数が分かるようになりました．また宴会時に，参加人数(お金を受け取った人・●のついた人)も数え上げておくことで，現時点での参加人数も瞬時に分かるようにしました．こうすることで，「参加予定だけどまだ来ていない人の数」もすぐ分かるようになりました．とても便利．
これも単に◯の数と●の数をそれぞれ数え上げて表示するだけなので，実装上特に難しい点はありませんでした．この程度の実装で今までの苦労が解消されると考えると，どうして現役の時に作らなかったのか，とつい思ってしまいます．
OBなどの急な参加者にも対応できる機能
宴会によっては卒業生が参加する場合もあり，これまでは出欠表の余白に書き込んで対応していました．OBが多く参加したときなどは表がぐちゃぐちゃになって大変見にくくなった記憶があります．
今回，出欠表作成時にはOB等を除いた現役部員のみの名前が載るようにしているので，OBが参加する場合は宴会係側でその都度追加する必要があります．そこで，「名簿に名前はあるけど出欠表に名前がない人」を出欠表に追加する機能を実装しました．主にOB向けの機能ですが，「出欠表作成後に入部した新規部員」も想定して実装しています．これによって急な参加者が多い場合でも綺麗に表示できるようになっています．便利です．
実装としては，新規参加者を追加する際に「名簿に名前はあるけど出欠表に名前がない人」を取得して表示し，そこから人を選んで，出欠情報をFormに入力して追加する，という手順を取っています．名簿にも名前がない場合は先に登録する必要があるため，新規参加者追加ページから名簿の部員追加ページに飛べるようにしています．
出欠受付の締め切りを設定できる機能
これは今までの宴会周りでは無かった機能になります．部員が本アプリ上で出欠を表明できる期間を設定し，その締め切りを過ぎたら部員側では出欠を編集できないようにしました．宴会係・会計係としては，宴会が始まってから出欠を弄られると色々と面倒，という理由からこの機能を追加しました．すごい便利．ちなみに締め切りを過ぎた場合は直接宴会係に連絡してもらって対応します．
実装としては，締め切り日時を宴会情報として出欠表作成時に設定し，その日時を過ぎれば出欠表へのリンクと出欠登録のリンクが切れるようにしただけで，特別難しいことはしていないです．宴会係・会計係の管理者側は締め切り後であっても出欠表の編集ができるようになっています．
この機能は元会計係のOGの方から頂いた意見を元に実装したものです．ありがとうございました．
あとがき
頭に思い浮かんだ文章をそのままつらつらと書いてきましたが，今回のWebアプリ作成でやったことは大体この通りです．細かいところではまだまだありますが，もし聞きたい方がいれば直接聞いてください…．
制作期間としては，８月中旬に取りかかってから必要な機能をすべて実装して形にするまでで１０日くらい，そこから色々な人に実際に触ってもらい意見聴取をして改良をした，といった感じです．
一通り作ってみてつまずいた，難しかった点としては，
- Model等の必要な機能の定義
- 完全に個人の見切り発車で取りかかってしまったので，後々になってこのModelにはこのFieldがあった方が便利，やっぱりここにはこの機能も欲しい，といったように開発中で行ったり来たりしてました．要件定義を最初にしっかりと練ることが大事だということを知れました．
- スクリプト周り
- HTMLとか，CSSとか
くらいかな．もっとあると思うけど，パッと思い浮かんだのはこの辺り．
全体の感想としては，一つのものを完成させるまでに学ぶことが非常に多く手応えがあったけれど，自分が思い描いた機能が実装できて実際に動いた時はとても嬉しかったです．作成に取り掛かってみたら意外にあっさりと完成したので，もっと早くやっておけば良かったというのが正直なところです．あと完成物を他人に見せて良い反応をしてもらえるとそれだけで楽しいですね．
先日，実際の宴会でちゃんと動くかを現役会計係の隣でテストしてみたのですが，金額の計算ミスや人数のミスもなく（一応現役会計係よりも早く）仕事を終えることができました．ここでバグってたらこの記事もお蔵入りになっていたので良かったです．今回はとてもシンプルな処理を組み合わせただけで特別凝った処理はしていないのですが，初めてのWebアプリ開発にしては，明確な使い道のあるなかなか良いものを作れたのではないかな，と満足しています．とりあえずはひと段落ということで，今後は利用者の意見を取り入れつつ，暇を見て改良を加えていけたらいいなと目論んでいます*9．
なんにせよ，元会計係としてその仕事を効率化できたのでとても満足です*10．後輩たちが実際に使ってくれるかどうかは不明ですが．
最後になりましたが，今回作成したものをチェックし，機能面，UI面で様々な意見をくださった元宴会係のOGの方，現役WebエンジニアのOBの方，元会計係のOGの方，現宴会係・会計係の方々には非常に感謝しています．ありがとうございました．
長文になってしまった．ではまた．何かあれば．
*1:1年前ほどにRailsのチュートリアルに少し触れた程度なので未経験です．
*2:不思議なことに院生になっても卒業扱いにならないんですよね…
*3:否定するつもりは全くなくて，現によくできたシステムだと当時は思っていました．
*4:最終的にはズレてなかったようで良かったです．
*5:途中までずっと"ディージャンゴ"って読んでた．
*6:whitenoiseのversionによるバグとか．
*7:部長とか，会計係とか，宴会係とか．
*8:ちなみに，役職がある幹部の人たちは出欠表作成時に自動的に◯が付けられます．怖いね．
*9:あとは僕の卒業後に管理してくれる人を探さねばならない．募集してます．
*10:このサークル，他の場面ではここ２年ほどでGoogleフォームとかスプレッドシートとか活用し始めていたのに，宴会周りだけいまだに紙面上で手作業だったのでとてもモヤモヤしてた．
