Googleフォーム × GASで爆速通知！Discord & Slack完全攻略法 🚀

![スクリーンショット 2025-02-04 21.11.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/3dbc68cb-6b27-2c37-797a-018040657ec4.png)



## はじめに

ウェブフォームはお問い合わせやアンケート、イベント参加などさまざまな用途で活用されていますが、フォームの入力内容を随時確認するのは手間がかかります。そこで、**フォーム送信後に自動でDiscordやSlackへ通知を送る方法**を実装することで、リアルタイムにチームへ情報共有ができるようになります。🎉

この記事では、GoogleフォームとGASを利用して、以下の内容を解説します：

- Discord通知のウェブフック作成と設定
- Slack通知のウェブフック作成と設定
- Google Apps Scriptの実装例（コード付き）
- トリガーの設定方法と動作確認のコツ

---

## 1. Discordへの通知を連携する方法

### **1-1. Discord側でウェブフックを作成**

1. Discordサーバー内の通知を受け取りたいチャンネルに移動します。  
2. チャンネル設定（⚙️）を開き、**「連携サービス」→「ウェブフックを作成」**をクリック。  
3. ウェブフックの名前やアイコンを設定し、「ウェブフックURL」をコピーします。  

※図：  
```
[Discordチャンネル設定]
   └─ 連携サービス
         └─ ウェブフック作成 → URLコピー
```

### **1-2. Google Apps Script でDiscordへ送信するコード例**

以下のサンプルコードは、Googleフォームの回答が送信されたときにDiscordへ通知を送る仕組みです。コード内の「YOUR_DISCORD_WEBHOOK_URL」を、先ほどコピーしたURLに置き換えてください。

```js
// Discordに通知を送る関数
function sendDiscordNotification(formResponse) {
  const webhookUrl = "YOUR_DISCORD_WEBHOOK_URL";  // DiscordのウェブフックURLを入力

  // 回答内容を取得（フォームの回答は配列で受け取れる）
  const answers = formResponse.values;
  let message = "📣 **新しいフォーム回答がありました！**\n";
  
  // 回答内容を順次連結
  answers.forEach((answer, index) => {
    message += `**項目 ${index + 1}**: ${answer}\n`;
  });
  
  // Discordに送信するpayloadを作成
  const payload = JSON.stringify({ "content": message });
  
  // POSTリクエストでDiscordへ通知送信
  const options = {
    'method': 'POST',
    'contentType': 'application/json',
    'payload': payload
  };
  
  UrlFetchApp.fetch(webhookUrl, options);
}

// フォーム送信時に実行されるトリガー用関数
function onFormSubmit(e) {
  sendDiscordNotification(e);
}
```

### **1-3. トリガーの設定**

1. Googleフォーム編集画面より「︙」→【スクリプトエディタ】を開き、上記コードを貼り付けます。  
2. メニューの「時計」アイコンをクリックし【トリガー】画面へ。  
3. 「＋ トリガーを追加」をクリックし、以下の設定で保存します：  
   - 実行する関数：`onFormSubmit`  
   - イベントのソース：**フォームから**  
   - イベントの種類：**フォーム送信時**  
4. 初回実行時は、認証の許可画面が表示されますので、指示に従って認証してください。  

---

## 2. Slackへの通知を連携する方法

### **2-1. Slack側でウェブフックを作成**

1. Slackのワークスペースにログインし、通知を受け取りたいチャンネルに移動します。  
2. チャンネル名を右クリックし【Edit Channel】（チャンネル設定）→**「連携サービス」**を選択。  
3. 「ウェブフックを作成」をクリックし、設定後に**Webhook URL**をコピーします。

※図：  
```
[Slackチャンネル設定]
   └─ 連携サービス
         └─ ウェブフック作成 → URLコピー
```

### **2-2. Google Apps Script でSlackへ送信するコード例**

次のサンプルコードは、Discord向けのコードと似た形ですが、Slackの場合はJSONのキーが異なります。例えば、メッセージ本文は `"text"` キーに入れます。

```js
// Slackに通知を送る関数
function sendSlackNotification(formResponse) {
  const webhookUrl = "YOUR_SLACK_WEBHOOK_URL";  // SlackのウェブフックURLに置き換え
  
  // 回答内容を取得
  const answers = formResponse.values;
  let message = "🚀 新しいフォーム回答があります！\n";
  
  answers.forEach((answer, index) => {
    message += `*項目 ${index + 1}*: ${answer}\n`;
  });
  
  // Slack用payload（keyが "text" になる点に注意）
  const payload = JSON.stringify({ "text": message });
  
  const options = {
    'method': 'POST',
    'contentType': 'application/json',
    'payload': payload
  };
  
  UrlFetchApp.fetch(webhookUrl, options);
}

// Slack用トリガー関数（用途に応じて使い分けるか、両方を呼び出す）
function onFormSubmitSlack(e) {
  sendSlackNotification(e);
}
```

### **2-3. トリガーの設定（Slackの場合も同様）**

先ほどのDiscord通知と同様に、GoogleフォームのスクリプトエディタでSlack用の関数を設定し、**フォーム送信時のトリガー**として登録します。

---

## 3. 発展：DiscordとSlackの両方へ同時通知

複数の通知先に同時連携する場合、両方の送信関数を呼び出すラッパー関数を作成すると便利です。

```js
// 両方の通知を同時に送信する関数
function onFormSubmitAll(e) {
  sendDiscordNotification(e);
  sendSlackNotification(e);
}
```

この関数をトリガーとして設定すれば、フォーム送信時にDiscordとSlackへ同時に通知が飛びます。👍

---

## 4. 補足：エラー対策とトラブルシュート

- **認証の問題**  
  初回のトリガー設定時は、Googleアカウントの認証が必要です。表示される指示に沿って許可しましょう。  
- **URLのチェック**  
  ウェブフックURLが正確にコピペされているか確認してください。余分な文字が入っていないかチェックすることが重要です。  
- **デバッグ**  
  GASの「ログ出力機能」を使って、URLFetchApp.fetch() のレスポンス内容を確認し、問題箇所を特定しましょう。例：  
  ```js
  const response = UrlFetchApp.fetch(webhookUrl, options);
  Logger.log(response.getContentText());
  ```
- **ペイロードの形式**  
  SlackとDiscordではペイロードのキーが異なるため、コード例をそのままコピペする際は必ずキーを確認してください。

---

## まとめ

今回は、Googleフォームの回答送信後に自動でDiscordやSlackへ通知を送る方法を、Google Apps Scriptを使った具体的なコードサンプルとともに解説しました。  
- ✅ **Discord連携**：ウェブフック作成、GASでのPOST送信、トリガー設定  
- ✅ **Slack連携**：キーペイロードの違いに注意しながら実装  
- ✅ **両方同時に通知**：ラッパー関数で実現

これらの仕組みを導入することで、フォーム送信からリアルタイムな情報共有が実現し、問い合わせ対応や業務プロセスの改善に大きく貢献します。ぜひ、実際のプロジェクトで試してみてください。🚀

Happy Coding! 👩‍💻👨‍💻


---
<p class="codepen" data-height="618" data-default-tab="result" data-slug-hash="NPKVXeE" data-pen-title="💖 ご支援いただけませんか？" data-editable="true" data-user="yamamotoyushi" style="height: 618px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/NPKVXeE">
  💖 ご支援いただけませんか？</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>