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

はじめに

工事現場や点検作業では、現場写真を撮り、内容を整理し、報告書へ貼り付けてPDF化する作業がよくあります。

この作業は、写真の取り込み、サイズ調整、Excelやスプレッドシートへの貼り付け、ファイル名整理が手作業になりやすく、件数が増えるほど時間がかかります。

この記事では、Google Apps Scriptで構築した「スマートフォンから写真と選択項目を登録し、Googleスプレッドシートの帳票テンプレートから写真付きPDF報告書を自動作成するWebアプリ」の開発事例を紹介します。

このアプリでできること

• スマートフォンから写真を撮影または選択する
• 写真ごとに3つの項目をプルダウンで入力する
• 1ページ6枚の写真付き報告書を自動作成する
• 7枚以上は2ページ目、13枚以上は3ページ目に自動分割する
• 送信ごとに専用フォルダを作り、画像とPDFをGoogle Driveへまとめて保存する

GASで作る利点

このような現場向けアプリは、専用サーバーやデータベースを契約して作ることもできます。ただ、小規模な現場DXや社内利用では、まず早く試せる構成のほうが合うことも多いです。

Google Apps Scriptで構築すると、次のような利点があります。

• サーバー契約やサーバー構築が不要
• Googleスプレッドシートを帳票テンプレートとして使える
• Google Driveを画像とPDFの保存先として使える
• 選択肢の変更をスプレッドシート上で行える
• GoogleアカウントやDrive運用に乗せやすい

正確には、Google Driveやスプレッドシートをサーバー代わりに使う構成です。大規模な外部公開サービスというより、社内・チーム内で使う業務アプリを短期間で作る用途に向いています。

完成イメージ

送信すると、スプレッドシートと同じDriveフォルダ内に、1回の送信ごとの専用フォルダが作られます。

20260520_0935_屋上点検/
  屋上点検_01.jpg
  屋上点検_02.jpg
  屋上点検_03.jpg
  20260520_0935 屋上点検.pdf

スプレッドシートを準備する

まず、Googleスプレッドシートに設定シートとレポートシートを作ります。

設定シート

設定シートでは、写真ごとに入力する3項目のプルダウン候補を管理します。

B列: 入力1の候補
C列: 入力2の候補
D列: 入力3の候補
3行目以降: 実際の選択肢

レポートシート

レポートシートは、PDF出力用の帳票テンプレートです。コード側でセル位置を指定しているため、最初は画像と同じ配置で作るのが安全です。

セル配置は次のようにします。

| 写真番号 | 画像セル | 入力欄 | |---|---|---| | 1 | B2 | B3, B4, B5 | | 2 | D2 | D3, D4, D5 | | 3 | B7 | B8, B9, B10 | | 4 | D7 | D8, D9, D10 | | 5 | B12 | B13, B14, B15 | | 6 | D12 | D13, D14, D15 |

このレポートシートはテンプレートです。セル位置を大きく変える場合は、Code.gs側の設定も合わせて変更します。

Apps Scriptを開く

スプレッドシートの上部メニューから、拡張機能 → Apps Scriptを開きます。

Code.gsを貼り付ける

Apps ScriptのCode.gsへ、サーバー側の処理を貼り付けます。

以下が完成コードです。コピーしてCode.gsへ貼り付けます。

コードを読み込み中...

Index.htmlを追加する

次に、Apps ScriptでHTMLファイルを追加します。ここは間違えやすいところで、.gsファイルではなくHTMLファイルとして追加します。

以下をIndex.htmlへ貼り付けます。

コードを読み込み中...

Webアプリとしてデプロイする

右上のデプロイから新しいデプロイを作成し、種類をウェブアプリにします。

現場メンバーにURLだけで使ってもらう場合は、アクセス範囲を広めに設定する必要があります。ただし、URLを知っている人が使える設定にする場合は、URLの共有管理が重要です。

初回承認を行う

初回実行時は、Googleの権限承認が表示されます。

GASはDriveに画像やPDFを作成するため、Drive関連の権限が必要です。自分で作成したスクリプトであることを確認して承認します。

WebアプリURLを共有する

