GAS│作成したスクリプトをウェブアプリケーションから実行する方法

2021年3月19日2026年9月26日

スプレッドシートのGASならカスタムメニューから実行できますが、スタンドアロンなどGoogleドライブ上のスクリプトはエディタを開いて実行する必要があります。

スクリプトの扱いに慣れていない利用者が使う場合は、直感的に操作できるUIが必要です。

本記事では、GASをウェブアプリケーション（HTML）化してブラウザから実行する方法を解説します。

作成したGASをウェブアプリケーションから実行する手順

GASを実行するウェブアプリケーションを作成する手順を解説します。

STEP

スクリプトの作成

まずスクリプトエディタを開きます。

Apps Script | Google for Developers

以下の3つの処理を記述します。

HTMLを表示するスクリプト（doGet）
データを送信するスクリプト（doPost）
ドライブのファイルをコピーするスクリプト（copyFile）

以下のスクリプトをエディタに貼り付けます。

function doGet() {
  const toppage = HtmlService.createTemplateFromFile("index");
  return toppage.evaluate();
}

function doPost(postdata) {
  const temp_id = postdata.parameters.date_temp_id.toString();
  const folder_id = postdata.parameters.date_folder_id.toString();
  const filename = postdata.parameters.date_filename.toString();

  copyFile(temp_id,folder_id,filename);

  const resultpage = HtmlService.createTemplateFromFile("result");
  return resultpage.evaluate();
}

function copyFile(temp_id,folder_id,filename) {
  var temp = DriveApp.getFileById(temp_id);
  var folder = DriveApp.getFolderById(folder_id);
  temp.makeCopy(filename, folder);
}

STEP

HTMLの作成

画面表示用の「index.html」と、送信完了画面の「result.html」を作成して記述します。

<!DOCTYPE html>
<html>

<head>
<base target="_top">
</head>

<body>
<h1>ファイルのコピー</h1>

<div class="section">
	<form method="post" action="https://script.google.com/a/macros/dropseed.co.jp/s/アプリケーションのID/exec">

		<p><label>コピー元ファイル　<input type="text" name="date_temp_id" placeholder="テンプレートIDを入力"></label></p>
		<p><label>コピー先フォルダ　<input type="text" name="date_folder_id" placeholder="フォルダIDを入力"></label></p>
		<p><label>ファイル名　<input type="text" name="date_filename"></label></p>
		<p><input type="submit" name="button" value="送信"></p>

	</form>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
  </head>

  <body>
    送信が完了しました。
  </body>
</html>

STEP

ウェブアプリケーションの表示

画面右上の「デプロイ」をクリックします。

発行されたウェブアプリのURLをコピーし、index.html内の送信先URLとして貼り付けます。

「新しいデプロイ」を実行するたびにアプリケーションのURLが変わります。

コードを変更した場合は、index.htmlに設定した送信先URLの更新漏れに注意してください。

設定完了後、デプロイしたウェブアプリケーションのURLを開きます。

実際に動作を確認します。

入力フォームに必要事項を入力し、送信ボタンをクリックします。

result.htmlの画面が表示されれば、スクリプトの実行は完了です。

指定したGoogleドライブの保存先にファイルが正しくコピーされているかも確認してください。

CSSでウェブアプリケーションの見た目を整える

デザインを調整したい場合の手順です。

スタイルを設定する場合は、CSS用のHTMLファイルを作成します。

body {
	margin: 20px;
}
h1 {
	font-size: 2.0rem;
}
.section {
	margin: 40px;
}

作成したCSSを読み込むコードをindex.htmlに追加します。

<head>
	<base target="_top">
	<?!= HtmlService.createHtmlOutputFromFile('plugin').getContent(); ?>
	<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>

CSSを調整することで、用途や好みに合わせたデザインに変更できます。