0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

スクリーンショット 2025-02-04 21.11.03.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に置き換えてください。

// 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" キーに入れます。

// 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の両方へ同時通知

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

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

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


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

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

まとめ

今回は、Googleフォームの回答送信後に自動でDiscordやSlackへ通知を送る方法を、Google Apps Scriptを使った具体的なコードサンプルとともに解説しました。

  • Discord連携:ウェブフック作成、GASでのPOST送信、トリガー設定
  • Slack連携:キーペイロードの違いに注意しながら実装
  • 両方同時に通知:ラッパー関数で実現

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

Happy Coding! 👩‍💻👨‍💻


See the Pen 💖 ご支援いただけませんか? by Yushi Yamamoto (@yamamotoyushi) on CodePen.

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?