株式会社ココロファン - エンジニアリング事業部所属の Sassy です。
最近は組織作りと外部のエンジニアリング支援業務と少し社内の受託業務に関わっています！
今回は自社で保有している書籍の貸出システムを作ってみました。
作ろうと思ったきっかけ
これを作ったのが結構前でうろ覚えですが、当初会社で書籍購入を行う福利厚生を導入した時に読み終わった本を別の社員に貸し出せるようにして貸出状況や誰に貸しているかを管理できるようにしたいというところが発端だったと思います。
何で作ったか？
フロントエンドにはReact、バックエンドにはNode.jsを使いました。
Reactは React Create App を使って作りました。
UIコンポーネントは MaterialUI を採用してます。（あまりデザインにはこだわっていないので割と簡素な作りになってます）
私も主業務がある中での開発でしたので、今回の取り組みはスピード重視で利用できるものはどんどん利用していきました。
バックエンドについては、直近でTypeScriptを使っていたのと当時社内で動ける人が私だけでしたので、1人でサクッと作れるようにしたかったためバックエンドもTypeScriptベースの言語で作ろうと思いました。
その中でバックエンドのフレームワークを検討していて出会ったのが FoalTS です。
FoalTSとは？
FoalTSは TypeScriptベースのフレームワーク であり、フルスタックなフレームワークです。
私がFoalTSに決めた理由はこれです（笑
Build prototypes in hours, full applications in days.
まずは動くものを最速で作ることが重要と認識していたため、これを信じしてFoalTSに決めました。
1人でやるうえで大事なのは以下にモチベーションを下げないか、といっても時間が経つと下がってしまうのは当然のことなので、下がりきる前に作ることでした。
実際使ってみて型がちょっと弱いところがありましたが、何かしら方法はあるのでしょう。
使ってみた感想は割とサクッと作れます！
日本語の情報が少ないですが、今のところドキュメントの閲覧だけで作れています。
このFoalTSにはReact Create Appと連携設定をコマンド一発でしてくれる機能があり、確かにプロトタイプを爆速で作るにはよさそうかもという印象を受けました。
実際に作った社内書籍管理システム
まずは1枚目は 未ログイン時のトップページ です。
認証はSlackアカウントを用いた認証を実装しました。
弊社のコミュニケーション手段としてslackを活用しているためです。
そのためSlackアカウントでログインを行い貸出返却を行うことで、どのSlackユーザーが申請を出したのかを分かるようにしました。
まだ未実装ですが、Slackアカウントでの認証であれば貸出期限を決めて、期限を過ぎたら該当ユーザーにメンションで督促通知を出したりもできますね。
またGoogle Workspaceも契約しているのでGoogle認証でもよかったのですが、何かユーザーへ通知を出すにしてもGoogleアカウントとSlackアカウントの紐づけを行ったりなど発生したりするので、それであればSlackを利用する方が利便性が高かったからです。
2枚目は ログイン時のトップページ です。
ログインを行うと「貸出返却申請」というリンクが表示されます。
「貸出返却申請」リンクの上に貸出ステータスのバッジもあるので現在その書籍が借りられているのかどうかが確認できます。
「貸出返却申請」リンクをクリックしてもらうことで申請ページへ遷移します。
3枚目は 貸出返却の申請ページ です
申請ページでは、書籍のタイトルと「貸出」「返却」「キャンセル」ボタンがあり、貸出が行われていない状態だと「返却」ボタンが押せないようにしています。
また、貸出が行われている状態だと「貸出」ボタンを押せないようにしています。
そしてこの画面で申請した情報はSlackBotと連携してBotがSlackにて管理者宛に通知を送るようにしています。
その通知を受け取った管理者が申請者に本の受け渡しを行った後にSlack上で受け渡しの完了コマンドを叩くことで貸出や返却の確定処理を行い、この画面でのボタンの活性非活性の制御やトップ画面でのステータスが切り替わります。
4枚目は 貸出履歴の一覧ページです
何をいつ借りていつ返却したか確認できます。
書籍のタイトル部分に申請ページへのリンクも付けたので、履歴から過去に借りた本を再度借りたい場合に便利です。
管理機能については現在Slackからコマンドを叩くことによって処理するように実装しており、パラメータに ISBN を与えることでGoogle booksから書籍データを引っ張ってきて書籍登録を行うようにしています。
本当はAmazonが良かったのですが、Amazon Advertising API をつかわないと商品情報が取れず、すぐに使えるような状態ではなかったためです。
やってみて感じたこと
FoalTSというフレームワークの使い勝手もある程度わかったし、何より小さいアプリケーションでもよいのでスモールに作ってリリースして、後は興味を持ったメンバー同士で少しづつ改修しスキルアップや社内の利便性を向上できるツールの土台が作れたので非常に良かったです。
後々できる人が増えてきたら言語変えたりフレームワークを変えたりしてもいいですし。
それまでに仕様やワークフローを徐々に固めていけば良いと考えてます。
最後に
社内に公開を目指して4月までには必要な機能の実装を行っていきたいです。
現在の管理機能はslackからコマンドを打つことで実現していますが、管理者向けに画面を作っていこうと考えてます。
また今後は貸出期限や最大貸出数を設けて、返却期限を過ぎた場合に督促メールをslackにて送るみたいな細かいところも作っていこうと思います。
株式会社ココロファンでは受託や自社プロダクトの開発も行なっており、やってよかったこと、やってわかったこと、便利なノウハウを皆さんに共有できるように、これからも積極的に技術記事をアップしていきたいと思います。