BFT名古屋 TECH BLOG

日々の業務で得た知識を所属するエンジニアたちがアウトプットしていきます。

【GAS】フォーム送信トリガーでメールを送信する方法 ※2020年12月

はじめに

こんにちは! 窓の外の寒気に冬将軍の到来を感じています、BFT名古屋支店インフラ女子(?)の山口です。

BFT名古屋支店のですね、問い合わせフォームを作りたかったのです。ほら、よく企業の問い合わせで名前とか問い合わせ内容とかを入力して送信っていう、そう、アレです。

問い合わせフォーム自体はサクッと作り終わりました。ただ今のままだとフォームに入力があった時に作成した私にしか入力されたことがわからないので、フォーム入力で名古屋支店メンバーへメールが飛ぶようにしようと思ったんです。

それができない!ちょっとGoogle先生、一体何がダメなのさ!ということで先生に聞いても出てこなかったので自力でどうにかするかとやってみたら結構簡単に解決できたので、今回はその内容を書こうと思います。

山口はGAS初心者なので「そんなの当たり前じゃん!」かもしれませんが笑

Googleフォーム送信トリガーでメールを送信する

やりたいこと

やりたいことは単純です。単純すぎるくらい。
ただGoogleフォームの入力があったらそれをトリガーに問い合わせ専用の名古屋支店メンバーメーリングリストへメールを送信する、ただそれだけです。

f:id:bftnagoya:20201216172647p:plain
やりたいことは単純なのに…できない!

スクリプトは一瞬

Google先生に「フォーム メール送信」と聞いて返ってきた回答からコピペするだけです。先人の知恵は素晴らしい。必要な部分をカスタマイズした内容はこちらです。

function sendMailtoML() {
 
  const recipient = 'ml-nb-info@bfts.co.jp'; //承認者のメールアドレス
  const subject = 'お客様からお問い合わせがありました'; //件名
  let body = ''; //メール本文
  body += 'お問い合わせフォームへの入力がありましたので\n';
  body += '以下URLからスプレッドシートをご覧ください\n';
  body += 'https://docs.google.com/spreadsheets/d/~'; //スプレッドシートURL
  GmailApp.sendEmail(recipient, subject, body);

}

この内容をテキストエディタに書いておきます。

フォームもしくはスプレッドシートからスクリプトエディタへ

うまくいかないパターンとして、作成したフォームやスプレッドシートからスクリプトエディタを開いていない、という記事がありました(私は関係なかったですけど)。

普通にフォーム作成の流れでスクリプトエディタを開くといいと思います。フォームからであれば黒点が3つ縦についているマークから [ スクリプトエディタ ] を、スプレッドシートからは [ ツール ]-[ スクリプトエディタ ]です。

f:id:bftnagoya:20201216180709p:plain:w350
左がフォーム、右がスプレッドシートからのスクリプトエディタ

スクリプトエディタが開いたら、先ほどGoogle先生に伺ってカスタマイズしたスクリプトをコピペします。

f:id:bftnagoya:20201216181157p:plain
Ctrl+A→Ctrl+Vで貼り付け

左上の[無題のプロジェクト]をクリックし、プロジェクト名を記載してスクリプトの作成は完了です。一瞬ですね。

トリガーの設定…で終わるはずが…!

後はフォーム送信されたらこのスクリプトを実行するようにすればいいだけです。Google先生に教えてもらった通り、トリガーを新規で作成します。

f:id:bftnagoya:20201216181915p:plain:w400
後はトリガーだけ。るんるん

な、ない…

f:id:bftnagoya:20201217134735p:plain:w300
どうしてGoogle先生に教えてもらった通りにならなのだろうか…
今ブログに書こうと思って同じことをやったら出てきました笑 が、当初はイベントのソースとして「フォームから」がなかったのです。そして違う問題として今は一番上の実行する関数が表示されません。想定としてはfunctionの後に宣言した関数sendMailtoMLが表示されているはずでした。

まぁいっか、とりあえずやってみた方法で解決するか確認します。

スクリプトエディタに戻って、「実行」これだけです。
そうすると [ 承認が必要です ] とポップアップが表示され、このスクリプトGoogleアカウントに対してアクションをとれるように権限を付与することができます。

f:id:bftnagoya:20201217143508p:plain:w350
権限ってどこで設定するのだろうか…
f:id:bftnagoya:20201217143831p:plain:w250
権限を付与する

これでテストの実行が完了し、下に実行ログが表示されます。今回テストは一旦自分のメールアドレスに変更したのでメールが送信されてきていることも確認しました。

f:id:bftnagoya:20201217150724p:plain:w350
単体テストは大事ねと思った瞬間

そして先ほどと同じようにトリガーを設定しようとすると… やはりない!関数が出てこない!!

閉じたり開いたりして更新されるかと思ったけど影響がなく、思い付きでF5で更新してみると…

f:id:bftnagoya:20201217155022p:plain:w300
F5で更新って…もっとわかりやすくしてほしい…

無事に出てきました。これで「保存」で終了です。

結局必要だったことは何なのか

私の場合、Gmailのアカウントを3つ持っていたことが悪さをしていたのかもしれません。

  1. スクリプトGoogleアカウントへのアクセス権付与が必要
  2. 関数が表示されない場合はF5を押して更新

この二つで解決です。

終わりに

AWSでもよくひっかかるポイントですが、こういうサービス間連携で大切なのはサービス間の認証認可です。あとはちゃんと単体テストした上で結合テストするという基本をやっていればサクッと終わったなぁと反省。

以上、12月中旬の雪が降った名古屋からお送りいたしました~