はじめに

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

Step4. 環境変数の設定

SLACKのWebHook Urlを設定する必要があります。
左の歯車から設定を開いて「スクリプトプロパティ」にSLACK_WEBHOOK_URLを入れてください。

WebHook Urlの取得方法は以下を参考にしてください。

Step5. デプロイ

右上の「デプロイ」ボタンから「新しいデプロイ」を選択します。

歯車マーク → ウェブアプリ → デプロイ

こちらの流れでデプロイ完了です。

6. トリガーの設定

左のタブから「トリガー」ボタン　→ 右下の「トリガーを追加」を押します。

以下の画面と同じ設定にして、保存します。
これで設定は全て完了です！

まとめ

この方法を使えば、Googleフォームの回答を自動的に整形してSlackに送信することができます。
ぜひ、この記事が参考になれば嬉しいです！