Google Apps Script (GAS) を使用すると、HTML入力フォームを作成し、ユーザーから入力されたデータをGoogle Spreadsheetに保存することができます。この記事では、GASを使ってHTML入力フォームを作成する方法を段階的に説明します。
手順1: Google Apps Scriptプロジェクトを作成する
- Google Driveにアクセスし、新しいGoogle Spreadsheetを作成します。
- ツールバーの「拡張機能」メニューから「App Script」を選択します。
- スクリプトエディタが開いたら、プロジェクト名を入力します（例: "HTMLFormProject"）。
手順2: HTMLファイルを作成する
- スクリプトエディタで、ファイル > New > HTMLファイルを選択します。
- HTMLファイルに名前を付けます（例: "index.html"）。
- 以下のHTMLコードを貼り付けます:
<!DOCTYPE html>
<html>
<head>
<title>入力フォーム</title>
</head>
<body>
<h1>入力フォーム</h1>
<form id="myForm">
<label for="name">名前:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">メールアドレス:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="button" value="送信" onclick="submitForm()">
</form>
<script>
function submitForm() {
google.script.run.processForm(document.getElementById("myForm"));
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
手順3: GASコードを書く
- スクリプトエディタで、以下のコードを貼り付けます:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(formObject) {
var formData = formObject;
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([formData.name, formData.email]);
}
-
doGet()関数は、WebアプリとしてデプロイされたときにHTMLファイルを表示します。 -
processForm()関数は、HTMLフォームから送信されたデータを受け取り、スプレッドシートに追加します。
手順4: WebアプリとしてGASプロジェクトをデプロイする
- スクリプトエディタで、公開 > Webアプリケーションとして導入...を選択します。
- 新しいデプロイを選択し、以下の設定を行います:
- プロジェクトバージョン: 新規作成
- 次のユーザーとしてアプリケーションを実行: 自分
- アクセスできるユーザー: 全員（匿名ユーザーを含む）
- デプロイをクリックし、表示されるWebアプリのURLをコピーします。
手順5: HTML入力フォームをテストする
- コピーしたWebアプリのURLをブラウザで開きます。
- 名前とメールアドレスを入力し、送信ボタンをクリックします。
- Google Spreadsheetを開き、フォームから送信されたデータが追加されていることを確認します。
以上の手順により、Google Apps ScriptとHTMLを使って入力フォームを作成し、ユーザーから送信されたデータをGoogle Spreadsheetに保存することができます。このテクニックを応用することで、様々なWebアプリケーションをGASで構築できます。
ローコードツールでスプレッドシートのUIを構築するという選択肢も
GASとHTMLを使ってスプレッドシートのデータを操作する方法を説明しましたが、コーディングに不慣れな方にとっては敷居が高く感じられるかもしれません。
そこで、ローコードツールの 『クエリア』 を使えば、コーディング不要でスプレッドシートのデータを使ったUIを簡単に構築することができます。
クエリアは、スプレッドシートのデータを使ってWebアプリケーションを作成するためのローコードプラットフォームです。ドラッグ＆ドロップ操作でUIを設計し、スプレッドシートのデータとの連携も簡単に設定できます。
Discussion