Googleフォームへのお問い合わせを整形してSlackに送る方法

Posted at 2024-07-09

はじめに

Googleフォームで回答があった時に、回答に気が付かないことってありませんか？
あとでまとめて集計するものであれば問題ないかもしれませんが、素早くレスポンスが必要な場合は、すぐに気がつける仕組みが必要です。

できるだけわかりやすい形でSlackに連携できれば、もっと楽になるのではないかと思い、この方法を試してみました。
今回の内容で、以下の課題を解決できます。

見逃し防止
迅速な対応
情報共有

前提

Googleフォームでお問い合わせがあった場合に整形して送ることを想定します。
6つステップで行うことが可能です。

完成イメージ

Step1. Googleフォームの作成

Googleフォームを作成
Googleフォームのホームページから「新しいフォーム」を作成します。

質問を追加
必要な質問項目を追加し、フォームを完成させます。
この記事では以下の項目で作成しました。

名前
件名
お問いわせ詳細
緊急度
その他

Step2. GoogleフォームからApps Scriptを作成

スクリプトエディタを開く
「その他のオプション」（右上の3点アイコン）をクリックし、「スクリプトエディタ」を選択します。

Step3. スクリプトを作成

以下の画像のようにエディタ内にコードを入力します。

プログラムコード

const onFormSubmit = (e) => {
  const formResponses = e.response.getItemResponses();
  const submissionTime = new Date(e.response.getTimestamp()); // 解答時間を取得
  const respondentName = formResponses[0].getResponse(); // 最初の質問（回答者氏名）
  const subject = formResponses[1].getResponse(); // 件名
  const inquiryDetails = formResponses[2].getResponse(); // お問い合わせ詳細
  const urgency = formResponses[3].getResponse(); // 緊急度（ラジオボタン）
  const other = formResponses[4].getResponse(); // その他
  const blocks = [];

  // お問い合わせ通知のヘッダー
  blocks.push({
    type: "header",
    text: {
      type: "plain_text",
      text: "新しいお問い合わせがありました📩",
    }
  });

  // 回答者氏名と解答時間をfieldsに含むセクションブロック
  blocks.push({
    type: "section",
    fields: [
      {
        type: "mrkdwn",
        text: `*名前:* ${respondentName}`,
      },
      {
        type: "mrkdwn",
        text: `*回答時刻:* ${submissionTime.toLocaleString()}`,
      }
    ]
  });

  // 件名を単独のセクションとして追加
  blocks.push({
    type: "section",
    text: {
      type: "mrkdwn",
      text: `*件名:* ${subject}`,
    }
  });

  // お問い合わせ詳細をコードブロックで追加
  blocks.push({
    type: "section",
    text: {
      type: "mrkdwn",
      text: `*お問い合わせ詳細:*\n\`\`\`${inquiryDetails}\`\`\``,
    }
  });

  // 緊急度を単独のセクションとして追加
  blocks.push({
    type: "section",
    text: {
      type: "mrkdwn",
      text: `*緊急度:* ${urgency}`,
    }
  });

  // その他をコードブロックで追加
  if (other) {
    blocks.push({
      type: "section",
      text: {
        type: "mrkdwn",
        text: `*その他:*\n\`\`\`${other}\`\`\``,
      },
    });
  }

  // Slackに送信
  sendSlackMessage(blocks);
}

const sendSlackMessage = (blocks) => {
  const scriptProperties = PropertiesService.getScriptProperties();
  const webhookUrl = scriptProperties.getProperty('SLACK_WEBHOOK_URL');
  
  // 正しくattachmentsを構築
  const attachments = [
    {
      color: "#36a64f", // 緑色のカラーバー
      blocks: blocks // blocksを直接attachments内で使用
    }
  ];

  // payloadを構築
  const payload = JSON.stringify({
    attachments: attachments // ここではattachmentsをオブジェクトの配列として指定
  });

  const options = {
    method: 'post',
    contentType: 'application/json',
    payload: payload // JSON文字列としてエンコードされたpayloadを使用
  };

  // Slack Webhook URLにPOSTリクエストを送信
  UrlFetchApp.fetch(webhookUrl, options);
}