こんにちは。フロントエンドエンジニアの松岡です。

外部サービスとの連携のために Slack ワークフローのフォーム入力内容をメールで送信したいなーと思うことがありました。Slack ワークフローをトリガーにしたメール送信は Zapier などのツールを使えば実現できるようですが、社内で GAS（Google Apps Script）を使った自動化処理がいくつかあったので、同じように Slack＆GAS の連携で作ることにしました。当記事ではその手順を紹介します。

フロー

おおまかな手順は以下の通りです。

Slack ワークフローを作成 ※
GAS のスクリプトを作成
Slack Outgoing WebHook を設定
Slack Incoming WebHook を設定

※ 記事執筆時点では有料プランのみワークフローの機能を利用できます。Slack 料金プラン

完成イメージ

Slack ワークフローのフォームを送信する。

フォームの入力内容がチャンネルに投稿される。

スプレッドシートにログが書き込まれる。

メールが送信される。

完了メッセージが投稿される。

Slack ワークフローを作成

メール送信内容を入力するためのワークフローを作成します。

ワークフロービルダーでワークフローを新規作成します。
開始する方法は任意ですがここではショートカットにします。
最初のステップでフォームを送信するを選択します。
メッセージ送信のステップを追加します。

追加したワークフローは以下のようになります。右上の「公開する」ボタンで公開します。

この設定により、ワークフローのフォームを送信すると SlackToMail というプレフィクスに続き タイトル::値,, というフォーマットでフォームに入力した項目がチャンネルに投稿されます。

SlackToMail,,title::{@可変テキスト},,body::{@可変テキスト},,requester::{@可変ユーザー}

GAS のスクリプトを作成

Google Apps Script を使うと、API リクエストのエンドポイントを作成できます。ここではフォームの入力内容を受け取るエンドポイントを作成します。

Google ドライブを開いて Google Apps Script を追加します。
編集エディターが開きます。
プロジェクト名を変更します。
デフォルトのコードを消してスクリプトを貼り付けます。
Google Drive に任意のスプレッドシートを作成してファイルを識別する ID とシート名をコピーします。
GAS の config に貼り付けます。
GAS の config を実際のメールアドレスに置き換えます。送信元はスクリプト所有者の Google アカウントにする必要があります。

作成したプロジェクトは後からプロジェクト一覧で検索できます。

スクリプトのコードの説明

冒頭の configs は設定値を宣言しています。★マークのついた部分は環境に合わせて変更する必要があります。

const configs = {
  slackMessageTrigger: "slackToMail",
  slackAcceptedMessage: "受け付けました",
  slackIncomingWebhookUrl: "",    // ★
  spreadSheetFileId: "",          // ★
  spreadSheetSheetName: "シート1", // ★
  mailTo: "to@example.co.jp",     // ★
  mailFrom: "from@example.co.jp", // ★
  mailSubjectPrefix: "【テスト】",
};

emailSectionMap はフォームの項目とメール本文の見出し部分のマッピングです。フォームに新しい項目を追加した時はここに ["{キー}", "{ラベル}"] を追加するとメール本文に記載されます。

const emailSectionMap = [
  ["title", "タイトル"],
  ["body", "本文"],
  ...
];

doPost は GAS のエンドポイントが POST メソッドでリクエストされた時に実行される固定の関数です。引数 e でリクエスト内容を受け取ります。

function doPost(e) {
  ...
  return ContentService.createTextOutput("処理が完了しました");
}

convertPostMessageToPayload は Slack から受け取った文字列をパースします。フォーマットは token=xx&channel_id=xx&text=SlackToMail,,title::yy,,body::yy,,requester::yy のようにアンパサンドで合成された文字列です。 text= の部分にワークフローがチャンネルに投稿した文字列が入ります。

function convertPostMessageToPayload(postMessage) {
  const textField = postMessage
    .split("&")
    .map(v => v.split("="))
    .find(v => v[0] === "text")
  ;
  ...
}

writeSpreadSheet はスプレッドシートにログを書き込みます。

function writeSpreadSheet(spreadSheetFileId, spreadSheetName, payload) {
  const sheet = SpreadsheetApp
    .openById(spreadSheetFileId)
    .getSheetByName(spreadSheetName)
  ;
  ...
  sheet.getRange(1, 1, 1, values.length).setValues([values]);
}

sendEmail はメール送信を実行します。

function sendEmail(mailTo, mailFrom, mailSubjectPrefix, payload) {
  const subject = `${mailSubjectPrefix}${payload.title}`;
  ...

  GmailApp.sendEmail(mailTo, subject, body, options);
}

sendToSlackAcceptedMessage は後述する Incoming WebHooks のエンドポイントをリクエストして Slack に完了のメッセージを投稿します。

function sendToSlackAcceptedMessage(url, message) {
  ...

  const options = {
    method: "post",
    contentType: "application/json",
    payload,
  };

  UrlFetchApp.fetch(url, options);
}