GASで経費申請フォームを作ってみた（1/6）ー入力・画像保存・記録・メールをつなぐー
このブログでは、Google Apps Script（GAS）で作ったツールや、作る途中で気づいたことを紹介しています。「こんな使い方もできるんだ」と、普段の作業を見直すヒントになればうれしいです。
今回は、GASで作った経費申請フォームを紹介します。全6本に分けて、第1回は全体像、続く5本では使った機能をひとつずつ取り上げます。
第2回以降には、各機能を紹介するための短いコード例を載せています。各回のコード例は独立しています。順番に追加して、経費申請フォーム全体を完成させるものではありません。
経費申請フォームを自作した理由
もともとは、Googleフォームで経費申請を受け付けていました。ただ、使い方に合わせて改善したいことが増え、フォームの設定だけでは対応しきれなくなってきました。
まず、利用者がスマートフォンのカメラでレシートを撮影し、そのまま申請できるようにしたいと考えました。撮影から入力、送信までをひとつの流れで進められる画面を目指しました。
また、それまでのフォームは、レシート1枚につき1回回答する運用でした。複数枚あると同じ操作を繰り返すため、必要な分だけ入力欄を追加し、まとめて申請できるようにしたいと思いました。
もうひとつの課題は、金額などの入力ミスです。申請金額と内訳の合計が合っているか、8％・10％の消費税が税抜金額と整合しているかなど、送信する前に確認できる仕組みが必要でした。こうした項目をまたぐ細かなチェックは、Googleフォームの標準設定だけでは今回必要な形にできませんでした。
そこで、GASのWebアプリとして入力画面を作ることにしました。スマホでのレシート撮影、複数経費のまとめ申請、金額のチェックを、実際の申請の流れに合わせて組み込むためです。
申請の入力から、その後の処理までをつなぐ
経費申請では、購入日や金額を受け付けるだけでなく、レシート画像を保存したり、申請内容を一覧に残したりする必要があります。
今回まとめたかったのは、こうした一連の処理です。
申請者がフォームに入力して送信すると、レシート画像はGoogle Driveへ、申請内容はスプレッドシートへ保存します。申請後には、入力したメールアドレスへ確認メールを送ります。
画面で受け付けた情報を、その後の保存や連絡につなげる。GASの機能を組み合わせて、こうした流れを作りました。
ブラウザから使える入力画面を作る
申請画面は、GASのWebアプリとして用意しました。申請者情報と経費の入力欄を分け、複数の経費をまとめて申請できます。
HTML・CSS・JavaScriptで画面を作り、保存処理をGASへつなげています。
詳しくは第2回で紹介します。
※説明用のイメージです。実際の画面から項目名・配置などを一部変更し、架空のデータを使用しています。
入力内容をスプレッドシートに記録する
申請内容は、経費1件につき1行でスプレッドシートへ記録します。レシート画像のURLも同じ行に残し、内容と画像をたどれるようにしています。
申請者は入力画面を使い、管理する側は一覧から確認する形です。
詳しくは第3回で紹介します。
レシート画像をDriveに保存する
添付されたレシート画像はGoogle Driveへ保存し、そのURLを経費の記録に残します。
画像と申請内容を結び付け、確認する人が一覧から対応するレシートを開けるようにしています。
詳しくは第4回で紹介します。
年月に合わせて保存先を用意する
レシートの保存先は、申請日ではなく購入した年月で分けています。対象年月の保存先が未登録なら、指定した親フォルダの中で保存先を探し、なければ「2026年08月」のようなフォルダを作成します。
用意したフォルダのURLもシートへ記録し、次の申請で再利用できるようにしています。
詳しくは第5回で紹介します。
※説明用のイメージです。実際の画面から項目名・配置などを一部変更し、架空のデータを使用しています。
申請後に確認メールを送る
申請後には、入力した内容を見返せるように、申請者へ確認メールを送ります。
送信先にはフォームに入力されたメールアドレスを使い、画面に表示するGoogleアカウントの情報とは別に扱っています。
詳しくは第6回で紹介します。
Googleのサービスを、作業の流れに合わせて組み合わせる
今回のフォームでは、Webアプリを入口にして、スプレッドシートへの記録、Driveへの画像保存、メールでの連絡をつなげました。
利用時には、指定したスプレッドシートへアクセスできるかを確認する処理も入れています。画面を作ることに加えて、誰が使うか、どこへ保存するかも、運用に合わせて考える必要がありました。
GASでは、こうしたGoogleのサービスを組み合わせて、作業に合う仕組みを作れます。
入力するところから、その後の整理や連絡まで。普段は別々に行っている作業も、つなげられる部分がないか考えてみると、活用のアイデアが見つかるかもしれません。
自分の業務に自動化機能を追加したい方へ
経費申請や画像保存、申請後の連絡など、今の業務に自動化機能を追加したい方はご相談ください。現在の作業と希望する自動化を伺い、対応できる範囲をご案内します。