MENU

ファンリピート社のブログFR note

  1. HOME
  2. ファンリピート社のブログ
  3. 【STUDIO】Google Apps Scriptを使って、noreply@でフォームの自動返信を行う方法
2023.09.21
  • URLをコピーしました！

【STUDIO】Google Apps Scriptを使って、noreply@でフォームの自動返信を行う方法

STUDIO

本記事をご覧いただきありがとうございます。
今回はSTUDIOで実装したWEBサイトのフォームに自動返信機能を持たせる方法を解説します。

自動返信機能はZapierとの連携で実現することが可能ですが、「noreply@」から送信されるような仕様にしたかったのでGASを使って実装しました。

他の方が出されている技術ブログなどを参考に実装しましたが、うまくいかないこともあったので、その反省を踏まえて最新版をここにまとめたいと思います。

非エンジニアの方でも真似できるようコード例やコード解説もありますので、ぜひお役立てください！

目次
「システムを短納期かつ低予算で作成したい」
「ローコード開発に興味がある」
詳しく知りたい方はこちら！

STUDIOとは

STUDIOのTOP画像
https://studio.design/ja

STUDIOは、コーディング不要でWEBサイト制作ができるノーコードツールです。HTML/CSSの知識がない方でも、デザイン性の高いハイクオリティなサイトを制作できることから人気を集めています。

弊社のサービスサイトもSTUDIOを用いて非エンジニアが行っております。

【AI英会話さん】

AI英会話さん
AI英会話始めるなら「AI英会話さん」 AI英会話さんは、OpenAI社のChatGPTを用いた英会話練習アプリで、あなたのスピーキングスキルを分析・改善します。LINE経由で手軽に毎日の学習が可能。AIとの対話で、英会...

【DX START】

Page not found
Page not found

また、STUDIO公式サイトでは他社の制作事例が多く紹介されているのでこちらもぜひ参考にしてみてください。

STUDIO Showcase | Discover your ...
STUDIO Showcase | STUDIOで作成されたWebサイト事例集 STUDIOで作られた世界中のWebサイトを、ジャンルやテイスト別に探せるギャラリーサイト「STUDIOShowcase」ができました。次のアイデアの参考にしてみましょう。

Google Apps Script（GAS）とは

Google Apps Script（GAS）サイトTOP

Google Apps Script（GAS）は、Google Workspace製品（Gmail、Google Sheets、Google Driveなど）のカスタマイズや自動化をサポートするスクリプト言語と実行環境のことを指します。

JavaScriptベースの言語であり、ブラウザ上で直接スクリプトを書いて実行することができるため環境構築なども不要です。

ローコードプラットフォームであるため、非エンジニアの方にとっては難易度が高く感じるかもしれませんが、本記事ではコピーして使えるコード例を記載していますのでぜひご活用ください。

STUDIOとGASの連携方法

では、具体的なSTUDIOとGASの連携方法について解説していきます。

主な手順は下記のようになります。

  1. STUDIOとGoogleスプレッドシートを連携する
  2. GoogleスプレッドシートのGAS内にコードを書く

STUDIOとGoogleスプレッドシートを連携した後、そのスプレッドシートの拡張機能でGASにコードを記述します。

※今回はSTUDIOのフォーム実装が完了しているところから開始します。フォームの実装方法については割愛していますが、わからない方は下記の公式マニュアルをご参照ください。

あわせて読みたい
フォームをページに設置する | STUDIO U お問い合わせフォームの作成

1. STUDIOとGoogleスプレッドシートを連携する

STUDIOで連携したいWEBサイトのプロジェクトを開きます。フォームタブを選択し、「設定」をクリックします。

STUDIOのプロジェクトでフォームを開く

下記のようなフォーム設定のポップアップが表示されます。

外部連携のスプレッドシートアイコンをクリックするとそのフォーム専用のシートが生成されます。未連携の場合は、アイコンをクリックして連携してください。

フォーム設定の外部連携を行う

連携が完了するとGoogleドライブ内に自動で下記のようなシートが作成されます。
1行目にはフォームで設定しているラベルが自動で設定されています。以後、フォームに回答があると自動で更新されます。

連携したスプレッドシート

注意事項

連携を一度解除し、再連携すると、新たなシートが生成されそちらが更新されるようになります。

フォームに結果が届くたび、最下行に回答内容が追記（セルに値がある場合は上書き）されます。

Google スプレッドシートには１分内にデータ送信（連携）できる件数の上限があり、超過した分はシート側に保存されません。正確な情報はGoogle スプレッドシートのドキュメントを参照してください。

シート名に半角文字の「:」を利用するとフォーム送信時にエラーが発生します。シート名に半角の「:」を使わないようにお気をつけください。

