割り勘Webアプリ「WariPo（ワリポ）」を作りました。
旅行やイベントなどで複数人の支払いを記録しておき、最後に「誰が誰にいくら払えばよいか」を計算するWebアプリです。
WariPo
https://waripo.jp/
WariPoを作ったきっかけ
旅行などで複数人のお金をまとめて精算するとき、
- 誰かがホテル代をまとめて払う
- 別の人が食事代を払う
- 一部のメンバーだけが参加した支払いがある
- 途中で個別にお金を渡す
といったことが重なると、最後の計算が意外と面倒になります。
既存の割り勘サービスもありますが、今回特に欲しかったのが「途中精算」の記録でした。
最終精算の前に「AさんからBさんへ5,000円渡した」といったやり取りがあった場合も簡単に記録して、その金額を反映した残高を計算できるようにしています。
アカウント登録なしで使えるWebアプリに
WariPoではユーザー登録やログインを不要にしました。
グループを作成すると専用URLが発行されるので、そのURLを参加者に共有して使います。
スマートフォンへのアプリのインストールも必要ありません。
旅行やイベントのときに使うものなので、「使う前にアカウントを作る」という手順をできるだけなくして、URLを開いたらすぐ使える形にしました。
精算結果はPDFで保存
精算が完了したら、支払い履歴や精算結果をPDFでダウンロードできます。
WariPoのデータには保存期間があるため、旅行やイベントが終わったあとに記録を残しておきたい場合にも利用できます。
「誰が何を支払ったか」「最終的に誰から誰へいくら支払うか」をまとめて保存できるので、精算後の確認にも便利です。
React + PHPで開発
WariPoは、スマートフォンやパソコンのブラウザから利用できるWebアプリとして開発しました。
フロントエンドにはReactを採用し、操作のたびにページ全体を読み込み直すことなく、スムーズに支払いや精算内容を確認・編集できるようにしています。
また、スマートフォンでの利用を中心に、入力のしやすさやボタンの大きさ、画面遷移なども調整しました。
Reactを利用したWebアプリでは検索エンジンへの対応も課題になるため、トップページについてはSEOを考慮した構成にしています。
データは最終利用から90日間保存
アカウントを作らずに利用できるサービスなので、データを永久に保存する仕様にはしていません。
グループのデータは最終利用から90日間保存し、一定期間利用されなかったデータは削除する設計にしました。
旅行やイベントが終わって精算が完了すれば役目を終える、というサービスの性質にも合っているかなと思います。
SPAのSEO対策も
WariPoのアプリ部分はReactで作っていますが、トップページは検索エンジンからも内容を認識しやすくしたかったため、プリレンダリングにも対応しました。
JavaScriptを実行しない状態でも、トップページの見出しやサービス説明、使い方、FAQなどの本文がHTMLに含まれるようにしています。
Reactで小規模なWebサービスを作る際のSEOについても、今回いろいろ試すことができました。
とりあえずリリース
まだ追加したい機能や調整したいところはありますが、企画からデザイン・開発まで、本業と並行しながら実質2週間程度で制作し、まずは使える状態になったので公開しました。
旅行、ゴルフ、キャンプ、イベントなど、複数人のお金をまとめて精算するときに使っていただければと思います。
WariPo
https://waripo.jp/