デプロイが完了すると、WebアプリURLが発行されます。

URLを知っている人が使える設定にした場合、このURLを第三者へ共有されると入力される可能性があります。現場内の共有ルールを決めて運用します。

Webアプリの使い方

操作は次の流れです。

1. WebアプリURLを開く
2. レポートタイトルを入力する
3. 写真を選択する
4. 入力1、入力2、入力3をプルダウンから選ぶ
5. 複数写真がある場合は次の画像を追加を押す
6. 必要な写真を登録したら送信してPDF作成を押す

PC画面ではファイル選択になりますが、スマートフォンでは撮影または写真選択として使えます。

技術的なポイント

画像はDrive保存 + IMAGE関数で表示する

スマホ写真をそのままSpreadsheetAppのinsertImage(blob)で貼り付けると、画像サイズ制限に当たりやすくなります。

この実装では、写真をDriveに保存し、その画像URLをIMAGE関数でスプレッドシートへ表示します。これにより、スマホ写真でも写真付きPDFへ出しやすくしています。

より詳しい実装上の考え方は、GASでスマホ写真付きレポートをPDF出力する方法にまとめています。

6枚ごとにページ分割する

1ページに6枚まで写真を配置し、写真が7枚以上ある場合はレポートシートをコピーして一時出力シートを作ります。

1〜6枚: レポート_出力_1
7〜12枚: レポート_出力_2
13〜18枚: レポート_出力_3

PDF作成時だけ出力用シートを表示し、それ以外を一時的に非表示にすることで、複数ページのPDFとして出力します。PDF作成後、一時シートは削除します。

このページ分割の考え方は、GASでテンプレートシートを複製して複数ページPDFを作る方法で詳しく整理しています。

送信ごとに専用フォルダを作る

1回の送信ごとにフォルダを分けると、PDFと元画像の対応関係が分かりやすくなります。

yyyyMMdd_HHmm_レポートタイトル/
  レポートタイトル_01.jpg
  レポートタイトル_02.jpg
  yyyyMMdd_HHmm レポートタイトル.pdf

この形にしておくと、現場名や点検日ごとに後から探しやすくなります。

注意点

• 設定シートとレポートシートの名前はコードと一致させます。
• レポートシートのセル配置は、最初は記事の画像と同じにします。
• Index.htmlはHTMLファイルとして追加します。
• WebアプリURLの共有範囲には注意します。
• Drive画像をリンク共有する場合、機密写真を扱う前に運用ルールを決めます。
• コードを変更した後は、必要に応じて再デプロイします。

開発事例としての見方

この事例は、Google Workspaceを使った小さな現場DXの例です。

専用サーバーや大がかりな業務システムを用意しなくても、Googleスプレッドシート、Google Drive、GASを組み合わせることで、現場入力からPDF保存までの流れを作れます。

現場ごとに必要な項目や帳票レイアウトは異なるため、実運用では次のような調整が必要になります。

• 入力項目を現場の報告内容に合わせる
• 帳票レイアウトを会社指定フォーマットに合わせる
• 保存フォルダ名やPDF名のルールを変更する
• 写真枚数やページ分割ルールを変える
• 共有範囲や権限承認の運用を整える

同様の現場報告書、点検報告書、作業完了報告、写真台帳のWebアプリ化については、実際の帳票や運用に合わせた開発・改良に対応できます。

関連する開発事例:

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

関連する実装テクニック:

• GAS Webアプリでスマホ写真を送信前に圧縮する方法
• GASで送信ごとにGoogle Drive専用フォルダへ保存する方法
• GAS帳票のセル配置をslots配列で管理する方法
• GASで結合セルの左上セルに安全に値を入れる方法
• GASでテンプレートシートを複製して複数ページPDFを作る方法
• GAS Webアプリの入力途中離脱を防ぐ方法

まとめ

GASで作る写真付き報告書Webアプリは、スマホ入力、Drive保存、スプレッドシート帳票、PDF出力を組み合わせた実用的な業務改善パターンです。

サーバー契約なしで始められるため、現場ごとの小さな改善を素早く形にし、運用しながら項目や帳票を育てていく用途に向いています。