はじめに
どうもAtsu1209です♪
今回はHTMLとGAS(GoogleAppsScript)を使っていきます
まだ初心者なので、変なところあったら温かい目で見てください。
GASを使った受け皿
まずGoogleスプレッドシートに書き込むためのコードを書きます。
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スプレッドシートに送信するためのフォームを作ります。
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を使って送信ボタンを押したら音を再生するようにします。
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
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
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時間位かかりました。
なんかアドバイスや間違えがあったら、コメントで教えていただきたいです。
では。