GASの処理をブラウザー上のボタンから呼び出す方法を説明します。今回は自分だけが利用するWebアプリで、あらかじめ指定した練習用Googleドキュメントをコピーします。画面で入力するのは新しいファイル名だけです。
スタンドアロンのGASもトリガーなどから実行できますが、手動操作用の画面を用意したい場合にWebアプリが役立ちます。画面を付けるだけで権限管理が安全になるわけではないため、この例は自分だけの練習用に限定します。
1:練習用の文書と出力先を設定する
架空の内容のGoogleドキュメントと、自分だけが閲覧・編集できる練習用フォルダを作ります。Apps Scriptの新規プロジェクトを開き、「プロジェクトの設定」のスクリプトプロパティへCOPY_SOURCE_IDとCOPY_FOLDER_IDを登録します。それぞれ複製元文書とコピー先フォルダのIDです。URL全体を入れないでください。
コピー元IDは文書URLの「/d/」と「/edit」の間、フォルダIDはフォルダURLの「/folders/」に続く部分です。コピー元と保存先をサーバー側で固定し、閲覧者から任意のIDを受け付けない構成にします。プロジェクト編集者はこれらの設定を変更できるため、プロジェクトも不用意に共有しないでください。
2:Code.gsにサーバー側の処理を保存する
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function copyPracticeFile(name) {
if (typeof name !== 'string') throw new Error('ファイル名を入力してください');
name = name.trim();
if (!name || name.length > 80 || /[\x00-\x1f\x7f]/.test(name)) throw new Error('ファイル名は改行なしの1~80文字で入力してください');
const props = PropertiesService.getScriptProperties();
const sourceId = props.getProperty('COPY_SOURCE_ID');
const folderId = props.getProperty('COPY_FOLDER_ID');
if (!sourceId || !folderId) throw new Error('スクリプトプロパティを設定してください');
const lock = LockService.getScriptLock();
if (!lock.tryLock(5000)) throw new Error('処理中です。結果を確認してから再操作してください');
try {
const source = DriveApp.getFileById(sourceId);
if (source.getMimeType() !== 'application/vnd.google-apps.document') throw new Error('練習用Googleドキュメントを指定してください');
const folder = DriveApp.getFolderById(folderId);
if (folder.getFilesByName(name).hasNext()) throw new Error('同名ファイルがあります。コピー先を確認してください');
const copied = source.makeCopy(name, folder);
return {id: copied.getId(), name: copied.getName()};
} finally {
lock.releaseLock();
}
}
doGetは画面を返し、copyPracticeFileが名前を検査してコピーします。同名のファイルがすでにある場合は作成しません。元文書の内容・名前・共有設定を変更するコードはありませんが、コピーは保存先の共有範囲に影響されるため、実際のアクセス権を確認してください。
3:index.htmlに入力画面を保存する
エディタのファイル追加からHTMLを選び、名前をindexにします。以下をindex.htmlへ保存してください。この版ではresult.html、plugin.html、css.htmlは使いません。CSSはstyleタグ内にまとめています。
<!doctype html>
<html lang="ja">
<head>
<base target="_top">
<meta charset="UTF-8">
<style>body{font-family:sans-serif;margin:24px;max-width:36em}input,button{font:inherit;padding:8px}#message{white-space:pre-wrap;overflow-wrap:anywhere}</style>
</head>
<body>
<h1>練習用文書のコピー</h1>
<form id="copyForm">
<label>新しいファイル名 <input id="fileName" required maxlength="80"></label>
<button id="submitButton" type="submit">コピーする</button>
</form>
<p id="message" role="status"></p>
<script>
const form = document.getElementById('copyForm');
const button = document.getElementById('submitButton');
const message = document.getElementById('message');
let busy = false;
form.addEventListener('submit', event => {
event.preventDefault();
if (busy) return;
busy = true;
button.disabled = true;
message.textContent = 'コピーしています。';
google.script.run
.withSuccessHandler(result => {
message.textContent = 'コピーしました:' + result.name + '\nファイルID:' + result.id + '\n保存先で内容を確認してください。';
// 成功後は連続実行せず、保存先を確認します。
})
.withFailureHandler(error => {
message.textContent = '完了を確認できません:' + error.message + '\n再送する前に保存先を確認してください。';
busy = false;
button.disabled = false;
})
.copyPracticeFile(document.getElementById('fileName').value);
});
</script>
</body>
</html>
google.script.runはHTML Serviceのページからサーバー関数を非同期に呼びます。成功・失敗のハンドラーで結果を表示するため、フォームの送信先URLやdoPostは不要です。通常のローカルHTMLとして開いても、このAPIは使えません。入力名やエラーはtextContentで表示し、HTMLとして挿入しません。
4:自分だけに公開し、1件を照合する
「デプロイ」→「新しいデプロイ」でウェブアプリを選び、実行するユーザーを自分、アクセスできるユーザーを自分のみとする設定を確認してデプロイします。表示名や選択肢はアカウント・組織設定で異なる場合があります。自分だけに限定できない場合は、匿名公開へ広げず管理者や公式資料を確認してください。
初回はDriveへのアクセス権限と処理内容を確認して認可します。発行されたURLを自分のアカウントで開き、まだ存在しない練習用のファイル名を入力して1回だけ送信してください。成功表示のIDと名前を、保存先で実際にできたコピーと照合し、元ファイルが残っていることも確認します。
送信中と成功後はボタンを無効にします。失敗時は再度操作できますが、通信切断でもコピー済みの場合があるため、先に保存先を確認してください。同名チェックは結果の改名・移動や別プロジェクトからの操作まで防ぐ仕組みではありません。スクリプトロックが抑えるのも同じプロジェクト内の同時処理です。
更新・公開終了とエラーの確認
コードを保存しただけでは、公開済みのバージョンは更新されません。「デプロイを管理」で既存のデプロイを編集し、新バージョンへ切り替えると同じ公開URLを維持できます。別の新規デプロイを作った場合は別URLになります。この版はHTMLに送信先URLを埋め込まないため、その書き換えは不要です。
練習が終わったら「デプロイを管理」で対象をアーカイブします。公開設定を他の利用者へ広げる場合は、利用者ごとの権限、操作対象、再送対策を別途設計してください。この自分用の例を、そのまま複数人向けや匿名向けに公開しないでください。
indexが見つからない場合はHTMLファイル名、設定不足ならスクリプトプロパティ、権限エラーなら実行アカウントと文書・フォルダへのアクセスを確認します。原因の切り分けはGAS│エラーの意味と対処法も参照してください。
検証範囲と公式資料
2026年10月23日に本文とコードを改訂しました。サーバー処理はローカル模擬環境で入力検査・固定対象・同名停止・ロック解放を確認し、HTML内のJavaScriptは構文を確認しました。Googleでの認可・実コピー・公開設定・ブラウザーからの通信・ボタン表示は未確認です。画面が出たことだけで動作完了とは判断しません。
HTML Serviceとサーバー関数の通信、Webアプリの設定、デプロイの管理が公式資料です。
GitHubのMOTOKI-LLC/cg-method-codeは旧版の場合があります。今回の練習には本文の2ファイルを使用してください。
旧実装の画面例
以下は以前のフォーム送信型の実装画像です。今回の2ファイル構成や現行の公開画面を検証した画像ではありません。現行例の操作は上の手順を使用してください。





関連するGASの操作




