こんにちは！はすみです。第1クォーター末試験の開始まで残り3日となりました。試験勉強はほぼ手つかずです。

試験勉強に手もつけず何をしていたのか？というと表題の「部活で使える備品管理システム」を作っていたのですが… Twitterに投稿したところ思った以上に反響をもらってしまいちょっと嬉しかったので作り始めてからここまでの話を書いていこうと思います。

試験勉強をせず昆布のwebアプリ開発に精を出していたはすみくんの図 pic.twitter.com/nSBxnv9CfY
— はすみ (@hsm_hx) 2018年5月26日

作ったきっかけ

年度も変わり私はコンピュータ部の副部長から部長へ昇進（？）、昨年度末に購入した新しい書籍やデバイスなどを新入生に紹介するなどなどしていました。コンピュータ部では基本的に各部員がそれぞれの作業に取り組む活動形態をとっており、新入生が入ってきたから先輩が付きっきりでプログラミングを教えてあげる…ということもなかなかできないため、入門書などの書籍を使った学習を主に新入生はスキルアップに励んでいます。

また、高学年になってくるとマイコンやwebカメラなどの部の備品として置いている周辺機器類を用いて開発する部員も増えてきます。忙しい時期はパソコンを持っていない新入生に部のノートパソコンを貸し出すなどすることもあるのですが…。

これまで部内で備品を借用するときに交わされていたのはたったの一言、

「この本借りて帰ります」「デバッグ用にコントローラー借ります。多分明日には返します」「バーチャルユーチューバーになりたいのでwebcam借ります」

などなど…

いつまで借りるのか？何台借りるのか？そもそも口頭で連絡するケースもあり記録も残らない…？

これっておかしいですよね？

私も「備品借りるときは紙に書き残していってね」など言っていましたが、冷静に考えると疑問が湧きますよね。

なんでコンピュータ部なのにそんなアナログで杜撰な管理してるの？

ということで、前々から構想だけはしていたweb備品管理システム、作りました。 ~~ちなみに完成したもののデモページがこちら~~（準備中）。

また、ソースコードはGitHubにて公開しているのでもし良ければあなたの部活にもどうぞ。

github.com

開発環境

卒研でLAMP環境のwebアプリ開発の勉強を始めたところだったのですが、どうせなら学校では扱わない言語を使いたい、と思い開発言語にはPython3(以下Python)を選択。 Pythonのwebフレームワークは今までFlaskだけ使ったことがあったのですが、Flaskに行き詰っていたこともありどうせなら、とDjangoを開発に使用しました。

データベースはDjango標準のままSQLiteを、UIにはBootstrapを使用。開発OSはAntergosです。

設計

開発を始める前にシステムの全体図を明確化したかったので落書き程度にデータ構造だとか状態遷移図みたいなものを書き出していきました。そのときのメモがこれです。

…とここにメモの写真を添付する予定でしたが見事にメモの所在が不明になっていました。捨てたのかもな。ガッハッハ！

f:id:mwc922_hsm:20180528204431j:plain

代わりにメモの再現を書きました。これで許してください。細かいところが違うかもですが大体はこんな感じでした。

私はどうも計画性というものを持ち合わせていないので開発欲が湧いてくるとついいそいそとエディタやらゲームエンジンを開いてしまうのですが、今回真面目に（といってもメモ程度ですが）設計から入るというのをやってみて、正直めちゃくちゃやりやすかったです。

頭に浮かぶ全ての仕様を即座にコードに変換できる天才的な脳味噌をしたプログラマの方々であればこんな工程要らないのかもしれませんが、私のような凡人にはそんな所業到底できそうもないのでシステム設計は軽くでも図式化しておくべきだと思います。

Django入門～実装：できたこと

前述の通り私はDjangoを使ったことがなかったのでDjangoについて勉強するところからでした。それどころか使ったことがあると言ったFlaskも本当に触りのみ、さらに半年以上前のことで、GETとPOSTの実装の仕方だとかそもそも両者の違いだとか、そういうところから勉強しました。

参考にしたサイトのリンクを以下に貼っておきます。

Djangoを最速でマスターする part1

Python Django入門 (1)

はじめての Django アプリ作成、その 1 | Django documentation | Django

このうち一番わかりやすいと感じたのはやはり3つ目、Django公式ドキュメントのチュートリアルですね。この辺は個人差があるのでいろいろと調べてみるといいかと思います。私はもう公式ドキュメントしか信じない。

今回作りたかったものは要するに

あらかじめDBに備品を登録しておく（web上からも備品の追加や削除をできるようにする）
登録された備品をリスト表示
リストから個々のページへリンク
リンク先では「貸出」「返却」「延長」の操作を可能とする

という流れ。一番大切なリンク先での操作について細かく見ていくと、

貸出

貸出を希望する人(自分)の名前を入力
備品データの貸出中かどうかを表す"state"が0（＝貸出可能）であれば以下の処理を行う
入力されたテキストデータを"borrower"に
"state"を1（＝貸出中）に
返却期限を表す"due"を貸出日から2週間後に

返却

返却を希望する人(自分)の名前を入力
入力されたテキストデータを"borrower"と照合
一致する場合"borrower"を空に、"state"を0に

延長

延長を希望する人(自分)の名前を入力
入力されたテキストデータを"borrower"と照合
一致する場合"due"を現在の値+1週間または今日の日付+1週間に

といった流れになっています。つまり、このwebアプリは「データの表示」→「入力」→「現在のデータと照合」→「データの書き換え」という非常に単純な流れで作れてしまうわけです。

この程度であれば上記の参考リンクを辿りながら適当な箇所を作りたい仕様に置き換えて作っていくことで十分動くものが作れます。というか作れました。

また、Djangoは標準でadminページが備わっており、仕様の箇条書きの1番目に書いてあった「web上からも備品の追加や削除をできるようにする」という項目は標準機能のみでクリア。プロジェクトを作っただけでログイン機能のついたadminページ作ってくれるの最高じゃん。

Bootstrapを使うのもこれまた初めてだったんですが、めっちゃ便利だな～と思いました（小学生並みの感想）この辺については上記参考リンクの1番目の記事、また使用したテンプレート"SB Admin"のデモページなどを参考にしながら書いていきました。

さらに、備品の貸出・返却・延長操作が行われた場合Slackの部活ワークスペースで貸出者と備品内容、期限を通知するbotも実装しました。この辺やってるときに今回のアプリPythonで開発しててよかった～～って思いましたね。 Slackとの連携にはSlackerを使いましたが…Slackbotの方が圧倒的に情報が充実してるイメージがあるので今後受け継いでいくことを考えると書き直したほうが良いかもしれないです。

Django入門～実装：できなかったこと

同時に2つ以上のデータをGET/POSTするときに使えるformsの使い方がいまいちよくわからず、本当は"Borrow"，"Return”，"Extension"の3つをラジオボタンから選択し自分の名前を入力してSubmitするとうまいこと動く、って感じにしたかったんですが諦めました。この辺、というかDjangoの機能なんかについてはまだまだ勉強を始めたばかりなので公式ドキュメントをちょっとずつ読んでいきたいと思っています。

また、入力する名前が部員によって一意に定まらないのは不便だなあというか、その人の固有のページから返却処理とかできればいいよなあと思いました。宇部高専、学生証がICカードになっていてPaSoRiで読み取りができたはずなので、部費でPaSoRi買って学生証で備品管理できたらかっこいいですね。 ICカードの情報とSlackのIDを紐付けられればただ処理の内容をPOSTするだけでなくメンションする機能とかも付けられそうだな～など。