ホーム‎ > ‎GAS‎ > ‎

HTMLのフォームからGASにPOSTする

2015/11/25 6:37 に ピリ辛. が投稿
タイトル通り、HTMLのフォームからGASへPOSTする方法について考察していたので、その記録です。
現段階では正直あまりキレイな方法ではないです。

まず、フォームのHTMLはこんな感じで。
form.html
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>フォーム送信テスト</title>
</head>

<body>
  <h1>フォームの送信テスト</h1>
  <p>
    これはフォーム送信のテストです。
  </p>

  <form method="post" action="ここにGASの公開アプリケーションのリンクをセット">
    <p>
      <label>名前:<input type="text" name="name"></label>
    </p>
    <p>
      <label>好きな食べ物:<input type="text" name="food"></label>
    </p>
    <p>
      <input type="submit" value="送信する">
    </p>
  </form>
</body>
</html>

formのactionには、以下のGASを公開アプリケーションとして導入した時のURLを設定しましょう。
そしてGASのコードが以下の通り。
コード.gs
function doPost(e){
  var sheet = SpreadsheetApp.openByUrl("スプレッドシートのURL")
  .getSheetByName("シート1");
  //データ取得
  var name = e.parameter.name;
  var food = e.parameter.food;
  var date = new Date();
  
  //データ整合
  var array = [date,name,food];
  sheet.appendRow(array);
  
  return HtmlService.createHtmlOutputFromFile("thanks");
}
また、同時に、以下のHTMLファイルも同じプロジェクト内に用意します。(理由については後述)

thanks.html
<!DOCTYPE html>
<html lang="ja">

<head>
<meta http-equiv="refresh" content="10;url=https://hoge/form.html">
<title>フォーム送信テスト</title>
</head>

<body>
  <h1>フォームの送信テスト</h1>
  <p>
    フォームが正しく送信されました。
    <br>10秒後に元のページへ戻ります。
  </p>

</body>
</html>


以上で、フォームの結果をGAS側で取得出来ます。

まず、thanks.htmlを用意する理由ですが、何かしらの結果を返さないと、GASのエラーが以下のように表示されてしまうからです。
こんな表示がされてしまうのはダメダメですね…………
ということでthanks.htmlを用意して、そのコンテンツを返しています。

しかし、今回の手法での一番大きな問題点はそこにあります。
thanks.htmlからページを飛ばしても、GASのアプリケーション内でのフレームとして遷移先が表示されてしまうことです。
今回の例でいくと、thanks.htmlから元のform.htmlへ遷移させていますが、form.html自体はGASのアプリケーションのフレーム内で表示されてしまうということです。
上記画像のURL(少し見づらいですが……)には、GASのアプリケーションのURLのままです。

やはり、ここらへんはサーバーサイドの処理で固められてしまっているということでしょうか?

以前にも同じようにフレームで表示されてしまうという問題があったような気がします………

何はともあれ、身内で使う分には問題ないかもしれませんが、今回の方法はいかんせん良い方法とはいえないので、別の方法でもっとスマートにPOSTする方法をやってみます。
Comments