【GAS】メールフォームのバックエンドをGASで
Web の学習で HTML・CSS でサイト作成を行ったとき、誰しもお問い合わせフォームというものを作成するのではないだろうか。
HTML・CSS を用いてみてくれまでは作れるかもしれないが、その先のお問い合わせの送信処理は PHP などを用いてサーバサイドのコードを書かないといけないので、かなり気合の入った人でないと作ることは難しい。
だが、その常識も今変わろうとしている。
Google が提供している Google Apps Script を活用することにより PHP などが使えるサーバを用意することなく、送信処理を実装することが可能となる。
早速見てみよう。
Google Apps Script とは
Google が提供する JavaScript をベースとしたスクリプト言語である。
Google ドキュメントやスプレッドシートのマクロのような側面で使われていたが、Gmail やカレンダーを操作することもできるので様々なことが実行できる。
利用には Google のアカウントが必要になる。
※本記事では Google のアカウント作成については割愛する。
Google Apps Script について、詳しくはこちら。
実装の流れについて
新規のプロジェクトを作成する
Google ドライブにアクセスし、新規作成を行う。
作成するファイルには Google Apps Scriptを選択する。
プロジェクト内にdoPost関数を作成する
const doPost = (e) => {
Logger.log(e);
};
上記のようなコードを書くことによりフォームから送られてきたPOSTデータを受け取ることができる。
e.parameterにフォームのデータが含まれているので、そちらからデータを取得する。
例えばname(送信者名前), email(送信者メールアドレス), content(送信内容)を受け取った場合のコードはこのようになる。
const doPost = (e) => {
Logger.log(e);
const name = e.parameter.name;
const email = e.parameter.email;
const content = e.parameter.content;
};
その他の詳しいパラメータなど知りたい方は公式ドキュメントを。
送信用の関数を作成する
POST データを受信できたので、次は Gmail を使ってメールを送信する処理を書く。
メールの送信にはGmailApp.sendEmail()を使用する。
const sendMail = (name, email, content) => {
const recipient = email;
const recipientName = name;
const subject = "Test Mail Title";
const body =
recipientName + "様より\n" + "\n" + "テストメールです。\n" + "\n" + content;
const options = {
from: "test@example.com",
name: "テスト太郎",
};
GmailApp.sendEmail(recipient, subject, body, options);
};
と、このような感じである。
今回オプションにはfromとnameを設定しているが、ccやbccなども設定可能である。
詳しいオプションについては公式ドキュメントを参照。
送信用の関数ができたらそちらに値を渡せるようにdoPost関数を修正する。
const doPost = (e) => {
Logger.log(e);
const name = e.parameter.name;
const email = e.parameter.email;
const content = e.parameter.content;
sendMail(name, email, content);
};
処理が完成したら Web アプリとして公開する
右上の デプロイ ボタンをクリック、 新しいデプロイ を実施する。
新しいデプロイ画面が出てきたら 種類の選択 のハグルママークをクリップしてウェブアプリを選択する。
特に設定をいじる必要はないが、わかりやすいように説明の部分は入れておくと管理しやすくできる。
デプロイが終わったらウェブアプリ用の URL が発行されるので、そちらを<form></form>タグのaction属性の値に設定する。
※このさいにmethod属性がpostになっていることも確認しておく。
動作テスト
ここまで出来たら送信できるか確認してみる。
メールを受信できたら OK である。
ちなみに今回はサンクス画面への遷移などは設定してないので、実際に活用するときには必要に応じてそちらも設定すること。
最後に
どうだろうか。
ざっくりと見てみたがかなり簡単にフォームのバックエンド処理が実装できた。
PHP などサーバ側はまだわからないけど、実際に使えるフォームが作りたい場合はひとつの選択として GAS を選んでみるのも良いだろう。