👻
GASで少し複雑なフォームを作る方法
対象読者
・htmlとjsの知識がある方
・googleフォームを使いたかったけど要件的に無理で、AppSheet は有料だから嫌な方向け
更新履歴
- 2023/10/17 なおきさんのコメントをみて formタグのactionを自動で変更する を修正
GASで入力フォームを作る場合のあれこれ
googleフォームより高度なフォームを作りたい場合のあれこれ。
何はともあれ公式
リスト
ページタイトル変更
htmlを読み込んで出力するコードは以下のようになる。
server.gs
function doGet() {
const htmlName = 'index';
const template = HtmlService.createTemplateFromFile(htmlName);
const outputHtml = template.evaluate();
return outputHtml;
}
しかしhtml内のtitleタグは無視されるので以下のようするといい。
server.gs
function doGet() {
const htmlName = 'index';
+ const titleText = '〇〇フォーム';
const template = HtmlService.createTemplateFromFile(htmlName);
const outputHtml = template.evaluate();
+ outputHtml.setTitle(titleText);
return outputHtml;
}
htmlの一部書き換え
クエリパラメータを画面に表示される場合で説明
https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXX/exec?name=mazumazu
のようにurlにnameを設定しているとして
server.gs
-function doGet() {
+function doGet(e) {
+ const name = e.parameter.name;
const htmlName = 'index';
const titleText = '〇〇フォーム';
const template = HtmlService.createTemplateFromFile(htmlName);
+ template.name = name;
const outputHtml = template.evaluate();
outputHtml.setTitle(titleText);
return outputHtml;
}
画面に表示したい場合はこちら
sample.html
<div><?= name ?></div>
分岐に使いたい場合はこちら
sample.html
<? if (name === 'mazumazu') { ?>
<div>mazumazu確認用!</div>
<? } ?>
2行目のnameがmazumazuの場合だけ<div>mazumazu確認用!</div>
が表示される
formタグのactionを自動で変更する
次の理由でフォームの送信先を動的に変えたい
・gasでサーバを立てるとデプロイごとにURLが変わる
・開発環境と本番環境でフォームの送信先を変えたい
しかしjsでdocument.location.href
を取得しても空になる。
解決策はgasでurl取得関数を作成し、画面側で呼び出す。
server.gs
+function getUrl() {
+ return ScriptApp.getService().getUrl();
+}
function doGet(e) {
const name = e.parameter.name;
const htmlName = 'index';
const titleText = '〇〇フォーム';
const template = HtmlService.createTemplateFromFile(htmlName);
template.name = name;
const outputHtml = template.evaluate();
outputHtml.setTitle(titleText);
return outputHtml;
}
index.html
<form method="POST" action="<?= getUrl() ?>"></form>
画面側で好みのフレームワークを使いたい
jsdelivrとかを使いましょう。
ブートストラップを使用する例)
sample.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
</html>
誰かの参考になれば幸いです。
Discussion
のところは、変数を経由しなくても直接関数呼び出しでいけますよ
ありがとうございます。
修正します。