Usage limits | Sheets API | Google Developers

これでSTUDIOとGoogleスプレッドシートの連携は完了です。

2. GoogleスプレッドシートのGAS内にコードを書く

コードを追加する

連携したシートApps Scriptにコードを追加します。

GASを開く

シートのヘッダーから拡張機能＞Apps Scriptを開きます。

すると下記のような画面に遷移します。こちらにコードを記述します。

GASで新規プロジェクト作成

プロジェクト名が「無題のプロジェクト」となっているため、適切なタイトルに修正しましょう。

既に入力されているコードを消し、下記のコードをコピー＆ペーストしてください。

サービス名や署名などはサンプルのため、正しいものに書き換えてください。

function sendMailcontact(e) {
Logger.log('sendMailGoogleForm(e) debug start');


// 行の追加イベントのみを対象とする
if (e.changeType != "INSERT_ROW") {
return;
}
var sheet = SpreadsheetApp.getActiveSheet();
var row = sheet.getLastRow();
var name = sheet.getRange(row,1).getValue();
var company = sheet.getRange(row,2).getValue();
var post = sheet.getRange(row,3).getValue();
var email = sheet.getRange(row,4).getValue();
var tel = sheet.getRange(row,5).getValue();
var radio = sheet.getRange(row,6).getValue();
var textarea = sheet.getRange(row,7).getValue();


//自動返信メール件名
var title = "【サービス名】お問い合わせありがとうございます。"


//自動返信メール本文
var body
= "このメールはシステムからの自動返信です。\n\n"
+ "お世話になっております。この度は「サービス名」へお問い合わせいただきありがとうございました。\n\n"
+ "以下の内容でお問い合わせを受付いたしました。\n"
+ "内容を確認させていただきましたら、担当者よりご連絡いたしますので今しばらくお待ちくださいませ。\n\n"
+ "▼お問い合わせ内容▼\n"
+ "お問合せ内容については以下の通りです。\n"
+ "----------------------------------------------------\n"
+ "●お名前\n"
+ name + " 様\n\n"
+ "●会社名\n"
+ company + " \n\n"
+ "●役職\n"
+ post + " \n\n"
+ "●メールアドレス\n"
+ email + "\n\n"
+ "●電話番号\n"
+ tel + "\n\n"
+ "●今回のご予算\n"
+ radio + "\n\n"
+ "●お問い合わせ内容\n"
+ textarea +"\n\n"
+"----------------------------------------------------\n\n"
+ "ー・ーー・ー・ーー・ー・ーー・ー・ーー・ー\n"
+ "株式会社〇〇\n"
+ "https://XXXXXXXX.com \n"
+ "サービス名\n"
+ "https://XXXXXXXX.com \n"
+ "ー・ーー・ー・ーー・ー・ーー・ー・ーー・ー\n";


//noreplyで返信
const option = {
noReply: true
};
GmailApp.sendEmail(email, title, body, option);
}

このコードは、関数 `sendMailcontact` を使い、Googleスプレッドシートに新しい行が追加された際（フォームの回答を受け取った場合）に、フォームの回答者に自動でメールを返信する処理を記述したコードです。

以下にそれぞれのコードを解説します。

コードの解説

1. デバッグログ

Logger.log('sendMailGoogleForm(e) debug start');

これは関数の実行開始をログに記録するためのものです。メールの内容には直接関係ありません。

2. 行の追加イベントの確認

if (e.changeType != "INSERT_ROW") {
return;
}

関数が「行の追加」イベントでのみ実行されることを保証するためのものです。この記述がないとメールが2通送信される場合があります。

3. スプレッドシートからのデータ取得

var sheet = SpreadsheetApp.getActiveSheet();
var row = sheet.getLastRow();
var name = sheet.getRange(row,1).getValue();
var company = sheet.getRange(row,2).getValue();
var post = sheet.getRange(row,3).getValue();
var email = sheet.getRange(row,4).getValue();
var tel = sheet.getRange(row,5).getValue();
var radio = sheet.getRange(row,6).getValue();
var textarea = sheet.getRange(row,7).getValue();

新しく追加された行の各セルから、必要な情報（氏名、会社名、役職など）を取得するためのコードです。下記のメール本文ではこちらと対応させる必要があります。

下記のコードでは、「name」という変数に「取得した行の1列目」を入れる、という意味を持ちます。

今回の場合、1列目にはフォームの「氏名」が入るため「name＝氏名」となります。

var name = sheet.getRange(row,1).getValue();

このようにフォームに合わせて変数名を修正してください。

4. メールの件名と本文の生成

