完全日本語版

Google Apps Script
フォーム連携完全ガイド

Web サイトからお問い合わせフォーム、reCAPTCHA トークン、任意の Base64 画像を HTTP POST で Google Apps Script Web アプリへ送信し、検証、画像保存、Google Sheets への記録、メール通知、エラーログまでを一連で実装します。

3 種類 POST コンテンツ形式
5 MB 既定の画像上限
19 章 完全な構築内容
Asia/Tokyo 既定のタイムゾーン

1エンドツーエンド処理

想定用途:Web サイトからお問い合わせフォーム、reCAPTCHA トークン、任意の Base64 画像を HTTP POST で Google Apps Script Web アプリへ送信します。

データ受信

URL エンコード、multipart、JSON に対応します。

安全な検証

reCAPTCHA、入力項目、画像を検証します。

データ保存

画像は Drive、文字情報は Sheets に保存します。

通知と記録

メール送信と LOG へのエラー記録を行います。

  1. application/x-www-form-urlencodedmultipart/form-dataapplication/json を受信します。
  2. Google reCAPTCHA を検証します。
  3. 氏名、電話番号、メールアドレス、メッセージ、画像を検証します。
  4. Base64 画像を指定した Google Drive フォルダへ保存します。
  5. フォーム内容を Google Sheets に記録します。
  6. 管理者へ HTML メールと画像添付を送信します。
  7. 画像、メール、メイン処理のエラーを LOG シートへ記録します。
  8. フロントエンドへ統一形式の JSON を返します。

2推奨 Apps Script ファイル構成

              Code.gs DriveAuthorization.gs appsscript.json
            
  • Code.gs:リクエスト処理、検証、保存、通知、エラーログを実装します。
  • DriveAuthorization.gs:Drive OAuth 認可とフォルダアクセス確認を手動で実行します。
  • appsscript.json:OAuth スコープを明示する任意の Manifest です。

3完全最適化コード:Code.gs

以下のコードを Code.gs に貼り付けます。識別子や Google API 名はそのまま利用できるよう維持しています。

本番公開前: REPLACE WITH を含む設定値をすべて置き換え、reCAPTCHA Secret はソースコードへ直書きせず Script Properties に保存してください。
完全な Code.gs を展開/折りたたむ
                
              

4Drive 認可とアクセス確認

手動実行する関数名の末尾にはアンダースコアを付けないでください。末尾にアンダースコアがない関数は Apps Script エディタ上部の関数一覧に表示されやすくなります。

完全な DriveAuthorization.gs を展開する
                
              

5必須設定

最低限、以下の設定を更新してください。

              SPREADSHEET_ID: "実際の Google Spreadsheet ID", FOLDER_ID: "実際の Google Drive フォルダ ID", SHEET_NAME: "Sheet1", ADMIN_EMAIL: "実際の管理者メールアドレス"
            

Spreadsheet ID

URL 例:https://docs.google.com/spreadsheets/d/1AbCdEf123456/edit
ID:1AbCdEf123456

Folder ID

URL 例:https://drive.google.com/drive/folders/1XyZ987654
ID:1XyZ987654

6reCAPTCHA Secret の設定

Secret Key をソースコードへ直書きしないでください。公開メッセージ、リポジトリ、スクリーンショット、共有資料に掲載された場合は、無効化して再発行してください。

Apps Script で以下を開きます。

              プロジェクトの設定 → スクリプト プロパティ → スクリプト プロパティを追加
            
プロパティ
RECAPTCHA_SECRET 実際の reCAPTCHA Secret Key

7Google Sheets の列順

内容
A 送信日時
B 氏名
C 電話番号
D メールアドレス
E メッセージ
F 画像リンク

LOG シートが存在しない場合は自動作成されます。

8Google Drive 認可の実行

  1. authorizeDriveAccessDriveAuthorization.gs に貼り付けます。
  2. 実際の TEST_FOLDER_ID を設定します。
  3. プロジェクトを保存します。
  4. Apps Script エディタの関数一覧から authorizeDriveAccess を選択します。
  5. 「実行」をクリックします。
  6. Google OAuth 認可フローを完了します。
  7. 対象 Drive フォルダにテスト用テキストファイルが作成されたことを確認します。
doPost を手動実行しないでください。デプロイ済み Web アプリから渡されるイベントオブジェクト e が必要です。

9authorizeDriveAccess が関数一覧に表示されない場合

  • 関数名の末尾にアンダースコアを付けないでください。
  • 関数は最上位で宣言してください。
  • 先にプロジェクトを保存してください。
  • どの .gs ファイルにも構文エラーがないことを確認してください。
  • Apps Script エディタを再読み込みしてください。
              // 正しい例:手動実行可能 function authorizeDriveAccess() {}  // 手動実行の入口としては非推奨 function authorizeDriveAccess_() {}  // 内部補助関数では末尾アンダースコアを使用可能 function parseDataUrl_() {}
            

10Google Drive フォルダ共有権限

OAuth 認可とフォルダ共有は別の要件です。Web アプリをデプロイするアカウントは以下を満たす必要があります。

  • フォルダを所有している、または明示的に共有されている。
  • ファイルを作成または編集する権限がある。
Web アプリを「自分として実行」に設定した場合、「自分」とはその Web アプリをデプロイしたアカウントを指します。

11Web アプリのデプロイ

              デプロイの種類:ウェブアプリ 次のユーザーとして実行:自分 アクセスできるユーザー:Web サイト要件に応じて選択
            

