Zenn
👻

GASで少し複雑なフォームを作る方法

2023/10/12に公開
2件
GAS
#
フォーム
#
サーバレス
tech

対象読者
・htmlとjsの知識がある方
・googleフォームを使いたかったけど要件的に無理で、AppSheet は有料だから嫌な方向け

更新履歴

  • 2023/10/17 なおきさんのコメントをみて formタグのactionを自動で変更する を修正

GASで入力フォームを作る場合のあれこれ

googleフォームより高度なフォームを作りたい場合のあれこれ。

何はともあれ公式

https://developers.google.com/apps-script/guides/html?hl=ja

リスト

ページタイトル変更

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とかを使いましょう。
https://cdn.jsdelivr.net/

ブートストラップを使用する例)

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

なおきなおき
index.html
<form method="POST" action="<?= url ?>"></form>

のところは、変数を経由しなくても直接関数呼び出しでいけますよ

index.html
<form method="POST" action="<?= getUrl() ?>"></form>