こんにちはAtsu1209です。♪
今日はHTML使ってコメントを作ってみました。

いつもの

いつものやつ書きます。

main.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Comment</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>
        
    </body>
</html>

いつものようにCSSがめんどくさいのでMaterializeを使います。

形作り

形を作っていきます。

main.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Comment</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>    
    <div class="input">
    <form action="#URL" method="post">
      <input type="email" name="email" placeholder="メールアドレス" required>
  <input type="text" name="com" placeholder="コメント" required>
      <input class="btn" type="submit" value="送信">
     <h6 class="flow-text">コメントありがとうございます</h6>
    </form>
</body>
</html>

フォームの#URLの場所に後でURLを貼ります。

GAS

次にGASでコードを書いていきます

Main.gas

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var rowData = [];
  rowData.push(new Date());
  rowData.push(e.parameter.com);
  rowData.push(e.parameter.email);
  sheet.appendRow(rowData); 
  return ContentService.createTextOutput("Success");
}

rowData...のところで送られてきた情報の中のクラス(e.parameter.#クラス名)で取得してスプレッドシートに書き込みます。今回はコメントclass=comとメールアドレスclass=emailを取得しています。
そしてGASのコードをウェブアプリとしてデプロイします。
先程のHTMLの#URLの場所にデプロイしたURLを貼り付けます。

感想

今回のコードを自分のホームページなどのところに貼り付ければ
コメント機能が実装されると思います。是非参考にしていただけると
嬉しいです。では

HTMLとGAS使ってコメントをつくってみた

いつもの

形作り

GAS

感想