はじめに
初めまして！f4samuraiサーバサイドエンジニアの田中です。
今回は、社内の第4回技術記事コンテストで優秀賞をもらった記事を紹介します。
技術記事コンテストには毎回テーマがあります。
僕が受賞した第4回のテーマは 「今までで一番の作り物」 でした。
仕事で作ったものはBtoBサービスが多く書きづらかったのでプライベートで作った一番のもの(というよりただ直近作ったものかも)を紹介します。
家計簿サービスを作ったきっかけ
家計簿の管理、皆様はどうされていますでしょうか？
もともと我が家では家計簿を共有できる良い感じのアプリがなかったので、Googleフォームから日々の買い物内容を入力しそれをGoogleスプレッドシートで管理していました。
僕はこれで十分だったのですが、同居人から「ブラウザを開いてフォームに入力するのは面倒だからLINEとかでできるようにしてほしい」という要望がありました。
ちょうど「【LINE】Messaging API＋スプレッドシートで同棲生活の家計計算を自動化」という、ほぼ同じようなことをされている方の記事を見つけたので、今回は+α でCI/CDを含めた仕組みを作ったことを共有します。
サービスの概要
- 下記のようにLINE上から入力した家計簿情報をLINE Messaging API,Google Apps Script(以下GAS)を経由してスプレッドシートに登録させる
- 加えてCI/CDを行い、ログをGCP Cloud Loggingにためてアラート発報をSlackに連携する
入力は、次のルールで行います。
1行目:カテゴリ
2行目:金額
3行目:購入日(yyyyMMDDやdd、今日、昨日とかの文字列)
4行目:購入方法
5行目:メモ
下記のようにカテゴリなど一部データはスプレッドシートで入力規則を指定しています。
LINEに入力された内容は、スプレッドシートに連携されます。
スプレッドシートでは分析など各種管理を実行することができます。
データの削除もLINEから実行することができます。
CI/CDの導入
GASは開発・実行環境がいらず簡単なスクリプトだとブラウザ上でコードを書いてそのままデプロイできる気軽さが大きなメリットだと思いますが、
- GitHubと直接連携してソース管理ができない
- テストを実行する基盤がない
といったデメリットがあります。
今回のサービスを作っていくと保守性を高める上で無視できないレベルのコード量になりそうだったので下記方法で解消しました。
1. GitHubとの連携
GitHubとの連携のためこちらの仕組みを導入しました。
https://github.com/google/clasp
claspとはGoogle製のOSSツールで、GASをローカルで開発・管理できるツールです。
ReadMeにもありますが、clasp pushなどのコマンド操作で簡単にGASにデプロイできる点、個人的に読みやすく保守のしやすいTypeScriptで書いたコードをGASのスクリプトファイル形式gsに変換してくれる点で便利でした。
また、ローカルでエディタを用いた開発や、GitHubでソースコード管理もできるようになります。
2. テスト
claspを入れたことでコードをTypescript化できたので、JavaScipt用のテストフレームワークJestでテストを作成いたしました。
また、claspもJestも特に複雑な設定をすることなくそのままパイプライン上でも使えるので、mainブランチへのマージなどを契機にテストやデプロイまでできるようにしました。
今後とまとめ
このサービスを運用してかれこれ１年近く経っているのですが、最近同居人から
- 金額とメモ以外の入力が面倒くさい（LINEのリッチメニューでボタンぽちぽち形式にできそうだけどメニュー数の上限があって難しい）
- というか入力そのものが面倒くさい（Google Vision APIとかでレシート画像からテキスト変換できそう）
という要望がきており、「面倒くさい」という感情はこういう何かを生み出すアイデアに直結するエンジニアにとって大事な資質でもあるなと改めて思いました。
最後までお読みいただき、ありがとうございました！
▼ f4samuraiについて