|
| 1 | +--- |
| 2 | +title: Google Apps Script で Google Drive にファイルをアップロードできるフォームを作成する（Base64方式） |
| 3 | +tags: |
| 4 | + - GoogleAppsScript |
| 5 | + - form |
| 6 | + - GAS |
| 7 | + - GoogleDrive |
| 8 | +private: false |
| 9 | +updated_at: '2025-11-30T22:22:26+09:00' |
| 10 | +id: 8df51c21f69463913f33 |
| 11 | +organization_url_name: foundingbase |
| 12 | +slide: false |
| 13 | +ignorePublish: false |
| 14 | +--- |
| 15 | + |
| 16 | +## はじめに |
| 17 | + |
| 18 | +業務効率化でGoogleフォームを使う機会は多いが、「ファイルのアップロード」機能を使おうとすると、「回答者にGoogleアカウントでのログインが必須になる」という壁にぶつかる。 |
| 19 | +Google アカウントを持っているユーザーしかアクセスしないなら問題ありませんが、アカウントを持っていないの人からはファイルを集めることができない。 |
| 20 | + |
| 21 | +そこで、Google Apps Script (GAS) と HTML を使って、「誰でも（ログイン不要で）」「スマホから」「画像をアップロードできる」フォームを自作した。 |
| 22 | + |
| 23 | +## 仕組みの概要 |
| 24 | + |
| 25 | +GASの google.script.run は、HTML上の File オブジェクトを直接サーバー側に送ることができない。そのため、以下のような手順を踏む必要がある。 |
| 26 | + |
| 27 | +- Client (HTML/JS): <input type="file"> でファイルを選択 |
| 28 | +- Client (HTML/JS): FileReader を使い、ファイルを Data URL (Base64文字列) に変換 |
| 29 | +- Communication: google.script.run で Base64文字列をGAS側に送信 |
| 30 | +- Server (GAS): 受け取った文字列を Utilities.base64Decode でデコードし、Blob化して Google Drive に保存 |
| 31 | + |
| 32 | +### 実装コード |
| 33 | + |
| 34 | +#### 1. HTML / JavaScript (クライアント側) |
| 35 | + |
| 36 | +ポイントは FileReader を使ってファイルを非同期で読み込み、読み込み完了後に送信データに追加している点です |
| 37 | + |
| 38 | +```html |
| 39 | +<!DOCTYPE html> |
| 40 | +<html> |
| 41 | + <head> |
| 42 | + <base target="_top" /> |
| 43 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 44 | + </head> |
| 45 | + <body> |
| 46 | + <form id="uploadForm"> |
| 47 | + <label> |
| 48 | + ユーザー名： |
| 49 | + <input type="text" name="userName" required /> |
| 50 | + </label> |
| 51 | + |
| 52 | + <label> |
| 53 | + 添付ファイル： |
| 54 | + <input type="file" name="attachmentFile" required /> |
| 55 | + </label> |
| 56 | + |
| 57 | + <button type="button" onclick="handleFormSubmit()">送信</button> |
| 58 | + </form> |
| 59 | + |
| 60 | + <script> |
| 61 | + function handleFormSubmit() { |
| 62 | + const form = document.getElementById('uploadForm'); |
| 63 | + const formData = { |
| 64 | + userName: form.userName.value, |
| 65 | + }; |
| 66 | + const fileInput = form.attachmentFile; |
| 67 | + if (fileInput.files.length === 0) { |
| 68 | + alert('ファイルを選択してください'); |
| 69 | + return; |
| 70 | + } |
| 71 | + const file = fileInput.files[0]; |
| 72 | + const reader = new FileReader(); |
| 73 | +
|
| 74 | + reader.onload = function (e) { |
| 75 | + const fileData = { |
| 76 | + fileName: file.name, |
| 77 | + mimeType: file.type, |
| 78 | + data: e.target.result, |
| 79 | + }; |
| 80 | +
|
| 81 | + google.script.run |
| 82 | + .withSuccessHandler(onSuccess) |
| 83 | + .withFailureHandler(onFailure) |
| 84 | + .processForm(formData, fileData); |
| 85 | + }; |
| 86 | +
|
| 87 | + reader.readAsDataURL(file); |
| 88 | + } |
| 89 | +
|
| 90 | + function onSuccess(res) { |
| 91 | + alert('送信完了！保存先URL: ' + res.url); |
| 92 | + document.getElementById('uploadForm').reset(); |
| 93 | + } |
| 94 | +
|
| 95 | + function onFailure(e) { |
| 96 | + alert('エラーが発生しました: ' + e); |
| 97 | + } |
| 98 | + </script> |
| 99 | + </body> |
| 100 | +</html> |
| 101 | +``` |
| 102 | + |
| 103 | +#### 2. Google Apps Script (サーバー側) |
| 104 | + |
| 105 | +受け取ったBase64文字列から不要なヘッダー部分（例: `data:image/png;base64,`）を取り除き、デコードして保存します。 |
| 106 | + |
| 107 | +```javascript |
| 108 | +function doGet() { |
| 109 | + return HtmlService.createTemplateFromFile('index') |
| 110 | + .evaluate() |
| 111 | + .addMetaTag('viewport', 'width=device-width, initial-scale=1') |
| 112 | + .setTitle('ファイルアップロードフォーム'); |
| 113 | +} |
| 114 | + |
| 115 | +function processForm(formData, fileData) { |
| 116 | + try { |
| 117 | + const folderId = 'YOUR_FOLDER_ID_HERE'; |
| 118 | + const folder = DriveApp.getFolderById(folderId); |
| 119 | + const base64Data = fileData.data.split(',')[1]; |
| 120 | + const decodedBlob = Utilities.newBlob( |
| 121 | + Utilities.base64Decode(base64Data), |
| 122 | + fileData.mimeType, |
| 123 | + fileData.fileName, |
| 124 | + ); |
| 125 | + |
| 126 | + const newFileName = formData.userName + '_' + fileData.fileName; |
| 127 | + decodedBlob.setName(newFileName); |
| 128 | + |
| 129 | + const file = folder.createFile(decodedBlob); |
| 130 | + return { success: true, url: file.getUrl() }; |
| 131 | + } catch (e) { |
| 132 | + throw new Error(e.toString()); |
| 133 | + } |
| 134 | +} |
| 135 | +``` |
| 136 | + |
| 137 | +#### デプロイ時の最重要ポイント |
| 138 | + |
| 139 | +このフォームを「Googleアカウントを持っていない人」に使ってもらうためには、デプロイ設定が非常に重要。 |
| 140 | + |
| 141 | +- GASエディタ右上の「デプロイ」 > 「新しいデプロイ」 |
| 142 | +- 次のユーザーとして実行: 「自分 (Me)」 |
| 143 | + - ここを「ウェブアプリケーションにアクセスしているユーザー」にしてしまうと、投稿者にDriveへの書き込み権限がないためエラーになる |
| 144 | +- アクセスできるユーザー: 「全員 (Anyone)」 |
| 145 | + - これでログイン不要の公開フォームになる |
| 146 | + |
| 147 | +### 複数ファイルの対応 |
| 148 | + |
| 149 | +上記の例は1ファイルですが、複数の input type="file" がある場合は、JavaScript側で Promise.all を使って全ての FileReader の読み込みを待ってから google.script.run を実行するように実装するとスムーズ |
| 150 | + |
| 151 | +## まとめ |
| 152 | + |
| 153 | +Base64変換を挟むことで、Googleフォームでは実現できない「ログイン不要のファイル収集」が可能になる。 |
| 154 | +活用範囲は非常に広いです。ぜひ試してみてください。 |
0 commit comments