メインコンテンツへスキップ
見出し画像

Google Apps Script(GAS)を使ってLINEから入力できる家計簿を作った話｜f4エンジニアブログ

    f4samurai公式

    f4samuraiで活躍中のエンジニアメンバーがお届けするエンジニアブログ。

    今回は、社内エンジニア向けに開催された『技術記事コンテスト』にて優秀賞を受賞した記事を紹介します！

    はじめに

    初めまして！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は開発・実行環境がいらず簡単なスクリプトだとブラウザ上でコードを書いてそのままデプロイできる気軽さが大きなメリットだと思いますが、

    1. GitHubと直接連携してソース管理ができない

    2. テストを実行する基盤がない

    といったデメリットがあります。

    今回のサービスを作っていくと保守性を高める上で無視できないレベルのコード量になりそうだったので下記方法で解消しました。

    1. GitHubとの連携
      GitHubとの連携のためこちらの仕組みを導入しました。

      1. 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 Recruitサイト
    f4samuraiでは、一緒に働くメンバーを積極採用中です！「まずはちょっと話を聞いてみたい」というご相談も歓迎いたします。

    ▼エンジニア採用特設サイトはこちら！

    あなたへのおすすめ