📧

GAS を使ってメールフォームのバックエンドを作る

2024/06/26に公開

Web

GAS

tech

はじめに

Web の学習で HTML・CSS でサイト制作を行うときに、お問い合わせフォームを作成することがあるかと思います。
HTML・CSS を用いて外装までは作れるかもしれないですが、その先の送信処理は PHP などのプログラム言語を使ってサーバーサイドにコードを設置しないといけないので、かなり気合の入った人でないと作ったことはないのではと想像します。

ですが、その常識も変わって行っています。
Google が提供する Google Apps Script を活用すれば PHP などが使えるサーバーを用意しなくても、送信の処理を実装することが可能となります。
早速見てみましょう。

Google Apps Script とは

Google が提供する JavaScript をベースにしたスクリプト言語です。

Google ドキュメントやスプレッドシートのマクロのような使われ方がメインですが、 Gmail やカレンダーを操作することもできるので様々な活用をすることができます。

なお利用には Google (Gmail) のアカウントが必要になります。
※ 本記事では 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, option);
};

上記のコードで送信の処理を行います。

今回オプションには 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 アプリとして公開する

エディター画面右上の デプロイ ボタンをクリックし、 新しいデプロイ を実施します。

新しいデプロイ画面が出てきたら 種類の選択 の歯車マークをクリックして ウェブアプリ を選択します。
特に設定をいじる必要はないですが、わかりやすいように説明の部分は入れておくとあとから管理がしやすくなります。

デプロイが終わったら Web アプリ用の URL が発行されるので、そちらを送信用フォームの <form> タグの action 属性の値に設定します。
※ この際に method 属性が post になっていることも確認しておきましょう。

動作テスト

設定ができたら実際に送信できるか確認してみましょう。
メールを受信できたら OK です。

ちなみに今回はサンクス画面への遷移などは設定していませんが、実際に活用するときにはそちらも設定するようにしましょう。

最後に

いかがでしたか。
簡易な例を用いての解説でしたが、かなりかんたんにフォームのバックエンド処理が実装できました。
PHP などサーバー側はまだ学習中だけど、実際に作ったフォームを動かしてみたいという場合、 GAS はひとつの選択肢となるのではないでしょうか。

参考サイト

GitHubで編集を提案