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

# はじめに

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

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

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

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

## 完成イメージ

![スクリーンショット 2024-07-08 19.33.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/c38e95c3-3f81-b6ee-ac5e-b698484f560a.png)


# Step1. Googleフォームの作成

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

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

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

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

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

![スクリーンショット 2024-07-08 18.01.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/c7e35ff4-f55e-6987-57f0-ab080ea7548d.png)

# Step3. スクリプトを作成
以下の画像のようにエディタ内にコードを入力します。

<details><summary>プログラムコード</summary>

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

</details>

![スクリーンショット 2024-07-08 18.08.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/f4409beb-de1f-2747-31c4-6bd8320920bc.png)

## Step4. 環境変数の設定

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

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

https://qiita.com/kazuya-sugawara/items/0ee4e8b9d9878445167d

![スクリーンショット 2024-07-08 18.13.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/a4955003-83dc-7a89-a913-0f9a47f00a68.png)

## Step5. デプロイ

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

![スクリーンショット 2024-07-08 18.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/88d800fd-0fdd-1533-2159-21d488abb817.png)

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

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

![スクリーンショット 2024-07-08 18.54.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/8355133b-0409-3589-ede4-9b49896da722.png)

## 6. トリガーの設定

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

![スクリーンショット 2024-07-08 19.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/bd2faacb-3214-1bc2-48ba-08a5183927fc.png)

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

![スクリーンショット 2024-07-08 19.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991303/3a13b7ae-fee7-0c87-7fe5-53de83ac192c.png)

# まとめ

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