devlog

主に web 開発とかプログラミングについて書きます

交通費精算自動化をサポートするSPAのWebサービスをReact/Typescript + ServerSide Kotlinで作ってリリースしました🎉

f:id:nkgr:20181021163335p:plain

URL

ExpensesAutomation

フロントエンドのレポジトリ

React + TypeScript に bulma というCSS フレームワークを利用して SPA を作成しました。 コンテンツのホスティングは Firebase を選択しています。

詳細はフロントエンド編で紹介しようと思います。

github.com

バックエンドのレポジトリ(レポジトリ自体はbitbucket で 非公開)

フロントエンドから叩かれるAPIサーバーは Springboot を Kotlinで書いており Heroku にデプロイしています。 また非同期でリクエストを裁く必要がある部分は AWS Lambda で Python で書いています。

これも詳細はバックエンド編で紹介しようと思います。

https://bitbucket.org/nokogiring/expenses-automation-api/src/master/

どんなサービスか?🏝

  • 領収書が不要な近接旅費の精算をサポートするサービス

  • Google Caledar に登録した予定から交通費を計算し経費精算用にフォーマットしたCSVを出力する

  • 趣味で作ったサービスなのでお金はかかりません。

  • 既に自社内でサービスの運用は開始しており、バグとかは随時もらって修正しています。

どんな人が使うことを想定しているか?😺

  • 主に営業の人。領収書が不要な近接旅費の精算が月末にたまる人。

使い方

  • Google Calenar に"【駅名】訪問先"のフォーマットで予定を登録します。

f:id:nkgr:20181021213341p:plain

  • アプリにログインすると1ヶ月間の移動の履歴を表示します。
  • 内容を確認して必要があれば修正し、CSVファイルを出力できます。

f:id:nkgr:20181021213351p:plain

  • 出力されたCSV ファイルは上記のようなイメージです。

f:id:nkgr:20181021213346p:plain

詳細な使い方は以下のチュートリアルのURL参照してください。

https://expenses-automation-app.firebaseapp.com/tutorial

作った動機 🤔

社内の営業の人が月末の夜遅くまで残って交通費精算をしていました。 何にそんなに時間がかかっているのかを伺ったところ、Google Calendar に登録した訪問先情報を元に Yahoo路線図で検索して Excel に金額を入力するという毎月末にやっているそうです。 せっかく Google Calendar に登録するという運用をしているのであれば、APIもありますし自動化できると思いサービスを作成してみました。

リアクション👍👎

ポジティブなリアクション

  • すぐに使ってもらえたのが嬉しくて、バグ報告をしてくれる人がいただけでも嬉しかったです。

  • 本来の目的である単純作業が減り楽になったと言ってくれた人がいたのも作った甲斐がありました。

ネガティブなリアクション

  • ネガティブなリアクションというか、そもそも使ってないし見てもいないという感じの人がいて結構ショックでした。 作業が今までのやり方から変わるので嫌だということや、結局趣味で作ったものなので、強制はできないから仕方ないかなと思います。

サービスを公開する目的

サービスに対するフィードバックが欲しい

元々社内向けツールなので、Google Calenar への登録内容や CSVのフォーマットは完全に社内の運用に最適化されています。 しかし、実際世の中の営業の人は近接旅費の精算に時間がかかっていそうなら運用を変更することで、自動化できるのではないかと思います。 運用的にハマるなら是非使ってみて欲しいです🙇🏻‍♂️

技術的なフィードバックが欲しい

今業務では React も Typescript も使っておらず、かつ独学なのでもっとフロントエンド力を高めるためにフィードバックが欲しいなあと思ってます。 Github のレポジトリを公開していますので、フィードバックいただきたいです。バグ報告でも!

次回予告

次回以降のこのサービスの技術的な側面からブログで紹介していきたいと思います。