var title = "【サービス名】お問い合わせありがとうございます。"
var body
= "このメールはシステムからの自動返信です。\n\n"
+ "お世話になっております。この度は「サービス名」へお問い合わせいただきありがとうございました。\n\n"
+ "以下の内容でお問い合わせを受付いたしました。\n"
+ "内容を確認させていただきましたら、担当者よりご連絡いたしますので今しばらくお待ちくださいませ。\n\n"
+ "▼お問い合わせ内容▼\n"
+ "お問合せ内容については以下の通りです。\n"
+ "----------------------------------------------------\n"
+ "●お名前\n"
+ name + " 様\n\n"
+ "●会社名\n"
+ company + " \n\n"
+ "●役職\n"
+ post + " \n\n"
+ "●メールアドレス\n"
+ email + "\n\n"
+ "●電話番号\n"
+ tel + "\n\n"
+ "●今回のご予算\n"
+ radio + "\n\n"
+ "●お問い合わせ内容\n"
+ textarea +"\n\n"
+"----------------------------------------------------\n\n"
+ "ー・ーー・ー・ーー・ー・ーー・ー・ーー・ー\n"
+ "株式会社〇〇\n"
+ "https://XXXXXXXX.com \n"
+ "サービス名\n"
+ "https://XXXXXXXX.com \n"
+ "ー・ーー・ー・ーー・ー・ーー・ー・ーー・ー\n";

 `title` と `body` でメールの件名と本文を生成しています。本文には、取得した変数が組み込まれているため、回答者の入力情報が反映された内容のメールが生成されます。

+ "●お名前\n"
+ name + " 様\n\n"

上記の「neme」には「氏名」が入ります。スプレッドシートから取得したデータがメール本文に反映されるよう、必要に応じて修正しましょう。

テキストは「”」で囲みます。改行をしたい場合は「\n」、追加する場合は「+」で追記し、最後の行には「;」を忘れないようにしてください。

5. メールオプションの設定

//noreplyで返信
const option = {
noReply: true
};

 `option` で、メールが `noReply` オプションを持っていることを指定しています。これにより、メールの送信元が “noreply@” となり、受信者が返信できないようになります。

6.メールの送信

GmailApp.sendEmail(email, title, body, option);
}

`GmailApp.sendEmail(email, title, body, option);` で、指定した宛先、件名、本文、オプションを使用してメールを送信します。宛先は「mail＝フォームで入力されたアドレス」となります。

コード解説はこれで以上です。

今回は最低限の内容になっていますが、コードを書き換えることでメール内容やオプションなどのカスタマイズが可能です。興味のある方はより掘り下げてみるといいかもしれません。

コードを保存しトリガーを設定する

ヘッダーの保存ボタンをクリックします。

GASでコードを保存

次にトリガーの設定を行います。

トリガーとは…
直訳すると引き金という意味があります。どの関数をどのタイミングで実行するか設定したものというイメージです。

サイドバーからトリガーを開き、「トリガーを追加」をクリックします。

GASトリガー追加

ポップアップが表示されるので、下記のように設定します。保存をクリックします。

GASトリガー追加ポップアップ

この際に、初回はGoogleのサインイン・承認が求められます。

「権限を確認」をクリックします。

GAS承認アラート

アカウントを選択し、次のポップアップで「許可」をクリックします。

アカウント選択

これでトリガーの追加が完了しました。

実際にフォームを入力しテストする

最後に動作確認を兼ねて、実際のフォームを入力しメールが届くか検証してみます。

フォームテスト入力

フォームに情報を入力し、「送信」をクリックします。

受信トレイを確認すると、メールが届いていることが確認できます。

受信トレイ一覧

メールの件名、本文についても、GASで設定した通りにできています。

受信したメール

うまくいかない場合はコードやトリガーの設定に不備がないか確認してみてください。特に非エンジニアの方は自力解決が難しいかもしれませんので、ChatGPTなどのAIの力を借りても良いでしょう。

まとめ

以上、「Google Apps Scriptを使いnoreply@でフォームの自動返信を行う方法」の解説でした。

当社では現在一緒に働くメンバー募集しています！
正社員でシステムエンジニアとして当社のシステム開発業務に携わってみませんか？
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

「システムを短納期かつ低予算で作成したい」
「ローコード開発に興味がある」
詳しく知りたい方はこちら！
「煩雑なExcel管理から脱したい」
「慣れ親しんだシステムを使って効率化したい」
詳しく知りたい方はこちら！
「大規模なシステム開発を行うためにPoCを行いたい」
「社内のDXを進めていきたい」
詳しく知りたい方はこちら！
  • URLをコピーしました！

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


一覧へ戻る

関連記事

目次
閉じる