🚀

Spearly Formの受信通知をSlackに飛ばす

2022/08/22に公開

GAS

概要

自社サイトに埋め込んでいるお問い合わせフォームにはヘッドレスCMSの「Spearly CMS」を利用しています。

https://cms.spearly.com/

Spearly CMS経由でフォームを作成するとフォームが回答を受信したときにメールを送信してくれるのですが、個人的にはメールはあまり得意でないので、回答を受信したときにSlackに通知を飛ばすようにしました。
Spearly CMSは、フォームに回答があったときにWebhookを飛ばしてくれるようなので、Webhookの通知先をGAS製のアプリにすることでSlackに通知するようにしています。

流れはざっと以下の通りです。

Spearly CMSでフォームを作成する
SlackのIncoming Webhookを設定する
GASの設定をする

Spearly CMSでフォームを作成

公式サイトに従ってフォームを作ります。
フォームの埋め込み方法は「埋め込みタグ」でも「API利用」でも構いません。
何ならSlack通知を検証するだけなら、埋め込みプレビュー機能を利用すれば実際のサイトに埋め込む必要すらありません。

SlackのIncoming Webhookを設定

公式サイトに従ってIncoming Webhookの設定を行います。
この時に作成したWebhookURLは忘れないように控えておいてください。

GASの設定

GASの方でSpearly CMSに設定するWebhookURLを作成していきます。
こちらも基本的な設定は公式ドキュメントに任せて、コードの提示とデプロイ時の注意点だけ記述しておきます。

main.gs

// ここだけ利用しているSlackに応じて変更してください
const URL = {SlackのWebhookURL} ;

const sendToSlack = (body) => {
  const data = { "text" : body };
  const payload = JSON.stringify(data);
  const options = {
    "method" : "POST",
    "contentType" : "application/json",
    "payload" : payload
  };
  UrlFetchApp.fetch(URL, options);
}

const test = () => {
  sendToSlack("テスト通知確認です");
}

const doPost = (e) => {
  if (e == null || e.postData == null || e.postData.contents == null) {
    return;
  }

  const rawData = JSON.parse(e.postData.contents);
  const body = rawData.payload.fields.reverse().map((field) => `*${field.name}*\n${field.value}`).join("\n\n");
  sendToSlack(body);
}