🚀

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);
}

これをデプロイするとアプリのURLが発行されるので、そのURLをSpearly CMSの「Webhook URL」に保存します。
デプロイ時には設定を以下のように変更しないとWebhookとして利用できないので注意してください。

実際にお問い合わせフォームに入力して送信すると、無事にお問い合わせ内容がSlackに通知されました！

ここで行っているのは、Slackのapiを叩いているだけなので、リンクを追加したりある程度のことができるようになります。
実際に埋め込んでいるサイトがこちらになります。

https://hhg-exe.jp

最後に

以上のような流れでSpearly CMSのフォームの回答内容をSlackに通知できました。
Slackに通知できたということは、DiscordやChatwork等にも通知できるということなので、各々で使っているチャットサービスに通知してみてください。

また、今回のフォーム埋め込みでは以下の部分の課題が残っているので時間を見つけて対応していきたいと思います。

Webhook Secretを使って暗号化する
WebhookURLをProperties Serviceで管理するようにする
フォームの埋め込み方法をapiから利用する方式に変える

概要

Spearly CMSでフォームを作成

SlackのIncoming Webhookを設定

GASの設定

最後に

Discussion