HTMLとGASを使ってフォームの入力情報をGoogleスプレッドシートに書き込んでみた。

# はじめに
どうもAtsu1209です♪
今回はHTMLとGAS(GoogleAppsScript)を使っていきます
まだ初心者なので、変なところあったら温かい目で見てください。
# GASを使った受け皿
まずGoogleスプレッドシートに書き込むためのコードを書きます。
~~~JavaScript:input.gs
function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var rowData = [];
  rowData.push(new Date()); 
  rowData.push(e.parameter.name); 
  rowData.push(e.parameter.email);
  rowData.push(e.parameter.comment);
  sheet.appendRow(rowData); 
  return ContentService.createTextOutput("Success"); 
}

~~~
`rowData.push`で送信された情報を呼び出し、`(e.parameter."クラス名")`で送信された情報の中のクラスを指定して書き出しています。
# GASをデプロイ
今回書いたコードをデプロイしてURLを表示します。
このURLをフォームの送信先として使用します。

# HTMLを使ったフォームを作成
Googleスプレッドシートに送信するためのフォームを作ります。
~~~html:form.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>コメント</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 

    </head>
    <body>
    <h2>Comment</h2>
 <div class="input">
    <form action="ここにデプロイしたときのURLを貼り付ける。" method="POST">
      <input type="email" name="email" placeholder="メールアドレス" required>
  <input type="password" name="name" placeholder="お名前" required>
      <input type="text" name="comment" placeholder="コメント" required>
      <input id="playButton" class="btn" type="submit" value="送信">
    </form>
      <audio id="Audio" src="btn.mp3"></audio>
      <iframe name="audioFrame" style="display:none;"></iframe>
    </div>

        <script>

        </script>
    </body>
</html>
~~~
前と同じくCSSを書くのがめんどくさいのでMaterialize(外部CSS)を使っていきます。
また、コメントを送ったときに音を再生したいので,`<audio>`タグを使って音声ファイルを参照しておきます。今回は`btn.mp3`というファイル名の音声を参照しました。
`<input>`の`action=`のあとにGASのデプロイURLを貼り付けます。
# JavaScriptを使って音を再生
これでフォームの送信はできるのですが、音を再生させたいので、
JSを使って送信ボタンを押したら音を再生するようにします。
~~~ html:form.html
<script>
 var audio = document.getElementById("Audio");
        var playButton = document.getElementById("playButton");
          
          playButton.addEventListener('click', function() {
            audio.play();
            alert("コメントを送信しました。");
        });
</script>
~~~
`document.getElementById`でhtml側の`<audio>`で参照した音声ファイルと、送信ボタンにつけたIDを指定し、取得します。そして下のコードで音を送信し、`alert`を使って"コメントを送信しました"というメッセージを表示します。
 # 全体コード
 HTML
~~~html:form.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>コメント</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 

    </head>
    <body>
    <h2>Comment</h2>
 <div class="input">
    <form action="ここにデプロイしたときのURLを貼り付ける。" method="POST">
      <input type="email" name="email" placeholder="メールアドレス" required>
  <input type="password" name="name" placeholder="お名前" required>
      <input type="text" name="comment" placeholder="コメント" required>
      <input id="playButton" class="btn" type="submit" value="送信">
    </form>
      <audio id="Audio" src="btn.mp3"></audio>
      <iframe name="audioFrame" style="display:none;"></iframe>
    </div>

        <script>
              var audio = document.getElementById("Audio");
        var playButton = document.getElementById("playButton");
          
          playButton.addEventListener('click', function() {
            audio.play();
            alert("コメントを送信しました。");
        });
        </script>
    </body>
</html>
~~~
 GAS
~~~JavaScript:input.gs
function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var rowData = [];
  rowData.push(new Date()); 
  rowData.push(e.parameter.name); 
  rowData.push(e.parameter.email);
  rowData.push(e.parameter.comment);
  sheet.appendRow(rowData); 
  return ContentService.createTextOutput("Success"); 
}
~~~
# 感想
勉強してからGASにはじめて触れてみて、意外とむずかった。
制作時間2時間位かかりました。
なんかアドバイスや間違えがあったら、コメントで教えていただきたいです。
では。