デプロイ者として実行する場合:

  • Drive はデプロイ者の権限を使用します。
  • Spreadsheet はデプロイ者の権限を使用します。
  • MailApp はデプロイ者のメール送信上限を使用します。
  • Web サイト訪問者は Drive フォルダ権限を必要としません。

コード更新後の再デプロイ

              デプロイ → デプロイを管理 → 編集 → 新しいバージョンを選択 → デプロイ
            

本番 Web サイトでは /exec URL を使用してください。

12任意の appsscript.json Manifest

通常、Apps Script は必要な権限を自動推測します。OAuth スコープを明示する場合は以下を使用します。

              {"timeZone":"Asia/Tokyo","exceptionLogging":"STACKDRIVER","runtimeVersion":"V8","oauthScopes":["https://www.googleapis.com/auth/drive","https://www.googleapis.com/auth/spreadsheets","https://www.googleapis.com/auth/script.send_mail","https://www.googleapis.com/auth/script.external_request"]}
            

スコープ変更後は通常、再認可が必要です。

13フロントエンド送信例

FormData

              
            

JSON

              
            
フロントエンドでは result.okresult.statusCode の両方を確認し、HTTP ステータスコードだけに依存しないでください。

14レスポンス形式

成功

              {"ok":true,"statusCode":200,"requestId":"一意の識別子","mailSent":true,"imageSaved":true,"fileUrl":"Google Drive ファイル URL"}
            

失敗

              {"ok":false,"statusCode":500,"requestId":"一意の識別子","error":"エラー内容"}
            

本番推奨設定:RETURN_DEBUG_INFO: false

15画像データ形式

完全な Data URL

              data:image/png;base64,iVBORw0KGgoAAA...
            

生の Base64

              iVBORw0KGgoAAA...
            

生の Base64 を送信する場合は、次も指定します。

              image_mime=image/png
            

許可形式:PNG、JPEG、JPG、WebP、GIF。既定上限は 5 MB です。

16セキュリティチェックリスト

  • reCAPTCHA Secret は Script Properties のみに保存する。
  • 本番環境ではデバッグレスポンスを無効にする。
  • 画像 MIME タイプとファイルサイズを制限する。
  • フロントエンドから受信した summary_html を信用しない。
  • escapeHtml_() でメール HTML インジェクションを防止する。
  • safeSheetText_() でスプレッドシート数式インジェクションを防止する。
  • 完全なトークンや Base64 画像をログへ記録しない。
  • 本番では MAKE_FILE_PUBLIC: false を既定にする。
  • 漏えいした Secret は無効化して再発行する。

17よくあるエラーと対処方法

Access denied: DriveApp

OAuth 認可未完了、別アカウントでログイン、Workspace 管理者による Drive 制限、権限取り消し、Manifest の Drive スコープ不足などが考えられます。

  1. authorizeDriveAccess を実行します。
  2. デプロイ用アカウントで認可を完了します。
  3. フォルダ ID を確認します。
  4. フォルダ共有権限を確認します。
フォルダが見つからない

完全な URL ではなく、フォルダ ID のみを渡してください。

                DriveApp.getFolderById("FOLDER_ID_ONLY");
              
エディタでのテストは成功するが doPost が失敗する
  • Web アプリを新しいバージョンへ更新したか確認します。
  • Web サイトが最新の /exec URL を使用しているか確認します。
  • Web アプリが正しいアカウントとして実行されているか確認します。
  • デプロイ用アカウントが Sheet と Drive フォルダへアクセスできるか確認します。
  • Apps Script の「実行数」ページと LOG シートを確認します。
他のユーザーが画像リンクを開けない

これは OAuth ではなく Drive の共有設定問題です。MAKE_FILE_PUBLIC: true を設定できますが、Workspace ポリシーで公開共有が制限される場合があります。

reCAPTCHA action が一致しない
                // フロントエンド grecaptcha.execute(siteKey, { action: "submit" });  // バックエンド RECAPTCHA_EXPECTED_ACTION: "submit"
              

フロントエンドとバックエンドの値を完全に一致させてください。

18完了チェックリスト

  • Spreadsheet ID を置き換えた。
  • Folder ID を置き換えた。
  • シート名が正しい。
  • 管理者メールアドレスが正しい。
  • Script Properties に RECAPTCHA_SECRET がある。
  • authorizeDriveAccess を手動実行した。
  • Drive テストファイルが作成された。
  • デプロイ用アカウントが Drive フォルダを編集できる。
  • Sheet の列順が正しい。
  • 新しい Web アプリバージョンをデプロイした。
  • 本番サイトで /exec URL を使用している。
  • 本番で RETURN_DEBUG_INFO が false になっている。
  • 実際のフロントエンド送信テストを完了した。
  • Sheets、Drive、メール、LOG、実行履歴を確認した。

19推奨設定順序

  1. 対象の Google Drive フォルダを作成する。
  2. Google Spreadsheet を作成する。
  3. ワークシートの見出し行を追加する。
  4. GAS デプロイ用アカウントへフォルダを共有する。
  5. 完全なコードを貼り付ける。
  6. CONFIG の設定を完了する。
  7. reCAPTCHA Secret を Script Properties に追加する。
  8. authorizeDriveAccess を実行する。
  9. authorizeRequiredServices を実行する。
  10. Web アプリとしてデプロイする。
  11. /exec URL をフロントエンドへ設定する。
  12. テストフォームを送信する。
  13. Sheets、Drive、メール、LOG、実行履歴を確認する。
完了条件:フロントエンドが ok: true を受信し、Sheets にデータが記録され、Drive に画像が保存され、管理者へメールが届き、LOG と実行履歴に未処理エラーがないこと。