GAS業務Webアプリ公開事例

写真付き現場報告書作成Webアプリ

GASでスマホ写真からPDF報告書を自動作成

工事現場や点検現場で、スマートフォンから写真と選択項目を送信し、Googleスプレッドシートの帳票テンプレートから写真付きPDF報告書を自動作成するGAS Webアプリの開発事例です。

概要

現場写真を報告書へ貼り付ける作業は、写真整理、サイズ調整、帳票への貼り付け、PDF化が手作業になりやすい部分です。この事例では、スマートフォンから写真と3項目の選択値を送信するだけで、Drive上に写真とPDFをまとめて保存できる仕組みにしました。

サーバー契約や専用DBを用意せず、Googleスプレッドシートを帳票テンプレート、Google Driveを保存先、Google Apps Scriptを処理基盤として使う構成です。小規模な現場DXや、まず試作して運用に合わせて育てる業務アプリに向いています。

実際の現場に合わせて、選択項目、写真枚数、帳票レイアウト、承認フロー、保存フォルダ構成などを調整できます。

使用技術

Google Apps ScriptGoogleスプレッドシートGoogle DriveHTMLPDF出力

実装・設計のポイント

スマートフォンから写真を撮影または選択して送信
写真ごとに3項目のプルダウン入力を付与
1ページ6枚、7枚以上は複数ページに自動分割
送信ごとにDriveフォルダを作成し、画像とPDFをまとめて保存
サーバー契約不要でGoogle Workspace上に構築

画面・出力イメージ

工事現場向け写真報告書Webアプリのカバー画像 — 現場写真の撮影・入力からDrive保存、PDF報告書作成までの流れをまとめたカバー画像です。

写真付き報告書作成Webアプリの入力画面 — スマートフォンから写真と選択項目を登録する入力画面です。

Driveに保存された画像とPDF報告書の出力結果 — 送信ごとに専用フォルダを作り、画像とPDFをまとめて保存します。

Googleスプレッドシートの写真付き報告書テンプレート — スプレッドシートを帳票テンプレートとして使い、写真付きPDFへ変換します。

関連する技術記事

GASで作る工事現場向け写真付き報告書Webアプリ

GASでスマホ写真付きレポートをPDF出力する方法

GAS Webアプリでスマホ写真を送信前に圧縮する方法

GASで送信ごとにGoogle Drive専用フォルダへ保存する方法

GAS帳票のセル配置をslots配列で管理する方法

GASで結合セルの左上セルに安全に値を入れる方法

GASでテンプレートシートを複製して複数ページPDFを作る方法

GAS Webアプリの入力途中離脱を防ぐ方法

GASのgoogle.script.runでエラーハンドリングを実装する方法

GAS WebアプリをSPA風に画面遷移させる方法

同様の業務アプリ開発について

現場ごとの入力項目、帳票レイアウト、保存先フォルダ、承認フローに合わせた GAS・Webアプリ・Excel VBAの業務改善ツール開発に対応しています。