vue.js
Webサービス
Firebase
PWA
Vuetify

傾斜をつけた割り勘計算ツールを作ってみた

screenshot_trans.png

はじめに

忘年会等の飲み会イベントで幹事を任されるのは若手の宿命。

かく言う私も例外ではありませんでした。私の勤務先の場合、社員の年齢差が大きいため傾斜をつけることがほとんど。ただ、この傾斜計算、参加者全員分の年次を把握したり傾斜の具合を微調節したりと意外に面倒で時間をとられます。

いい感じのサービスがないか検索してみたものの、PCサイト用のものはスマホでレウアウトが崩れるし、スマホ向けにはネイティブアプリばかりでPCからは利用できず。意外にもPC・スマホ双方で適切に動くものは見つけられませんでした。

ないなら作ればいい、そこで会社向けに作ったのがこの割り勘計算ツール。

前振りが長くなりましが、今回作ったツールは上のものをベースに、外部公開向けの変更を加えたものです。

作ったもの

https://warikan.tool.icchi.me

実際に使ってみるとこんな感じ。

もともとは参加人数の多い飲み会後日のまとめ時に、Excelでやっていた傾斜計算をWebアプリに落とし込んだものでした。が、意外と飲み会現場で使っても便利で、個人的にはランダムに各自の支払料金を決める「運試しモード」が盛り上がるし、気に入っています。

構成

structure_warikan-calcurator.jpeg

構成はいたってシンプル。

今回の仕様では、特に複雑な処理もないためWebで実装。SPAフレームワークには普段使い慣れているVueを使っています。スマホとの親和性も考慮してPWAに対応しました。クライアントサイドだけで完結するため、ビルドして生成した静的サイトをfirebaseでホスティングしています。

コード

https://github.com/icchi-h/warikan-calcurator

最後に

ご意見ご要望お待ちしております。

方法はサイト内にも記載しているようにTwitterで投げてもらえれば。

ご要望や不具合などのご連絡は、お手数ですが以下の方法でご連絡をお願いいたします。

ハッシュタグ#warikantoolとメンション@icchi_hをつけてツイート
@icchi_h へダイレクトメッセージ

https://warikan.tool.icchi.me/about

もし需要があるなら、結果を共有できるようにサーバーサイドを用意して連携させてみようかな。