飲み会の傾斜計算が面倒だったのでアプリ作ってみた

作ったアプリ

傾斜割り勘ツール「KEISHAN」
https://keishan.jp/

背景

会社の壮行会、忘年会、新年会、参加者は部長1名、課長3名、係長4名、若手社員10名、
そんな飲み会の幹事を任され続けて早一年。
何度も傾斜をつけての支払い金額の計算を実施しました。

しかし、この「傾斜」が意外と難しいのです。Excelで頑張ればできないこともないですが、ちょうどよく全員が納得できる傾斜をつけるのにはいささか時間がかかりすぎてしまいます。

そこで、便利な飲み会傾斜計算アプリがないか調べてみましたが意外とそういったアプリは少ない。。。
傾斜計算はできてもメンバーをまとめて登録できなかったり、傾斜の値をを逐一変更しないと金額が変更できなかったりと少しばかり使いづらいと感じました。

せっかくIT企業に勤めているのだから自分でも何か作りたいという欲求もあり、傾斜計算アプリ「KEISHAN」の開発に着手しました。

飲み会傾斜計算アプリ「KEISHAN」

KEISHAN

KEISHANを使うと何が嬉しいか

1.面倒な金額の微調整が発生しない

Excelで傾斜計算をしようとす際、支払い金額に納得がいかない場合、誰かの金額を上下させます。
誰かの金額を変えると、合計金額が変更されるのでどこかで帳尻を合わせないといけません。
この作業が傾斜計算で最もめんどくさいと感じています。
KEISHANでは「傾斜」を広げたり縮めたりすることで微調整が簡単にできます。

2.参加不参加に対応できる

1次会は参加したけど、2次会は参加していない人が出てくると傾斜計算はその複雑さを発揮します。KEISHANならチェックボックスを外すだけで簡単に計算ができます。

3.大人数での傾斜割り勘が簡単

参加者が多ければ多いほど、役職、年次のレンジが大きくなり支払い金額の算出が難しくなりますがKEISHANでは個人に対して「傾斜」という、いわば財力的な指標を与えて計算するので、視覚的に同じ役職、年次の方を同じ支払い金額に調整することができます。csv形式でまとめて参加者を登録することもできます。

使い方

1.お会計を登録する

まずは1次会、2次会など傾斜計算の対象となるお会計を登録。
5つ（5次会）まで登録可能です。

2.参加者を登録する

次に参加者の登録。
一人ずつ登録することもできますが、カンマ区切りでまとめて参加者を登録できます。(実は「、」でも数字が全角でも登録可能)

まとめて登録の例
①「まとめて登録」に参加者をcsv形式で入力

②「一括追加」を押下
参加者が反映されます。

参加者の左端にチェックボックスがありますが、これは「傾斜一括変更」のための機能です。

傾斜一括変更の例（課長と係長を同じ傾斜にしたい場合）
①一括変更したい参加者にチェックをつける

②適用したい傾斜を入力
1~100の数字を入力してください。

③「適用」ボタンを押下
結果が反映されます。

※「傾斜」の決め方

参加者登録で突然出てくる「傾斜」という値。
「ここにどんな数字を入れたらいいか分かりません」という声をたまに頂くので少し解説します。

結論、「まずは役職や年次に応じて感覚で適当に入れちゃってOK」です。
この数字は単なる比率を表しています。
また、後からいい感じに修正できる機能を作りました。

それでも気になる方のために説明すると、
例えば、合計金額20,000円で参加者3名の傾斜がそれぞれ、部長：100、課長：80、新人：20だったとしましょう。
するとアプリ内では
部長の支払い金額　= (100 / (100+80+20)) × 20,000円 = 10,000円
課長の支払い金額　= (80 / (100+80+20)) × 20,000円 = 8,000円
新人の支払い金額　= (20 / (100+80+20)) × 20,000円 = 2,000円

つまり、支払い金額は100:80:20の比率に調整されます。
これならエクセルでいいじゃんと思うかもしれないですが、傾斜の微調整や、1次会は参加したけど2次会は参加しなかった場合など加味すると少しExcelで計算するのは難しかったりします。

3.傾斜計算結果を確認する

「傾斜計算」のタブに移動すると、傾斜計算テーブルが表示されています。
最小単位を、100円、500円、1000円から選ぶことができます。
「傾斜で並び替え」ボタンを押下すると傾斜の数値順に表がソートされます。

例えば課長は忙しくて2次会から参加、新人くんは最近の若者なので1次会で帰宅したとします。その場合は該当のチェックを外せばその支払い金額は0円になります。そしてこの支払い金額が気に入らない場合は下のボタンで傾斜を広げたり縮めたりできます。
最後にコピーボタンですが、Excelなどにこの結果を直接貼り付けたい時に使えます。
csv形式でクリップボードにコピーされます。

以上がKEISHANの大まかな使い方です。ぜひお試しあれ。

KEISHANの構成

普段業務で使っているAngularとGCPをメインに構成しました。
最初Angularで作っていたのですが、IOSやAndroidのネイティブアプリにもゆくゆくは対応したいという気持ちと個人開発ではReactをよく使うのでReact Nativeに書き換えました。

本番環境へのデプロイ手順（CI/CD）は下記です。
①githubで特定の命名規則に従ってタグを作成
②Cloud Buildのトリガが起動し、DockerFile, cloudbuild.yamlからイメージをArtifact Registryに格納、Cloud Runをデプロイ

ドメインはお名前.comで購入し、CloudRunのカスタムドメイン機能で設定しました。

リリースノート

2023/8

・初回リリース

2025/3

・全体的なレイアウト、デザインの修正
・各参加者の傾斜をテキストボックスで修正できる機能を追加
・各参加者の傾斜を少しずつ調整できるボタンを追加
・チェックした参加者の傾斜を一括変更できる機能を追加