Google Apps Script (GAS) を使用すると、HTMLフォームからGoogleスプレッドシートに値を受け渡すことができます。また、GASからHTMLに値を受け渡すことも可能です。以下は、それらの手順を説明します。
HTMLからGASへの値の受け渡し
1. HTMLフォームの作成
まず、値を入力するためのHTMLフォームを作成します。以下は例です。
<!DOCTYPE html>
<html>
<head>
<title>フォーム</title>
</head>
<body>
<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.addData(document.getElementById("myForm"));
}
</script>
</body>
</html>
2. GASコードの作成
次に、Google Apps Scriptエディタを開き、以下のコードを追加します。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function addData(form) {
var sheet = SpreadsheetApp.getActiveSheet();
var name = form.name;
var email = form.email;
sheet.appendRow([name, email]);
}
-
doGet()関数は、HTMLファイルを表示するために使用されます。 -
addData()関数は、HTMLフォームから受け取ったデータをスプレッドシートに追加します。
3. HTMLファイルをGASプロジェクトに追加
HTMLファイル（例ではindex.html）をGASプロジェクトに追加します。
4. デプロイ
プロジェクトをウェブアプリケーションとしてデプロイします。
GASからHTMLへの値の受け渡し
1. HTMLコードの作成
GASから受け取った値を表示するためのHTMLコードを作成します。
<!DOCTYPE html>
<html>
<head>
<title>データ表示</title>
</head>
<body>
<div id="output"></div>
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(data) {
document.getElementById("output").innerHTML = data;
}
</script>
</body>
</html>
2. GASコードの作成
GASエディタで、以下のコードを追加します。
function doGet() {
return HtmlService.createHtmlOutputFromFile('output');
}
function getData() {
var sheet = SpreadsheetApp.getActiveSheet();
var data = sheet.getDataRange().getValues();
return data;
}
-
doGet()関数は、HTMLファイルを表示するために使用されます。 -
getData()関数は、スプレッドシートからデータを取得し、HTMLに返します。
3. HTMLファイルをGASプロジェクトに追加
HTMLファイル（例ではoutput.html）をGASプロジェクトに追加します。
4. デプロイ
プロジェクトをウェブアプリケーションとしてデプロイします。
クエリパラメータを使った値の受け渡し
1. GASコードの作成
GASエディタで、以下のコードを追加します。
function doGet(e) {
var template = HtmlService.createTemplateFromFile('params');
template.name = e.parameter.name;
template.email = e.parameter.email;
return template.evaluate();
}
-
doGet()関数は、クエリパラメータを受け取り、HTMLテンプレートに値を渡します。
2. HTMLテンプレートの作成
HTMLテンプレート（例では params.html ）を作成します。
<!DOCTYPE html>
<html>
<head>
<title>パラメータ表示</title>
</head>
<body>
<p>名前: <?= name ?></p>
<p>メールアドレス: <?= email ?></p>
</body>
</html>
3. HTMLテンプレートをGASプロジェクトに追加
HTMLテンプレート（例では params.html ）をGASプロジェクトに追加します。
4. デプロイ
プロジェクトをウェブアプリケーションとしてデプロイします。
5. クエリパラメータを使ってアクセス
デプロイしたウェブアプリケーションのURLに、クエリパラメータを追加してアクセスします。
例: https://script.google.com/macros/s/your-script-id/exec?name=John&email=john@example.com
ローコードツールでスプレッドシートのUIを構築するという選択肢も
GASとHTMLを使ってスプレッドシートのデータを操作する方法を説明しましたが、コーディングに不慣れな方にとっては敷居が高く感じられるかもしれません。
そこで、ローコードツールの 『クエリア』 を使えば、コーディング不要でスプレッドシートのデータを使ったUIを簡単に構築することができます。
クエリアは、スプレッドシートのデータを使ってWebアプリケーションを作成するためのローコードプラットフォームです。ドラッグ＆ドロップ操作でUIを設計し、スプレッドシートのデータとの連携も簡単に設定できます。
Discussion